Share
I denne serien bygger vi en Twitter-klient for Android-plattformen ved hjelp av Twitter4J-biblioteket. I denne opplæringen vil vi forberede våre brukergrensesnittelementer for appen og håndtere signering av brukeren til Twitter for å tillate tilgang til kontoen sin.
Før vi kan få tilgang til brukerens Twitter-konto, trenger vi dem til å logge på og gi app-tillatelsen. Åpne hovedaktivitetsklassen for din søknad, opprett den nå hvis Eclipse ikke genererte det automatisk når du startet prosjektet. Endre klassedatabladets åpningslinje som følger, og endre klassens navn slik at det passer deg selv om det er nødvendig:
offentlig klasse TwitNiceActivity utvider Aktivitetsredskaper OnClickListener
OnClickListener vil oppdage ulike knappeklikk. Du vil trenge følgende importerklæringer lagt til over klassedeklarasjonen din, selv om Eclipse kan ha lagt til noen automatisk:
importer android.app.Activity; importere android.os.Bundle; importer android.view.View.OnClickListener;
I klassen legger du til følgende instansvariabler:
/ ** utviklerkontosnøkkel for denne appen * / offentlig endelig statisk streng TWIT_KEY = "din nøkkel"; / ** utvikler hemmelighet for appen * / offentlig endelig statisk streng TWIT_SECRET = "din hemmelige"; / ** app url * / offentlig endelig statisk streng TWIT_URL = "tnice-android: ///";
Endre nøkkel- og hemmelige variabler for å lagre verdiene du kopierte fra Twitter Developer-kontoen din sist. Legg merke til at nettadressen er en utvidet versjon av dataelementet vi har lagt til manifestet, så sørg for å endre det hvis du brukte en annen verdi der. Legg til følgende ekstra instansvariabler for å koble til Twitter:
/ ** Twitter eksempel * / privat Twitter niceTwitter; / ** Request token for tilgang til brukerkonto * / privat RequestToken niceRequestToken; / ** delte preferanser for å lagre brukerdetaljer * / private SharedPreferences nicePrefs; // for feillogging av privat String LOG_TAG = "TwitNiceActivity"; // endre for aktivitetsnavnet
Når brukeren tillater tillatelse, legger vi til de resulterende dataene til de delte innstillingene. Hver gang appen kjører, vil den sjekke om disse detaljene er angitt. I så fall vil det bruke dem til å hente brukerens tidslinje med en gang. Hvis detaljene ikke er angitt, vil det be brukeren om å logge på og gi tillatelse. Du må ha følgende importerklæringer:
importere twitter4j.Twitter; importer twitter4j.auth.RequestToken; importer android.content.SharedPreferences;
I aktiviteten onCreate-metoden legger du til følgende kode etter samtalen til superklassemetoden:
Accentsconagua
// få innstillingene for appen nicePrefs = getSharedPreferences ("TwitNicePrefs", 0); // finne ut om brukerinnstillingene er angitt hvis (nicePrefs.getString ("user_token", null) == null) // ingen brukerpreferanser så ledig for å logge inn setContentView (R.layout.main); ellers // brukerinnstillinger er angitt - få tidslinjeoppsettTimeline (); Her får vi en referanse til programmet Delt innstillinger for å fastslå om brukeren allerede har gitt apptillatelsen, eller ikke. "User_token" -preferansestrengen skal lagre tilgangstoken vi bruker for å få tilgang til Twitter, så hvis den allerede er angitt, vet vi at brukeren tidligere har logget på appen. Hvis innstillingene ikke er angitt, må vi be brukeren om å logge inn på Twitter, som vi vil gjøre i "if" -oppgaven - for øyeblikket setter vi bare hovedinnholdet.
I "ellers" -blokken tar vi vare på brukere som allerede har logget på og autorisert appen. Her kaller vi en hjelpemetode med navnet "setupTimeline" som vi skal implementere i neste opplæring.
La oss lage vår hovedoppsett, som vi har satt i "if" -oppgaven. Normalt oppretter Eclipse en fil på "res / layout / main.xml" automatisk, hvis ikke, kan du selv lage det ved å høyreklikke på layoutmappen i Package Explorer (eller velge den og deretter velge File-menyen), og deretter velge " Ny "og" Fil ". Åpne hovedoppsettfilen og skriv inn følgende XML-kode:
Dette er en LinearLayout med to tekstfelter og en knapp. Tekstfeltene er rett og slett informative, mens knappen vil ta brukeren til Twitter-påloggingswebsiden. Knappen har et ID-attributt slik at vi kan identifisere det i Java-koden.
Nå tilbake til vår onCreate-metode for hovedappaktiviteten for å implementere signering av første gangs brukere. Du trenger følgende import:
importer android.util.Log;
Inne i "if" -blokken, legger du til følgende etter linjen der vi angir hovedinnholdsvisning:
// få en kvittering for godkjenning niceTwitter = ny TwitterFactory (). getInstance (); // pass utvikler nøkkel og hemmelig niceTwitter.setOAuthConsumer (TWIT_KEY, TWIT_SECRET);
Her lager vi en forekomst av Twitter-klassen fra Twitter4J-biblioteket, som vi allerede erklærte som en instansvariabel. Denne klassen er nødvendig for stort sett alt vi gjør med Twitter. For å bekrefte legitimasjonene våre, sender vi nøkkelen og hemmeligheten fra utviklergrensesnittet der appen ble registrert, for begge disse har vi opprettet klassekonstanter. Deretter må vi få en forespørsel token fra Twitter-objektet slik at vi kan prøve å autorisere appen til brukerens konto:
// Prøv å få forespørselstoken prøve // få godkjenningsforespørsels-token niceRequestToken = niceTwitter.getOAuthRequestToken (TWIT_URL); fangst (TwitterException te) Log.e (LOG_TAG, "TE" + te.getMessage ());
Vi forsøker å instantiere forespørsels-token som vi opprettet en instansvariabel for. Metoden kan kaste et unntak, så vi omgir det i en prøveblokk og sender ut en feilmelding til Android-logg hvis unntaket blir kastet. Legg merke til at koden bruker "LOG_TAG" -konstanten vi opprettet - du kan se de resulterende meldingene i Eclipse LogCat-panelet.
For å fullføre "if" -blokken, sett opp en klikklytter for påloggingsknappen som vi inkluderte i vår "main.xml" layoutfil:
// oppsettknapp for klikklytteren Knapp signIn = (Button) findViewById (R.id.signin); signIn.setOnClickListener (this);
Klikklytteren for knappen er aktivitetsklassen selv, så vi må nå implementere onClick-metoden hvor som helst i klassefilen:
/ ** * Klikk lytterhåndtakene logg inn og tweet-knappetrykkene * / public void onClick (Vis v) // finn visningsbryter (v.getId ()) // logg inn-knappen trykt tilfelle R.id.signin: / / ta brukeren til twitter-godkjenningens webside for å tillate app tilgang til twitterkontoen String authURL = niceRequestToken.getAuthenticationURL (); startActivity (new Intent (Intent.ACTION_VIEW, Uri.parse (authURL))); gå i stykker; // andre lyttere her standard: break;
Metoden bruker en bryteretning til å skreddersy hva som skjer med bestemte knappetrykk. Vi legger til en saksoppgave for en annen knapp senere, men for øyeblikket er alt vi trenger, tilloggingsprosessen. Koden henter autentiseringsadressen fra Twitter request token-objektet, og åpner siden i nettleseren.
Ikke bekymre deg for mye om hvordan disse Twitter4J-metodene implementeres. Dette er bare prosessen du må følge hvis du bruker API. Ikke å måtte bekymre deg med implementeringsdetaljer for å koble til Twitter, er en av de viktigste fordelene ved å bruke et eksternt bibliotek.
Vi må håndtere hva som vil skje når brukeren blir returnert til appen etter at han er logget inn på Twitter for å godkjenne det. Når brukeren logger inn, vil Twitter returnere dem sammen med noen data for å bekrefte og legge til rette for appens tilgang til kontoen sin. "OnNewIntent" -metoden vil brann, så la oss implementere det nå:
/ * * onNewIntent branner når brukeren returnerer fra Twitter-autentisering Webside * / @Override protected void onNewIntent (Intent Intent) super.onNewIntent (intent); // få de hentede dataene Uri twitURI = intent.getData (); // sørg for at nettadressen er korrekt hvis (twitURI! = null && twitURI.toString (). starter med (TWIT_URL)) // er verifcation - få de returnerte dataene String oaVerifier = twitURI.getQueryParameter ("oauth_verifier"); Metoden henter bekreftelsesdataene fra Twitter, som vi senere vil bruke for å få tilgang til brukerens tweets. Slik at vi bare trenger å utføre påloggingsprosessen en gang, lagrer vi de nødvendige dataene i programmet Delt innstillinger. Fortsett inne i setningen "if", legg til følgende:
// forsøk på å hente tilgangstoken prøve // prøv å få en tilgangstoken ved hjelp av de returnerte dataene fra bekreftelsessiden AccessToken accToken = niceTwitter.getOAuthAccessToken (niceRequestToken, oaVerifier); // legge token og hemmeligheten til delte prefs for fremtidig referanse nicePrefs.edit () .putString ("user_token", accToken.getToken ()) .putString ("user_secret", accToken.getTokenSecret ()) .commit (); // vise tidslinjen setupTimeline (); catch (TwitterException te) Log.e (LOG_TAG, "Mislyktes å få tilgangstoken:" + te.getMessage ()); Dette er en annen metode som kan føre til at et unntak kastes. Koden i forsøksblokken først henter tilgangstoken fra Twitter ved hjelp av dataene som returneres fra nettsiden. Deretter bruker den objektet Delt innstillinger for å lagre Token og Secret som er nødvendig for Twitter-tilgang. Til slutt kaller koden metoden for å vise tidslinjen, som vi ennå ikke har implementert.
Hvis du vil teste innloggingsprosessen akkurat nå, gir du "setupTimeline" -metoden, bare med en meldingsutgang til loggen, for eksempel:
privat tomgang setupTimeline () Log.v (LOG_TAG, "sette opp tidslinje");
Vi vil implementere metoden fullt ut i følgende opplæringsprogrammer.
Nå som vi har håndtert signering av brukere første gang de kjører programmet, kan vi gå til brukergrensesnittet for appen som den kjører senere. Vi bruker ulike ressurser i brukergrensesnittdesignet for denne appen, inkludert drawables, farger og layouter. Oppsett XML-filene vil referere til trekkbare ressurser som vi vil opprette i neste trinn. Ikke bekymre deg hvis Eclipse varsler deg om feil fordi ressursene ikke er tilstede ennå. Når du oppretter layoutfilene, må du bare legge merke til referansene til ressursene du fortsatt må opprette.
Appen skal bruke fire layoutfiler, hvorav en ("main.xml") vi allerede har opprettet for påloggingsskjermen som bare vises på første runde. Vi trenger også oppsett for å definere utseendet til hovedtidslinjen, Tweet-skjermen og hver oppdatering i tidslinjen. I hver layoutfil vil du legge merke til at mange av elementene har ID-attributter. Dette er slik at vi kan henvise til disse elementene i Java-programkoden, spesielt når du håndterer brukerinteraksjon.
Tidslinjelayoutet skal være det viktigste grensesnittet brukere ser når de starter appen, etter å ha godkjent den. Hjemets tidslinje viser listen over nylige tweets fra de kontoene brukeren følger. Øverst på skjermen ser brukeren en topptekst og knappen Tweet, for å bytte til Tweet-skjermen for å sende en tweet. Innholdet i hver oppdatering i hjemmets tidslinje blir definert i en separat oppsettfil, men i tidslinjeplanleggingen vil vi ta vare på beholderen for listen over oppdateringer som helhet.
Opprett en ny fil i mappen "res / layout", med "timeline.xml" som filnavn. Åpne den nye filen og legg til følgende disposisjon, som vi vil utvide:
Visningen er definert av en LinearLayout. Inne i dette har vi en TableLayout og en ListView. Vi legger til elementer i TableRow neste. ListView skal holde listen over oppdaterings tweets vist i brukerens hjem tidslinje. Listen blir fylt med de tweets når applikasjonen kjøres. For øyeblikket definerer vi bare visningen som holder dem.
Legg til innhold inne i TableLayout TableRow-elementet:
Dette skaper en overskrift for hjemme tidslinjen. Teksten "Hjem" er lagt ut ved siden av en trekkbar ressurs som heter "hjemme". Legg merke til at delen også har en bakgrunn som er en annen trekkbar ressurs som heter "homebg".
Deretter legger du til tweet-knappen, fortsatt inne i TableRow, men etter LinearLayout du nettopp har lagt til:
Som du kan se, ligner dette hjemmeboksen, men i dette tilfellet vil visningen fungere som en knapp - LinearLayout har sitt "klikkbare" attributt satt til ekte. Knappen vil inneholde teksten "Tweet" som vises ved siden av et bilde. Når brukere klikker denne knappen, blir de tatt til Tweet-skjermen.
For øyeblikket når du velger kategorien Grafisk layout for tidslinjen XML i Eclipse, ser du ikke mye. Når vi har opprettet drawables og oppdateringslayoutfilen, vil den se slik ut:
Siden innholdet i tidslinjen bare er bygget i løpet av kjøretiden, kan du ikke se hvordan grensesnittet vil se ut før du kan kjøre appen.
Vi skal bruke en layoutfil for å modellere en enkelt oppdatering innenfor hjemmets tidslinje. Opprett en ny fil i layoutkatalogen, navngi den "update.xml". Skriv inn følgende oversikt:
Oppsettet inneholder en seksjon for profilbildet for kontoen hvis tweet vises, og deretter en del for tweetinnholdet. I det andre LinearLayout-elementet vil vi legge til tweetinnholdet og knappene for retweeting / svar. Begynn med tweetinnholdet:
Hver tweet inneholder skjermnavnet til tweetingkontoen, tidspunktet for tweet ble sendt, og tweetet selv. Hver TextView har et ID-attributt, da Java-koden skal kartlegge innkommende tweet-data til disse visningene når appen kjører. Den endelige TextView, for tweetteksten selv, har "autoLink" -attributtet slik at brukerne kan klikke på koblinger i tweets. Brukernavnet på skjermbildet kan også klikkes, slik at brukerne kan bla gjennom profilsiden til hver konto i tidslinjen. Legg merke til at disse visningene også inneholder referanser til fargematerialer som vi ennå ikke har opprettet.
La oss nå legge til retweet- og svarknappene, etter TextView vi nettopp har lagt til:
Hver tweet i tidslinjen skal ledsages av disse knappene, hver med en liten tekst og en bakgrunn. Her er et øyeblikksbilde av en enkelt oppdatering i den ferdige appen.
Nå vender vi til den andre hovedskjermbildet i appen, Tweet-skjermen. Opprett en annen ny fil i Layout-mappen din, og navngi den "tweet.xml". Skriv inn følgende oversikt:
Vi legger til flere elementer etter TableLayout neste. Ikke bekymre deg for å legge til all denne koden på en gang - hvis du sammenligner den med tidslinjeplanleggingen ovenfor, ser du at den er nesten identisk. Øverste delen med hjemmekopteksten og tweeteknappen vises på samme måte i både hjemme tidslinje og tweets skjermbilder. Bortsett fra noen små kosmetiske forskjeller for å skille de to, er hovedforskjellen at i skjermbildet Tweet fungerer funksjonen som en knapp for å ta brukeren tilbake til sin tidslinje, mens i tidslinjeplanleggingen fungerer Tweet View som en knapp.
Etter TableLayout legger du til følgende:
Dette er hovedinnholdet for Tweet-skjermen. En liten mengde informativ tekst går foran det redigerbare tekstfeltet for at brukeren skal skrive inn tweetteksten, så har vi en knapp for at de skal fortsette og sende tweetet. Når vi har opprettet våre trekkbare ressurser, ser du i kategorien Grafisk layout for tweetoppsettet noe slikt:
La oss nå lage de visuelle elementene i grensesnittet, de fleste av dem har vi allerede omtalt i våre layoutressurser. Noen av våre drawables vil bli definert i XML-filer, og noen vil bli opprettet utenfor applikasjonen, ved hjelp av et grafisk design eller bilderedigeringsprogram. Du kan selvfølgelig endre noen av de visuelle elementene du liker, men jeg vil anbefale å starte med trinnene som er skissert i denne opplæringen, og deretter gjøre endringer når du forstår hvordan de forskjellige ingrediensene forholder seg til hverandre.
For denne applikasjonen bruker vi tre bilder opprettet utenfor Eclipse, for appikonet, hjemme tidslinjen og tweet-knappen. Du kan lage dine egne versjoner av disse hvis du vil, eller ikke bry deg om å bruke bilder i det hele tatt hvis du foretrekker det. Hjem-tidslinjen er en enkel tegning, mens tweet-knappen og appikonet bruker de offisielle Twitter-ressursene, som også inkluderer retweet, svar og favorittikoner.
 |  |  |
 |  |  |
 |  |  |
Når du har dine drawables klar, kopier dem til din arbeidsområde-mappe, i "res / drawables- *". Eclipse burde ha opprettet tre drawables-mapper i prosjektets arbeidsområde, for enheter med lav, medium og høy oppløsning. Bildene må lagres som "ic_launcher" for ikonet, "hjemme" og "tweet" for knappene. Kontroller at hvert bilde er lagret med samme navn i hver mappe, f.eks. Tweet-bildet kan bli kalt "tweet.png" i alle tre mappene, selv om bildene i hver mappe faktisk er forskjellige størrelser, for å passe de forskjellige resolusjonene.
Du må kanskje instruere Eclipse om å oppdatere arbeidsområdet ditt før koden din kan vise de nye bildene med hell. For å gjøre dette, velg prosjektet i Package Explorer, høyreklikk eller velg Arkiv, og Oppdater deretter.
Annet enn svart, hvitt og grått, bruker appgrensesnittet hovedsakelig to farger, nyanser av grønt og blått. La oss definere disse som fargeressurser. I Eclipse, lag en ny fil i katalogen "res / values" med navnet "colors.xml":
I fargene XML-filen, skriv inn følgende kode for å definere de to hovedfargene i appen:
# FF006699 # FF009933 # 66006699 # 66009933
Denne koden indikerer to farger pluss ugjennomsiktige versjoner av hver. Nå hvis du vil endre fargevalg for applikasjonsknappene, kan du gjøre det på et enkelt sted.
Til slutt, la oss få våre bakgrunner opprettet for å fullføre brukergrensesnittet. Vi vil løpe gjennom hver trekkbar fil i sin tur, men husk at du må kopiere hver enkelt til alle tre trekkbare mappene i appens ressursmappe.
Opprett en ny fil i Drawables-mappen din med navnet "homebg.xml" med følgende innhold:
Dette definerer en enkel trekkform med polstring og en gradientfylling. Hvis du ser tilbake på tidslinjens XML-layoutkode, vil du se denne trekkeren referert til som bakgrunnen for en LinearLayout.
Opprett en ny fil med navnet "homebtnbg.xml" i dine drawables med følgende innhold:
Denne bakgrunnen brukes til Hjem-knappen i Tweet-skjermen. Deretter opprett en fil med navnet "profilebg.xml" med følgende innhold:
Denne gangen definerer vi avrundede hjørner samt polstring og gradientfylling. Denne bakgrunnen er for å vise bak profilbildene i tidslinjen.
De to siste trekkene er litt mer komplekse. For Tweet-knappen og knappene i hver oppdatering (for å svare eller retweeting) skal vi definere forskjellige utseende for utvalgstilstander, slik at knappene endres i utseende når brukeren trykker på dem. Opprett en fil kalt "tweetbtnbg.xml" med følgende innhold:
Denne koden definerer to litt forskjellige former, en for når knappen trykkes. Den eneste forskjellen mellom dem er i fargene, som er definert som fargematerialene vi opprettet. Endelig opprett en lignende fil kalt "updatebtnbg.xml" med følgende innhold:
Når du har kopiert dem til hver av dine drawables-mapper, kan du velge å endre dem for å passe til forskjellige skjermstørrelser hvis du ønsker det. Dine trekkbare ressurser skal se slik ut, med alle filene i alle tre mappene:
Eclipse skal nå slutte å vise feilmeldinger for layoutfilene dine, da alle refererte ressurser er til stede.
Nå er vårt brukergrensesnitt design ferdig! I neste veiledning vil vi opprette en database for å lagre oppdaterings tweets, og bruk en adapter for å kartlegge disse oppdateringene til View-elementene slik at brukeren kan se dem.
