Share
În această serie construim un client Twitter pentru platforma Android folosind biblioteca Twitter4J. În acest tutorial vom pregăti elementele interfeței de utilizator pentru aplicație și vom gestiona semnarea utilizatorului în Twitter pentru a permite accesul la contul său.
Înainte de a putea accesa contul de utilizator al utilizatorului, trebuie să ne conectăm și să acordăm permisiunea aplicației. Deschideți clasa principală de activitate pentru aplicația dvs., creând-o acum dacă Eclipse nu a generat-o automat când ați început proiectul. Modificați linia de deschidere a declarației de clasă după cum urmează și schimbați numele clasei, dacă este necesar:
clasa publică TwitNiceActivity se extinde Activitatea implementează OnClickListener
OnClickListener va detecta diferite clicuri pe butoane. Veți avea nevoie de următoarele declarații de import adăugate deasupra declarației de clasă, deși Eclipse ar fi adăugat unele automat:
importă android.app.Activity; import android.os.Bundle; importă android.view.View.OnClickListener;
În interiorul clasei, adăugați următoarele variabile de instanță:
/ ** cheia contului de dezvoltator pentru această aplicație * / public final static String TWIT_KEY = "cheia dvs."; / ** secretul dezvoltatorului pentru aplicația * / public final static String TWIT_SECRET = "secretul tău"; / ** app url * / String public static final TWIT_URL = "tnice-android: ///";
Modificați variabilele cheie și secret pentru a stoca ultima dată valorile pe care le-ați copiat din contul dvs. de dezvoltator Twitter. Observați că adresa URL este o versiune extinsă a elementului de date pe care l-am adăugat la Manifest, deci asigurați-vă că o modificați dacă ați folosit o altă valoare acolo. Adăugați următoarele variabile de instanță suplimentare pentru conectarea la Twitter:
/ ** Twitter exemplu * / privat Twitter niceTwitter; / ** cerere token pentru accesarea contului de utilizator * / private RequestToken niceRequestToken; / ** preferințe partajate pentru a stoca detaliile utilizatorului * / private SharedPreferences nicePrefs; // pentru logarea erorilor String privat LOG_TAG = "TwitNiceActivity"; // modificați numele activității
Atunci când utilizatorul acordă permisiunea, vom adăuga datele rezultate în Preferințele partajate. De fiecare dată când aplicația rulează, va verifica dacă aceste detalii au fost stabilite. Dacă este așa, le va folosi pentru a scoate imediat cronologia utilizatorului. Dacă detaliile nu au fost stabilite, acesta va solicita utilizatorului să se conecteze și să acorde permisiunea. Veți avea nevoie de următoarele declarații de import:
import twitter4j.Twitter; import twitter4j.auth.RequestToken; import android.content.SharedPreferences;
În metoda Activity onCreate, după apelul la metoda superclass, adăugați următorul cod:
Accentsconagua
// obțineți preferințele pentru aplicație nicePrefs = getSharedPreferences ("TwitNicePrefs", 0); // aflați dacă preferințele utilizatorilor sunt setate dacă (nicePrefs.getString ("user_token", null) == null) // nici o preferință de utilizator atât de promptă pentru a vă conecta setContentView (R.layout.main); altfel // preferințele utilizatorului sunt setate - obține linia temporală setupTimeline (); Aici găsim o referință la obiectul Preferințe partajate pentru aplicații, pentru a stabili dacă utilizatorul a acordat sau nu permisiunea aplicației. Șirul de preferințe "user_token" va stoca tokenul de acces pe care îl folosim pentru accesarea Twitter-ului, deci dacă acesta a fost deja setat, știm că utilizatorul a semnat anterior pentru aplicație. În cazul în care preferințele nu au fost stabilite, trebuie să solicităm utilizatorului să se conecteze la Twitter, ceea ce vom face în declarația "if" - pentru moment, am setat pur și simplu afișarea principală a conținutului.
În blocul "altceva" avem grija de utilizatorii care s-au conectat deja și au autorizat aplicația. Aici numim o metodă de ajutor numită "setupTimeline" pe care o vom implementa în tutorialul următor.
Să formăm structura noastră principală, pe care am stabilit-o în declarația "if". În mod normal, Eclipse creează automat un fișier la "res / layout / main.xml", dacă nu îl poți crea singur, făcând clic dreapta pe folderul Layout din Explorer Explorer (sau selectând-l și apoi selectând meniul File) Nou "și" Fișier ". Deschideți fișierul de aspect principal și introduceți următorul cod XML:
Acesta este un LinearLayout cu două câmpuri de text și un buton. Câmpurile de text sunt pur informative, în timp ce butonul va duce utilizatorul pe pagina Web de conectare Twitter. Butonul are un atribut ID, astfel încât să îl putem identifica în codul Java.
Acum, înapoi la metoda noastră onCreate pentru aplicația principală Activitatea de a implementa semnarea utilizatorilor pentru prima dată. Veți avea nevoie de următorul import:
import șiroid.util.Log;
În interiorul blocului "if", după linia în care setăm afișarea principală a conținutului, adăugați următoarele:
// a obține o instanță twitter pentru autentificare niceTwitter = new TwitterFactory () getInstance (); // treci cheia dezvoltatorului și secretul secretTwitter.setOAuthConsumer (TWIT_KEY, TWIT_SECRET);
Aici vom crea o instanță a clasei Twitter din biblioteca Twitter4J, pe care am declarat-o deja ca o variabilă de instanță. Această clasă este necesară pentru tot ceea ce facem cu Twitter. Pentru a verifica acreditările noastre, trecem cheia și secretul din interfața dezvoltatorului în care a fost înregistrată aplicația, pentru care am creat constante de clasă. Apoi trebuie să obținem un jeton de solicitare din obiectul Twitter pentru a putea încerca să autorizăm aplicația pentru contul utilizatorului:
// încercați să obțineți tokenul cererii încercați // primiți jetonul de solicitare de autentificare niceRequestToken = niceTwitter.getOAuthRequestToken (TWIT_URL); captură (TwitterException te) Log.e (LOG_TAG, "TE" + te.getMessage ());
Încercăm să instanțiăm jetonul de solicitare pentru care am creat o variabilă de instanță. Metoda poate arunca o excepție, așa că o înconjoară într-un bloc de încercare și trimitem un mesaj de eroare la jurnalul Android dacă este aruncată excepția. Observați că codul utilizează constanta "LOG_TAG" pe care am creat - puteți vedea mesajele rezultate în panoul Eclipse LogCat.
Pentru a termina blocul "if", configurați un ascultător de clic pentru butonul de conectare pe care l-am inclus în fișierul de aspect "main.xml":
// buton de configurare pentru ascultător de clic Buton signIn = (buton) findViewById (R.id.signin); signIn.setOnClickListener (aceasta);
Ascultătorul de clic pentru buton este clasa de activități în sine, deci acum trebuie să implementăm metoda onClick oriunde în fișierul de clasă:
/ ** * Faceți clic pe ascultător se ocupă de conectare și apăsați butonul tweet * / public void onClick (View v) // găsi comutator vizualizare (v.getId ()) // buton de conectare apăsat case R.id.signin: / / să ia user-ul la pagina de autentificare Twitter pentru a permite accesul app la contul lor de twitter String authURL = niceRequestToken.getAuthenticationURL (); startActivity (nou intent (Intent.ACTION_VIEW, Uri.parse (authURL))); pauză; // alți ascultători aici implicit: pauză;
Metoda utilizează o declarație de comutare pentru a adapta ceea ce se întâmplă cu presele speciale ale butoanelor. Vom adăuga o declarație de caz pentru un alt buton mai târziu, dar pentru moment tot ce ne trebuie este procesul de conectare. Codul preia adresa de autentificare din obiectul token token cerere, apoi deschide pagina din browserul Web.
Nu vă faceți griji prea multe despre modul în care sunt implementate aceste metode Twitter4J. Acesta este pur și simplu procesul pe care trebuie să-l urmați dacă utilizați API-ul. Nu trebuie să vă preocupați de implementarea detaliilor legate de conectarea la Twitter este unul dintre principalele beneficii pentru utilizarea unei biblioteci externe.
Trebuie să ne ocupăm de ceea ce se va întâmpla atunci când utilizatorul va fi returnat aplicației după ce sa semnat pe Twitter pentru al autoriza. Când utilizatorul se conectează cu succes, Twitter le va returna împreună cu unele date pentru a verifica și facilita accesul aplicației la contul său. Metoda "onNewIntent" se va declanșa, așadar să o implementăm acum:
/ * * la incendiuNewIntent când utilizatorul revine din autentificare Twitter Pagina Web * / @Override protejată void onNewIntent (Intent intent) super.onNewIntent (intent); // obține datele preluate Uri twitURI = intent.getData (); // asigurați-vă că adresa URL este corectă dacă (twitURI! = null && twitURI.toString () începe cu (TWIT_URL)) // este verificarea - obțineți datele returnate String oaVerifier = twitURI.getQueryParameter ("oauth_verifier"); Metoda preia datele de verificare de pe Twitter, pe care le vom folosi ulterior pentru a accesa tweeturile utilizatorului. Pentru a avea nevoie doar de o singură dată pentru a efectua procesul de conectare, stocăm datele necesare în aplicația Preferințe partajate pentru aplicații. Încă în interiorul instrucțiunii "if", adăugați următoarele:
// încercați să preluați tokenul de acces încercați // încercați să obțineți un jeton de acces utilizând datele returnate din pagina de verificare AccessToken accToken = niceTwitter.getOAuthAccessToken (niceRequestToken, oaVerifier); // adăugați token și secret la prefs partajate pentru referințe viitoare nicePrefs.edit () .putString ("user_token", accToken.getToken ()) .putString ("user_secret", accToken.getTokenSecret ()) .commit (); // afișați cronologia setupTimeline (); captură (TwitterException te) Log.e (LOG_TAG, "Nu a reușit obținerea indicativului de acces:" + te.getMessage ()); Aceasta este o altă metodă care poate determina o excepție care trebuie aruncată. Codul din interiorul blocului de încercare primește primul Token de acces de pe Twitter folosind datele returnate din pagina Web. Apoi utilizează obiectul Preferințe partajate pentru a stoca Tokenul și Secretul necesar pentru accesarea Twitter. În cele din urmă, codul solicită metoda de afișare a cronologiei, pe care nu am implementat-o încă.
Dacă doriți să testați procesul de conectare chiar acum, furnizați metoda "setupTimeline", pur și simplu includeți o ieșire a mesajului în jurnal, de exemplu:
private void setupTimeline () Log.v (LOG_TAG, "setarea cronologiei");
Vom implementa metoda pe deplin în următoarele tutoriale.
Acum, când ne-am ocupat de semnarea utilizatorilor în prima dată când rulează aplicația, putem să ne întoarcem la interfața cu utilizatorul pentru aplicație pe măsură ce funcționează ulterior. Vom folosi diferite resurse în proiectarea interfeței cu utilizatorul pentru această aplicație, inclusiv desene, culori și machete. Fișierele XML de dispunere se vor referi la resursele trasabile pe care le vom crea în etapa următoare. Nu vă faceți griji dacă Eclipse vă avertizează asupra erorilor deoarece resursele nu sunt încă prezente. Când creați fișierele de aspect, pur și simplu observați referințele la resursele pe care trebuie să le creați în continuare.
Aplicația va utiliza patru fișiere de aspect, dintre care unul ("principal.xml") pe care l-am creat deja pentru ecranul de conectare care apare doar la prima rulare. De asemenea, avem nevoie de machete pentru a defini aspectul cronologiei principale, ecranul Tweet și fiecare actualizare din cronologie. În fiecare fișier de aspect, veți observa că multe dintre elementele au atribute ID. Acest lucru este posibil pentru a ne putea referi la aceste elemente în cadrul codului aplicației Java, mai ales atunci când manipulați interacțiunea cu utilizatorul.
Layout-ul cronologiei va fi principala interfață pe care utilizatorii o văd când lansează aplicația, după ce o autorizează. Cronologia de acasă afișează lista de tweet-uri recente din acele conturi pe care utilizatorul le urmează. În partea de sus a ecranului, utilizatorul va vedea un antet și butonul Tweet, pentru a trece la ecranul Tweet pentru a trimite un tweet. Conținutul fiecărei actualizări din cronologia de domiciliu va fi definit într-un fișier de layout separat, dar în aspectul cronologiei vom avea grijă de container pentru lista actualizărilor ca întreg.
Creați un fișier nou în folderul "res / layout", cu numele "timeline.xml" ca nume de fișier. Deschideți noul fișier și adăugați următoarea schiță, pe care o vom extinde:
Vizualizarea este definită de un LinearLayout. În interiorul acestuia avem un TableLayout și un ListView. Vom adăuga elemente în tabelul următor. ListView va reține lista de tweet-uri de actualizare pentru a fi afișată în cronologia de acasă a utilizatorului. Lista va fi populate cu acele tweet-uri când se execută aplicația. Pentru moment, definim pur și simplu Vederea care le va ține.
Adăugați conținut în elementul TableLayout TableRow:
Aceasta creează un antet pentru cronologia de acasă. Textul "Acasă" este amplasat lângă o resursă trasabilă numită "acasă". Observați că secțiunea are, de asemenea, un fundal care este o altă resursă trasabilă numită "homebg".
Apoi, adăugați butonul tweet, încă în tabelul TableRow, dar după linia liniară pe care tocmai ați adăugat-o:
După cum puteți vedea, acesta este similar cu antetul Home, dar în acest caz View va funcționa ca un buton - LinearLayout are atributul său "clickable" setat la true. Butonul va include textul "Tweet" afișat lângă o imagine. Când utilizatorii fac clic pe acest buton, vor fi duși pe ecranul Tweet.
În momentul în care alegeți fila Grafica de aspect pentru linia temporală XML în Eclipse, nu veți vedea prea mult. Odată ce am creat fișierele de desen și fișierul de actualizare, acesta va arăta astfel:
Din moment ce conținutul liniei de cronologie este construit numai în timpul execuției, nu puteți vedea cu adevărat ce va arăta interfața până când veți putea rula aplicația.
Vom folosi un fișier de aspect pentru a modela o singură actualizare în cronologia de acasă. Creați un fișier nou în directorul dvs. de layout, numind-l "update.xml". Introduceți următoarea schiță:
Aspectul conține o secțiune pentru imaginea de profil a contului al cărui mesaj tweet este afișat, apoi o secțiune pentru conținutul tweet. În interiorul celui de-al doilea element LinearLayout vom adăuga conținutul tweet-ului și butoanele pentru repetarea / răspunsul. Începeți cu conținutul tweet:
Fiecare tweet include numele ecranului contului tweeting, ora la care a fost trimis tweet-ul și tweetul însuși. Fiecare TextView are un atribut ID, deoarece codul Java va mapa datele tweet-urilor primite la aceste Vizualizări atunci când se execută aplicația. Textul final, pentru textul tweet în sine, are setul de atribut "autoLink", astfel încât utilizatorii să poată face clic pe link-urile din tweet-uri. Ecranul de afișare a numelui de utilizator este, de asemenea, clicabil, astfel încât utilizatorii să poată naviga la pagina de profil a fiecărui cont în cronologie. Rețineți că aceste vizionări includ și referiri la resursele de culoare pe care nu le-am creat încă.
Acum, să adăugăm butoanele retweet și răspuns, după textul pe care tocmai l-am adăugat:
Fiecare tweet în cronologie va fi însoțit de aceste butoane, fiecare cu un text mic și un fundal. Iată un instantaneu al unei singure actualizări în aplicația finită.
Acum ne îndreptăm către celălalt ecran principal din aplicația noastră, ecranul Tweet. Creați un alt fișier nou în folderul Layout, numind-l "tweet.xml". Introduceți următoarea schiță:
Vom adăuga mai multe elemente după tabelul următor. Nu vă faceți griji că ați adăugat tot acest cod dintr-o dată - dacă îl comparați cu aspectul cronologiei de mai sus, veți vedea că este aproape identic. Secțiunea de sus, cu antetul Acasă și butonul Tweet, va apărea în mod similar atât în cronometrul de acasă, cât și în ecranele Tweet. În afară de unele mici diferențe cosmetice pentru a distinge cele două, principala diferență este că în ecranul Tweet, antetul Home funcționează ca un buton pentru a duce utilizatorul înapoi la cronologia lor de origine, în timp ce în layout-ul temporal, funcțiile Tweet View funcționează ca buton.
După TableLayout, adăugați următoarele:
Acesta este conținutul principal pentru ecranul Tweet. O cantitate mică de text informativ precede câmpul de text editabil pentru ca utilizatorul să introducă textul tweet, apoi avem un buton pentru ca aceștia să meargă înainte și să trimită tweet-ul. Odată ce creăm resursele noastre de tracțiune, în fila Grafica de aspect pentru aspectul tweet veți vedea ceva de genul:
Acum, să creăm elementele vizuale în interfața noastră, cele mai multe dintre care am menționat deja în resursele noastre de layout. Unele dintre desenele noastre pot fi definite în fișiere XML, iar altele vor fi create în afara aplicației, utilizând un program grafic sau un program de editare a imaginilor. Puteți schimba, desigur, oricare dintre elementele vizuale pe care le doriți, dar aș recomanda începând cu pașii descriși în acest tutorial, apoi să faceți schimbări odată ce ați înțeles modul în care diferitele ingrediente se raportează unul la altul.
Pentru această aplicație, folosim trei imagini create în afara Eclipse, pentru pictograma aplicației, cronologia de acasă și butonul tweet. Puteți crea propriile versiuni ale acestora dacă doriți sau nu vă deranjează deloc să utilizați imagini dacă preferați. Cronologia de acasă este un desen simplu, în timp ce butonul tweet și pictograma aplicației utilizează resursele oficiale Twitter, care includ și icoane retweet, răspuns și preferate.
 |  |  |
 |  |  |
 |  |  |
Când aveți gata de pregătire, copiați-le în folderul spațiului de lucru al aplicației, în "res / drawables- *". Eclipse ar fi trebuit să creeze trei dosare care pot fi desenate în spațiul de lucru al proiectului, pentru dispozitivele de joasă, medie și înaltă rezoluție. Imaginile trebuie salvate ca "ic_launcher" pentru pictogramele, "home" și "tweet" pentru butoane. Asigurați-vă că fiecare imagine este salvată cu același nume în fiecare folder, de ex. imaginea tweet poate fi numită "tweet.png" în toate cele trei dosare, deși imaginile din fiecare dosar sunt de fapt dimensiuni diferite, pentru a se potrivi diferitelor rezoluții.
Este posibil să trebuiască să instruiți Eclipse pentru a reîmprospăta spațiul de lucru înainte ca codul dvs. să poată face referire la imaginile noi cu succes. Pentru a face acest lucru, selectați proiectul din pachetul Explorer, faceți clic cu butonul din dreapta sau selectați Fișier, apoi Reîmprospătați.
În afară de negru, alb și gri, interfața aplicației utilizează în principal două culori, nuanțe de verde și albastru. Să le definim ca resurse de culoare. În Eclipse, creați un nou fișier în directorul "res / values" numit "colors.xml":
În fișierul de culori XML, introduceți următorul cod pentru a defini cele două culori principale din aplicație:
# FF006699 # FF009933 # 66006699 # 66009933
Acest cod indică două culori plus versiuni opace ale fiecăruia. Acum, dacă doriți să schimbați schema de culori pentru butoanele aplicației, o puteți face într-o singură locație.
În cele din urmă, să obținem mediile noastre create pentru a finaliza designul interfeței utilizator. Vom rula prin fiecare fișier drawable la rândul său, dar rețineți că trebuie să copiați fiecare în toate cele trei foldere desenate din directorul de resurse al aplicației.
Creați un fișier nou în folderul (ile) desenat (e) numit "homebg.xml" cu următorul conținut:
Aceasta definește o formă simplă, desenată, cu umplutură și umplutură cu gradient. Dacă vă uitați înapoi la codul de aspect XML al cronologiei, veți vedea acest sistem de tracțiune referitor la fundalul pentru un LinearLayout.
Creați un alt fișier nou numit "homebtnbg.xml" în desenele dvs. cu următorul conținut:
Acest fundal este folosit pentru butonul Acasă în ecranul Tweet. Apoi creați un fișier numit "profilebg.xml" cu următorul conținut:
De data aceasta definim colțurile rotunjite, precum și umplutura și umplutura de gradient. Acest fundal este pentru afișarea în spatele imaginilor de profil din linia temporală.
Ultimile două desenatoare sunt ușor mai complexe. Pentru butonul Tweet și butoanele din fiecare actualizare (pentru răspuns sau repetare) vom defini apariții diferite pentru stările de selecție, astfel încât butoanele să se schimbe în aparență atunci când utilizatorul le apasă. Creați un fișier numit "tweetbtnbg.xml" cu următorul conținut:
Acest cod definește două forme ușor diferite, unul pentru când este apăsat butonul. Singura diferență dintre ele este în culorile care sunt definite ca resursele de culoare pe care le-am creat. În cele din urmă, creați un fișier similar numit "updatebtnbg.xml" cu următorul conținut:
