Share
In questa serie stiamo costruendo un client Twitter per la piattaforma Android utilizzando la libreria Twitter4J. In questo tutorial prepareremo i nostri elementi dell'interfaccia utente per l'app e gestiremo la firma dell'utente su Twitter per consentire l'accesso al proprio account.
Prima di poter accedere all'account Twitter dell'utente, è necessario che accedano e concedano l'autorizzazione dell'app. Aprire la classe Attività principale per la propria applicazione, creandola ora se Eclipse non lo ha generato automaticamente all'avvio del progetto. Modificare la linea di apertura della dichiarazione di classe come segue e modificare il nome della classe per adattarla alla propria se necessario:
la classe pubblica TwitNiceActivity estende l'attività implementa OnClickListener
OnClickListener rileva vari clic del pulsante. Saranno necessarie le seguenti istruzioni di importazione aggiunte sopra la dichiarazione della classe, anche se Eclipse potrebbe aver aggiunto alcune automaticamente:
importare android.app.Activity; importare android.os.Bundle; import android.view.View.OnClickListener;
All'interno della classe, aggiungi le seguenti variabili di istanza:
/ ** chiave dell'account sviluppatore per questa app * / public static static String TWIT_KEY = "your key"; / ** segreto dello sviluppatore per l'app * / public static String statica TWIT_SECRET = "your secret"; / ** url dell'app * / stringa statica finale pubblica TWIT_URL = "tnice-android: ///";
Modifica le variabili Key e Secret per memorizzare i valori che hai copiato dal tuo account sviluppatore di Twitter l'ultima volta. Nota che l'URL è una versione estesa dell'elemento di dati che abbiamo aggiunto al Manifest, quindi assicurati di modificarlo se hai usato un valore diverso lì. Aggiungi le seguenti variabili di istanza aggiuntive per la connessione a Twitter:
/ ** Istanza di Twitter * / private Twitter niceTwitter; / ** richiesta token per accedere all'account utente * / private RequestToken niceRequestToken; / ** preferenze condivise per memorizzare i dettagli utente * / private SharedPreferences nicePrefs; // per la registrazione degli errori private String LOG_TAG = "TwitNiceActivity"; // altera per il nome della tua attività
Quando l'utente concede l'autorizzazione, aggiungeremo i dati risultanti alle preferenze condivise. Ogni volta che l'app viene eseguita, controllerà se questi dettagli sono stati impostati. Se è così, li userà per recuperare subito la sequenza temporale dell'utente. Se i dettagli non sono stati impostati, richiederà all'utente di accedere e concedere l'autorizzazione. Avrai bisogno delle seguenti dichiarazioni di importazione:
import twitter4j.Twitter; import twitter4j.auth.RequestToken; importare android.content.SharedPreferences;
Nel metodo Activity onCreate, dopo la chiamata al metodo superclasse, aggiungi il seguente codice:
Accentsconagua
// ottieni le preferenze per l'app nicePrefs = getSharedPreferences ("TwitNicePrefs", 0); // scopri se le preferenze dell'utente sono impostate se (nicePrefs.getString ("user_token", null) == null) // nessuna preferenza dell'utente in modo da richiedere di accedere a setContentView (R.layout.main); else // le preferenze dell'utente sono impostate - get timeline setupTimeline (); Qui otteniamo un riferimento all'oggetto Shared Preferences dell'applicazione per stabilire se l'utente ha già concesso o meno l'autorizzazione dell'app. La stringa di preferenze "user_token" memorizzerà il token di accesso che usiamo per accedere a Twitter, quindi se è già stato impostato, sappiamo che l'utente ha già effettuato l'accesso per l'app. Se le preferenze non sono state impostate, dobbiamo richiedere all'utente di accedere a Twitter, cosa che faremo nella dichiarazione "if" - per il momento impostiamo semplicemente la vista del contenuto principale.
Nel blocco "else" ci prendiamo cura degli utenti che hanno già effettuato l'accesso e hanno autorizzato l'app. Qui chiamiamo un metodo di supporto chiamato "setupTimeline" che implementeremo nel prossimo tutorial.
Creiamo il nostro layout principale, che abbiamo impostato nella dichiarazione "se". Normalmente Eclipse crea automaticamente un file in "res / layout / main.xml", altrimenti puoi crearlo da solo facendo clic con il pulsante destro del mouse sulla cartella di layout in Esplora pacchetti (o selezionandolo e selezionando il menu File), quindi scegliendo " Nuovo "e" File. " Apri il file di layout principale e inserisci il seguente codice XML:
Questo è un LinearLayout con due campi di testo e un pulsante. I campi di testo sono semplicemente informativi, mentre il pulsante porta l'utente alla pagina Web di accesso a Twitter. Il pulsante ha un attributo ID in modo che possiamo identificarlo nel codice Java.
Ora torniamo al nostro metodo onCreate per l'app principale Attività per implementare la firma negli utenti per la prima volta. Avrai bisogno della seguente importazione:
import android.util.Log;
All'interno del blocco "se", dopo la riga in cui impostiamo la vista del contenuto principale, aggiungere quanto segue:
// ottiene un'istanza di twitter per l'autenticazione niceTwitter = new TwitterFactory (). getInstance (); // passare la chiave sviluppatore e il segreto niceTwitter.setOAuthConsumer (TWIT_KEY, TWIT_SECRET);
Qui creiamo un'istanza della classe Twitter dalla libreria Twitter4J, che abbiamo già dichiarato come variabile di istanza. Questa classe è richiesta per praticamente tutto ciò che facciamo con Twitter. Per verificare le nostre credenziali, passiamo Key and Secret dall'interfaccia sviluppatore in cui è stata registrata l'app, per cui abbiamo creato costanti di classe. Successivamente dobbiamo ottenere un token di richiesta dall'oggetto Twitter in modo che possiamo tentare di autorizzare l'app per l'account dell'utente:
// tenta di ottenere il token di richiesta try // get token di richiesta di autenticazione niceRequestToken = niceTwitter.getOAuthRequestToken (TWIT_URL); catch (TwitterException te) Log.e (LOG_TAG, "TE" + te.getMessage ());
Stiamo tentando di creare un'istanza del token di richiesta per il quale abbiamo creato una variabile di istanza. Il metodo può generare un'eccezione, quindi lo circondiamo in un blocco try e generiamo un messaggio di errore nel log di Android se viene generata un'eccezione. Nota che il codice usa la costante "LOG_TAG" che abbiamo creato - puoi vedere i messaggi risultanti nel pannello Eclipse LogCat.
Per completare il blocco "if", configura un listener di clic per il pulsante di accesso incluso nel nostro file di layout "main.xml":
// pulsante di installazione per il listener di clic Button signIn = (Button) findViewById (R.id.signin); signIn.setOnClickListener (questo);
Il listener di clic per il pulsante è la classe Activity stessa, quindi ora è necessario implementare il metodo onClick in qualsiasi punto del file di classe:
/ ** * Fai clic su listener gestisce l'accesso e premi il pulsante tweet * / public void onClick (Visualizza v) // trova l'opzione di visualizzazione (v.getId ()) // accedi al pulsante premuto case R.id.signin: / / portare l'utente alla pagina Web di autenticazione di Twitter per consentire l'accesso all'app del proprio account Twitter String authURL = niceRequestToken.getAuthenticationURL (); startActivity (new Intent (Intent.ACTION_VIEW, Uri.parse (authURL))); rompere; // altri ascoltatori qui di default: break;
Il metodo utilizza un'istruzione switch per personalizzare ciò che accade a determinate pressioni di pulsante. Aggiungeremo una dichiarazione caso per un altro pulsante più tardi, ma per il momento tutto ciò di cui abbiamo bisogno è il processo di accesso. Il codice recupera l'URL di autenticazione dall'oggetto token di richiesta di Twitter, quindi apre la pagina nel browser Web.
Non preoccuparti troppo di come sono implementati questi metodi Twitter4J. Questo è semplicemente il processo che devi seguire se usi l'API. Non doversi preoccupare dei dettagli di implementazione della connessione a Twitter è uno dei principali vantaggi dell'utilizzo di una libreria esterna.
Dobbiamo gestire ciò che accadrà quando l'utente tornerà all'app dopo aver effettuato l'accesso a Twitter per autorizzarlo. Quando l'utente accede correttamente, Twitter li restituirà insieme ad alcuni dati per verificare e facilitare l'accesso dell'app al proprio account. Il metodo "onNewIntent" verrà attivato, quindi implementiamolo ora:
/ * * onNewIntent si attiva quando l'utente torna dalla pagina Web di autenticazione di Twitter * / @Override protected void onNewIntent (Intent intent) super.onNewIntent (intent); // ottiene i dati recuperati Uri twitURI = intent.getData (); // assicurati che l'URL sia corretto if (twitURI! = null && twitURI.toString (). startsWith (TWIT_URL)) // is verifcation - ottieni i dati restituiti String oaVerifier = twitURI.getQueryParameter ("oauth_verifier"); Il metodo recupera i dati di verifica da Twitter, che utilizzeremo in seguito per accedere ai tweet dell'utente. Pertanto, una volta completata la procedura di accesso, archiviamo i dati richiesti nell'applicazione Preferenze condivise. Sempre all'interno dell'istruzione "if", aggiungi quanto segue:
// tenta di recuperare il token di accesso try // prova ad ottenere un token di accesso usando i dati restituiti dalla pagina di verifica AccessToken accToken = niceTwitter.getOAuthAccessToken (niceRequestToken, oaVerifier); // aggiungi il token e il segreto alle prefs condivise per riferimento futuro nicePrefs.edit () .putString ("user_token", accToken.getToken ()) .putString ("user_secret", accToken.getTokenSecret ()) .commit (); // mostra la timeline setupTimeline (); catch (TwitterException te) Log.e (LOG_TAG, "Impossibile ottenere il token di accesso:" + te.getMessage ()); Questo è un altro metodo che può generare un'eccezione. Il codice all'interno del blocco try recupera il token di accesso da Twitter utilizzando i dati restituiti dalla pagina Web. Quindi utilizza l'oggetto Preferenze condivise per memorizzare il token e il segreto necessari per l'accesso a Twitter. Infine, il codice chiama il metodo per visualizzare la timeline, che non abbiamo ancora implementato.
Se si desidera testare la procedura di accesso solo ora, fornire il metodo "setupTimeline", includendo semplicemente un messaggio di output nel registro, ad esempio:
private void setupTimeline () Log.v (LOG_TAG, "impostazione della timeline");
Implementeremo il metodo completamente nei seguenti tutorial.
Ora che abbiamo gestito la firma degli utenti la prima volta che eseguono l'applicazione, possiamo passare all'interfaccia utente per l'app mentre viene eseguita successivamente. Utilizzeremo varie risorse nel design dell'interfaccia utente per questa app, inclusi drawable, colori e layout. I file XML di layout si riferiranno alle risorse disegnabili che creeremo nel passaggio successivo. Non preoccuparti se Eclipse ti avvisa di errori perché le risorse non sono ancora presenti. Quando si creano i file di layout, è sufficiente notare i riferimenti alle risorse che si devono ancora creare.
L'app utilizzerà quattro file di layout, uno dei quali ("main.xml") che abbiamo già creato per la schermata di accesso che appare solo alla prima esecuzione. Abbiamo anche bisogno di layout per definire l'aspetto della timeline principale, la schermata Tweet e ogni aggiornamento all'interno della timeline. In ogni file di layout, noterai che molti degli elementi hanno attributi ID. In questo modo possiamo fare riferimento a questi elementi all'interno del codice dell'applicazione Java, in particolare quando si gestisce l'interazione dell'utente.
Il layout della timeline sarà l'interfaccia principale che gli utenti vedranno quando avvieranno l'app, dopo averlo autorizzato. La linea temporale iniziale mostra l'elenco dei tweet recenti di quegli account che l'utente segue. Nella parte superiore dello schermo, l'utente vedrà un'intestazione e il pulsante Tweet, per passare alla schermata Tweet per inviare un tweet. Il contenuto di ogni aggiornamento nella timeline home verrà definito in un file di layout separato, ma nel layout della timeline ci occuperemo del contenitore per l'elenco di aggiornamenti nel suo complesso.
Crea un nuovo file nella cartella "res / layout", con "timeline.xml" come nome file. Apri il nuovo file e aggiungi il seguente schema, che estenderemo:
La vista è definita da un LinearLayout. All'interno di questo abbiamo un TableLayout e un ListView. Successivamente aggiungeremo elementi all'interno di TableRow. ListView manterrà l'elenco dei tweet di aggiornamento da visualizzare all'interno della timeline home dell'utente. L'elenco verrà popolato con quei tweet quando l'applicazione viene eseguita. Per il momento definiamo semplicemente la Vista che li manterrà.
Aggiungi contenuto all'interno dell'elemento TableLayout TableRow:
Questo crea un'intestazione per la timeline home. Il testo "Home" è disposto accanto a una risorsa drawable denominata "home". Si noti che la sezione ha anche uno sfondo che è un'altra risorsa drawable denominata "homebg".
Successivamente aggiungi il pulsante tweet, sempre all'interno del TableRow ma dopo LinearLayout hai appena aggiunto:
Come potete vedere, questo è simile all'intestazione Home, ma in questo caso la Vista funzionerà come un pulsante - LinearLayout ha l'attributo "cliccabile" impostato su true. Il pulsante includerà il testo "Tweet" visualizzato accanto a un'immagine. Quando gli utenti fanno clic su questo pulsante, verranno indirizzati alla schermata Tweet.
Nel momento in cui scegli la scheda Layout grafico per il tuo timeline XML in Eclipse, non vedrai molto. Una volta creati i drawable e il file di layout di aggiornamento, apparirà come segue:
Dal momento che il contenuto della timeline è costruito solo in fase di runtime, non puoi davvero vedere come sarà l'interfaccia fino a quando non sarai in grado di eseguire l'app.
Utilizzeremo un file di layout per modellare un singolo aggiornamento all'interno della timeline home. Crea un nuovo file nella tua directory di layout, nominandolo "update.xml". Inserisci il seguente schema:
Il layout contiene una sezione per l'immagine del profilo dell'account di cui viene visualizzato il tweet, quindi una sezione per il contenuto dei tweet. All'interno del secondo elemento LinearLayout aggiungeremo il contenuto dei tweet e i pulsanti per il retweet / risposta. Inizia con il contenuto dei tweet:
Ogni tweet include il nome dello schermo dell'account tweeting, il momento in cui è stato inviato il tweet e il tweet stesso. Ogni TextView ha un attributo ID, poiché il codice Java sta per mappare i dati tweet in arrivo a queste Viste quando l'app viene eseguita. Il TextView finale, per il testo tweet stesso, ha l'attributo "autoLink" impostato in modo che gli utenti possano fare clic sui collegamenti nei tweet. Anche la visualizzazione del nome della schermata utente è selezionabile, in modo che gli utenti possano navigare nella pagina del profilo di ciascun account nella loro timeline. Si noti che queste viste includono anche riferimenti a risorse di colore non ancora create.
Ora aggiungiamo i pulsanti retweet e reply, dopo il TextView che abbiamo appena aggiunto:
Questi tweet nella timeline saranno accompagnati da questi pulsanti, ognuno con un piccolo testo e uno sfondo. Ecco un'istantanea di un singolo aggiornamento nell'app finale.
Ora passiamo all'altra schermata principale nella nostra app, la schermata Tweet. Crea un altro nuovo file nella tua cartella Layout, nominandolo "tweet.xml". Inserisci il seguente schema:
Aggiungeremo più elementi dopo il TableLayout successivo. Non preoccuparti di aggiungere tutto questo codice contemporaneamente: se lo confronti con il layout della timeline sopra, vedrai che è quasi identico. La sezione superiore con l'intestazione Home e il pulsante Tweet apparirà allo stesso modo sia nella timeline home che nelle schermate Tweet. A parte alcune piccole differenze cosmetiche per distinguere le due, la principale differenza è che nella schermata Tweet, l'intestazione Home funziona come un pulsante per riportare l'utente alla timeline di casa, mentre nel layout della timeline, la vista Tweet funziona come pulsante.
Dopo il TableLayout, aggiungere quanto segue:
Questo è il contenuto principale per la schermata Tweet. Una piccola quantità di testo informativo precede il campo di testo modificabile per l'utente per inserire il loro testo tweet, quindi abbiamo un pulsante per loro per andare avanti e inviare il tweet. Una volta create le nostre risorse estraibili, nella scheda Layout grafico per il layout di tweet vedrai qualcosa di simile a questo:
Ora creiamo gli elementi visivi nella nostra interfaccia, la maggior parte dei quali abbiamo già fatto riferimento alle risorse del nostro layout. Alcuni dei nostri drawable saranno definiti in file XML e alcuni verranno creati al di fuori dell'applicazione, utilizzando un programma di progettazione grafica o di modifica delle immagini. Ovviamente puoi modificare gli elementi visivi che ti piacciono, ma ti consiglio di iniziare con i passaggi delineati in questo tutorial, quindi apportare le modifiche una volta compreso come i vari ingredienti sono correlati tra loro.
Per questa applicazione utilizziamo tre immagini create all'esterno di Eclipse, per l'icona dell'app, la timeline home e il pulsante tweet. Puoi creare le tue versioni personali di queste, se preferisci, o non preoccuparti di usare le immagini, se preferisci. La timeline home è un disegno semplice, mentre il pulsante tweet e l'icona dell'app utilizzano le risorse ufficiali di Twitter, che includono anche i retweet, le risposte e le icone preferite.
 |  |  |
 |  |  |
 |  |  |
Quando hai i tuoi drawables pronti, copiali nella cartella dell'area di lavoro dell'applicazione, in "res / drawables- *". Eclipse avrebbe dovuto creare tre cartelle drawable nello spazio di lavoro del progetto, per dispositivi a bassa, media e alta risoluzione. Le immagini devono essere salvate come "ic_launcher" per l'icona, "home" e "tweet" per i pulsanti. Assicurati che ogni immagine sia salvata con lo stesso nome in ogni cartella, ad es. l'immagine tweet potrebbe essere chiamata "tweet.png" in tutte e tre le cartelle, anche se le immagini in ogni cartella sono in realtà di dimensioni diverse, per adattarsi alle diverse risoluzioni.
Potrebbe essere necessario istruire Eclipse per aggiornare il proprio spazio di lavoro prima che il codice possa fare riferimento alle nuove immagini con successo. Per fare ciò, selezionare il progetto in Package Explorer, fare clic con il tasto destro del mouse o scegliere File, quindi Aggiorna.
A parte il nero, il bianco e il grigio, l'interfaccia dell'app utilizza principalmente due colori, il verde e il blu. Definiamoli come risorse di colore. In Eclipse, creare un nuovo file nella directory "res / values" denominata "colors.xml":
Nel file XML dei colori, inserisci il seguente codice per definire i due colori principali nell'app:
# FF006699 # FF009933 # 66006699 # 66009933
Questo codice indica due colori più versioni opache di ciascuno. Ora se vuoi cambiare lo schema dei colori per i pulsanti dell'applicazione, puoi farlo in una singola posizione.
Finalmente, creiamo i nostri sfondi creati per completare la progettazione dell'interfaccia utente. Eseguiremo a turno tutti i file disegnabili, ma ricorda che è necessario copiare tutti in tutte e tre le cartelle disegnabili nella directory delle risorse della tua app.
Crea un nuovo file nella / e cartella / e dei tuoi drawable denominata "homebg.xml" con il seguente contenuto:
Questo definisce una semplice forma estraibile con riempimento e sfumatura. Se guardi indietro al tuo codice di layout XML timeline, vedrai questo drawable indicato come sfondo per un LinearLayout.
Crea un altro nuovo file denominato "homebtnbg.xml" nei tuoi drawable con il seguente contenuto:
Questo sfondo viene utilizzato per il pulsante Home nella schermata Tweet. Quindi creare un file denominato "profilebg.xml" con il seguente contenuto:
Questa volta definiamo gli angoli arrotondati, nonché il riempimento e il riempimento sfumato. Questo sfondo è per la visualizzazione dietro le immagini del profilo nella timeline.
Gli ultimi due drawable sono leggermente più complessi. Per il pulsante Tweet e i pulsanti di ciascun aggiornamento (per rispondere o retwittare) definiremo aspetti diversi per gli stati di selezione in modo che i pulsanti cambino aspetto quando l'utente li preme. Crea un file chiamato "tweetbtnbg.xml" con il seguente contenuto:
Questo codice definisce due forme leggermente diverse, una per quando viene premuto il pulsante. L'unica differenza tra loro è nei colori, che sono definiti come le risorse di colore che abbiamo creato. Infine, crea un file simile denominato "updatebtnbg.xml" con il seguente contenuto:
