Share
In deze serie bouwen we een Twitter-client voor het Android-platform met behulp van de Twitter4J-bibliotheek. In deze zelfstudie maken we onze gebruikersinterface-elementen voor de app en verwerken we de ondertekening van de gebruiker in Twitter om toegang tot zijn account mogelijk te maken.
Voordat we toegang hebben tot het Twitter-account van de gebruiker, hebben we ze nodig om in te loggen en de app toestemming te geven. Open de hoofdactiviteitsklasse voor uw toepassing en maak deze nu als Eclipse het niet automatisch heeft gegenereerd toen u het project startte. Wijzig de openingszin van uw klassenverklaring als volgt en wijzig de naam van de klasse indien nodig:
public class TwitNiceActivity breidt Activiteit uit OnClickListener
De OnClickListener detecteert verschillende klikken op knoppen. U hebt de volgende importinstructies nodig die boven uw klasseverklaring zijn toegevoegd, hoewel Eclipse er misschien enkele automatisch aan heeft toegevoegd:
import android.app.Activity; import android.os.Bundle; import android.view.View.OnClickListener;
Voeg in de klasse de volgende instantievariabelen toe:
/ ** ontwikkelaarsaccountsleutel voor deze app * / openbare definitieve statische reeks TWIT_KEY = "uw sleutel"; / ** ontwikkelaarsgeheim voor de app * / openbare definitieve statische reeks TWIT_SECRET = "uw geheim"; / ** app url * / public final statisch String TWIT_URL = "tnice-android: ///";
Wijzig de sleutel- en geheime variabelen om de waarden die u de vorige keer uit uw Twitter-ontwikkelaarsaccount hebt gekopieerd op te slaan. Merk op dat de URL een uitgebreide versie is van het data-element dat we hebben toegevoegd aan het manifest, dus zorg ervoor dat je het wijzigt als je daar een andere waarde gebruikt. Voeg de volgende aanvullende instantievariabelen toe om verbinding te maken met Twitter:
/ ** Twitter-instantie * / privé Twitter niceTwitter; / ** token aanvragen voor toegang tot gebruikersaccount * / private RequestToken niceRequestToken; / ** gedeelde voorkeuren om gebruikersgegevens op te slaan * / private SharedPreferences nicePrefs; // voor foutregistratie private String LOG_TAG = "TwitNiceActivity"; // wijzigen voor uw activiteitsnaam
Wanneer de gebruiker toestemming verleent, zullen we de resulterende gegevens toevoegen aan de Gemeenschappelijke voorkeuren. Telkens wanneer de app wordt uitgevoerd, controleert deze of deze gegevens zijn ingesteld. Als dit het geval is, worden deze gebruikt om de tijdlijn van de gebruiker meteen op te halen. Als de details niet zijn ingesteld, wordt de gebruiker gevraagd zich aan te melden en toestemming te verlenen. U hebt de volgende importinstructies nodig:
import twitter4j.Twitter; import twitter4j.auth.RequestToken; importeer android.content.SharedPreferences;
Voeg in de methode Activity onCreate na de aanroep van de superklasmethode de volgende code toe:
Accentsconagua
// ontvang de voorkeuren voor de app nicePrefs = getSharedPreferences ("TwitNicePrefs", 0); Zoek uit of de gebruikersvoorkeuren zijn ingesteld if (nicePrefs.getString ("user_token", null) == null) // geen gebruikersvoorkeuren dus prompt om in te loggen setContentView (R.layout.main); else // gebruikersvoorkeuren zijn ingesteld - kies tijdlijn setupTimeline (); Hier krijgen we een verwijzing naar het object Shared Preferences om te bepalen of de gebruiker de app al toestemming heeft verleend of niet. De voorkeurenreeks "user_token" gaat het toegangstoken opslaan dat we gebruiken voor toegang tot Twitter, dus als het al is ingesteld, weten we dat de gebruiker zich eerder heeft aangemeld voor de app. Als de voorkeuren niet zijn ingesteld, moeten we de gebruiker vragen om in te loggen op Twitter, wat we zullen doen in de "als" -instructie - voor het moment stellen we eenvoudigweg de hoofdinhoudweergave in.
In het blok "else" zorgen we voor gebruikers die zich al hebben aangemeld en de app hebben geautoriseerd. Hier noemen we een helper-methode genaamd "setupTimeline" die we in de volgende tutorial zullen implementeren.
Laten we onze hoofdlay-out maken, die we hebben ingesteld in de "als" -instructie. Normaal maakt Eclipse automatisch een bestand bij "res / layout / main.xml", als dat niet het geval is, kunt u het zelf maken door met de rechtermuisknop op de lay-outmap in Package Explorer te klikken (of het te selecteren en vervolgens het menu Bestand te kiezen) en vervolgens " Nieuw "en" bestand. " Open het hoofdlay-outbestand en voer de volgende XML-code in:
Dit is een LinearLayout met twee tekstvelden en een knop. De tekstvelden zijn eenvoudig informatief, terwijl de knop de gebruiker naar de Twitter-inlogpagina leidt. De knop heeft een ID-kenmerk, zodat we deze in de Java-code kunnen identificeren.
Nu terug naar onze onCreate-methode voor de belangrijkste app-activiteit om ondertekening bij nieuwe gebruikers te implementeren. U heeft de volgende import nodig:
import android.util.Log;
Voer in het 'als'-blok, na de regel waarin we de weergave van de hoofdinhoud instellen, het volgende:
// krijg een twitter-instantie voor authenticatie niceTwitter = new TwitterFactory (). getInstance (); // ontwikkelaarssleutel en geheime niceTwitter.setOAuthConsumer doorgeven (TWIT_KEY, TWIT_SECRET);
Hier maken we een instantie van de Twitter-klasse uit de Twitter4J-bibliotheek, die we al hebben verklaard als een instantievariabele. Deze les is vereist voor vrijwel alles wat we doen met Twitter. Om onze inloggegevens te verifiëren, geven we de sleutel en het geheim door van de ontwikkelaarinterface waar de app is geregistreerd, voor beide waarvoor we klassenconstanten hebben gemaakt. Vervolgens moeten we een verzoekcode van het Twitter-object ontvangen, zodat we kunnen proberen de app voor het account van de gebruiker te autoriseren:
// probeer request token te krijgen probeer // ontvang token voor authenticatie aanvragen niceRequestToken = niceTwitter.getOAuthRequestToken (TWIT_URL); catch (TwitterException te) Log.e (LOG_TAG, "TE" + te.getMessage ());
We proberen hier de aanvraagtoken te maken waarvoor we een instantievariabele hebben gemaakt. De methode kan een uitzondering genereren, dus we omringen het in een try-blok en voeren een foutmelding uit naar het Android-logboek als de uitzondering wordt gegenereerd. Merk op dat de code de "LOG_TAG" constante gebruikt die we hebben gemaakt - je kunt de resulterende berichten zien in het Eclipse LogCat paneel.
Om het "als" -blok af te maken, stelt u een kliklistener in voor de inlogknop die we hebben opgenomen in ons lay-outbestand "main.xml":
// setup-knop voor klik luisteraar Knop signIn = (Knop) findViewById (R.id.signin); signIn.setOnClickListener (deze);
De kliklistener voor de knop is de klasse Activity zelf, dus we moeten de onClick-methode nu overal in het klassenbestand implementeren:
/ ** * Click listener verwerkt inloggen en tweet drukken op de knop * / public void onClick (View v) // find view switch (v.getId ()) // teken in knop ingedrukt case R.id.signin: / / neem gebruiker mee naar twitter-authenticatiewebpagina om app-toegang tot zijn Twitter-account mogelijk te maken String authURL = niceRequestToken.getAuthenticationURL (); startActivity (nieuwe Intent (Intent.ACTION_VIEW, Uri.parse (authURL))); breken; // andere luisteraars hier standaard: pauze;
De methode maakt gebruik van een switchinstructie om aan te geven wat er gebeurt met bepaalde knopbedieningen. We zullen later een casestudy toevoegen voor een andere knop, maar voorlopig hebben we alleen nog maar het aanmeldingsproces nodig. De code haalt de authenticatie-URL op uit het tokenobject van de Twitter-aanvraag en opent vervolgens de pagina in de webbrowser.
Maak je geen zorgen te veel over hoe deze Twitter4J-methoden worden geïmplementeerd. Dit is gewoon het proces dat u moet volgen als u de API gebruikt. Als u zich geen zorgen hoeft te maken over de implementatiedetails van verbinding maken met Twitter, is dit een van de belangrijkste voordelen van het gebruik van een externe bibliotheek.
We moeten afhandelen wat er zal gebeuren wanneer de gebruiker wordt teruggestuurd naar de app nadat hij zich bij Twitter heeft aangemeld om het te autoriseren. Wanneer de gebruiker zich succesvol aanmeldt, retourneert Twitter deze samen met enkele gegevens om de toegang van de app tot zijn account te verifiëren en te vergemakkelijken. De methode "onNewIntent" wordt geactiveerd, dus laten we het nu implementeren:
/ * * onNewIntent ontsteekt wanneer gebruiker terugkeert van Twitter-authenticatie Webpagina * / @Override protected void onNewIntent (Intent opzet) super.onNewIntent (intent); // haal de opgehaalde gegevens op Uri twitURI = intent.getData (); // zorg ervoor dat de url correct is als (twitURI! = null && twitURI.toString (). startsWith (TWIT_URL)) // is verificatie - haal de geretourneerde gegevens op String oaVerifier = twitURI.getQueryParameter ("oauth_verifier"); De methode haalt de verificatiegegevens op van Twitter, die we later zullen gebruiken om toegang te krijgen tot de tweets van de gebruiker. Om het inlogproces slechts één keer uit te voeren, slaan we de vereiste gegevens op in de toepassing Gedeelde voorkeuren. Zit nog in de "als" -instructie, voeg het volgende toe:
// probeer toegangstoken te achterhalen probeer // probeer een toegangstoken te krijgen met de geretourneerde gegevens van de verificatiepagina AccessToken accToken = niceTwitter.getOAuthAccessToken (niceRequestToken, including Verifier); // voeg het token en geheim toe aan gedeelde prefs voor toekomstige referentie nicePrefs.edit () .putString ("user_token", accToken.getToken ()) .putString ("user_secret", accToken.getTokenSecret ()) .commit (); // toon de tijdlijn setupTimeline (); catch (TwitterException te) Log.e (LOG_TAG, "Toegangstoken mislukt:" + te.getMessage ()); Dit is een andere methode die ervoor kan zorgen dat er een uitzondering wordt gegenereerd. De code in het try-blok haalt eerst het toegangstoken van Twitter op met behulp van de gegevens die van de webpagina worden teruggestuurd. Vervolgens wordt het object Shared Preferences gebruikt om het token en geheim op te slaan dat nodig is voor Twitter-toegang. Ten slotte roept de code de methode op om de tijdlijn weer te geven, die we nog niet hebben geïmplementeerd.
Als u het aanmelden zo nu en dan wilt testen, geeft u de "setupTimeline" -methode op, waarbij u eenvoudig een berichtuitvoer naar het logboek toevoegt, bijvoorbeeld:
private void setupTimeline () Log.v (LOG_TAG, "tijdlijn instellen");
We zullen de methode volledig implementeren in de volgende tutorials.
Nu we de ondertekening van gebruikers hebben voltooid in de eerste keer dat ze de toepassing uitvoeren, kunnen we ons wenden tot de gebruikersinterface voor de app terwijl deze vervolgens wordt uitgevoerd. We zullen verschillende bronnen gebruiken in het ontwerp van de gebruikersinterface voor deze app, inclusief tekeningen, kleuren en lay-outs. De lay-out XML-bestanden verwijzen naar bruikbare bronnen die we in de volgende stap zullen maken. Maak je geen zorgen als Eclipse je op fouten wijst omdat de middelen nog niet aanwezig zijn. Wanneer u de lay-outbestanden maakt, ziet u eenvoudig de verwijzingen naar bronnen die u nog moet maken.
De app gaat vier lay-outbestanden gebruiken, waarvan er een ("main.xml") is die we al hebben gemaakt voor het inlogscherm dat alleen verschijnt bij de eerste keer uitvoeren. We hebben ook lay-outs nodig om het uiterlijk van de hoofdtijdlijn, het tweetscherm en elke update binnen de tijdlijn te definiëren. In elk lay-outbestand zult u merken dat veel van de elementen ID-kenmerken hebben. Dit is zodat we kunnen verwijzen naar deze elementen binnen de Java-applicatiecode, in het bijzonder bij het omgaan met gebruikersinteractie.
De lay-out van de tijdlijn zal de belangrijkste interface zijn die gebruikers zien wanneer ze de app starten, nadat ze deze hebben geautoriseerd. De thuislijn toont de lijst met recente tweets van de accounts die de gebruiker volgt. Bovenaan het scherm ziet de gebruiker een koptekst en de tweetknop om naar het Tweet-scherm over te schakelen om een tweet te verzenden. De inhoud van elke update in de starttijdlijn wordt in een afzonderlijk lay-outbestand gedefinieerd, maar in de tijdlijnlay-out zorgen we voor de container voor de lijst met updates als geheel.
Maak een nieuw bestand in de map "res / layout", met "timeline.xml" als de bestandsnaam. Open het nieuwe bestand en voeg het volgende overzicht toe, dat we zullen uitbreiden:
De weergave wordt bepaald door een LinearLayout. Hierbinnen hebben we een TableLayout en een ListView. We zullen elementen toevoegen in de volgende tabelrij. De ListView zal de lijst met update-tweets bevatten om weer te geven in de home-tijdlijn van de gebruiker. De lijst wordt gevuld met die tweets wanneer de toepassing wordt uitgevoerd. Voorlopig definiëren we gewoon de weergave die ze vasthoudt.
Voeg inhoud toe in het TableLayout TableRow-element:
Hiermee maakt u een koptekst voor de starttijdlijn. De tekst "Home" is naast een uitrekbare bron met de naam "thuis" opgemaakt. Merk op dat de sectie ook een achtergrond heeft die een andere tekenbare bron is met de naam "homebg".
Voeg vervolgens de tweet-knop toe, nog steeds binnen de TableRow, maar na de LinearLayout die u zojuist hebt toegevoegd:
Zoals u kunt zien, is dit vergelijkbaar met de beginkop, maar in dit geval functioneert de weergave als een knop - de LinearLayout heeft zijn "klikbare" attribuut ingesteld op waar. De knop bevat de tekst 'Tweet' die naast een afbeelding wordt weergegeven. Wanneer gebruikers op deze knop klikken, worden ze naar het tweetscherm geleid.
Op het moment dat u het tabblad Grafische indeling voor uw tijdlijn-XML in Eclipse kiest, ziet u niet veel. Zodra we de drawables en het updatebestand hebben gemaakt, ziet het er als volgt uit:
Aangezien de inhoud van de tijdlijn alleen tijdens runtime is gebouwd, kun je niet echt zien hoe de interface eruit zal zien totdat je de app kunt uitvoeren..
We gaan een lay-outbestand gebruiken om een enkele update te modelleren binnen de thuislijn. Maak een nieuw bestand in uw lay-outmap en noem het "update.xml". Voer de volgende schets in:
De lay-out bevat een sectie voor de profielafbeelding van het account waarvan de tweet wordt weergegeven en vervolgens een gedeelte voor de inhoud van de tweet. Binnen het tweede LinearLayout-element voegen we de inhoud van de tweet en de knoppen voor retweeten / antwoorden toe. Begin met de inhoud van de tweet:
Elke tweet bevat de schermnaam van het Twitter-account, het tijdstip waarop de tweet is verzonden en de tweet zelf. Elke TextView heeft een ID-kenmerk, omdat de Java-code de inkomende tweet-gegevens aan deze weergaven zal toewijzen wanneer de app wordt uitgevoerd. De laatste TextView, voor de tweet-tekst zelf, heeft het kenmerk "autoLink" zodat gebruikers op links in de tweets kunnen klikken. De gebruikersweergave voor het gebruikersscherm is ook aanklikbaar, zodat gebruikers kunnen bladeren naar de profielpagina van elk account in hun tijdlijn. Merk op dat deze Views ook referenties bevatten naar kleurresources die we nog niet hebben gemaakt.
Laten we nu de retweet- en reply-knoppen toevoegen, na de TextView die we zojuist hebben toegevoegd:
Elke tweet in de tijdlijn gaat worden vergezeld door deze knoppen, elk met een beetje tekst en een achtergrond. Hier is een momentopname van een enkele update in de voltooide app.
Nu gaan we naar het andere hoofdscherm in onze app, het Tweet-scherm. Maak nog een nieuw bestand in je map Lay-out en noem het "tweet.xml". Voer de volgende schets in:
We zullen meer elementen toevoegen na de volgende tabellay-out. Maak je geen zorgen over het in één keer toevoegen van al deze code. Als je het vergelijkt met de tijdlijnlayout hierboven, zie je dat het bijna identiek is. Het bovenste gedeelte met de koptekst Start en de knop Tweet verschijnen op dezelfde manier in zowel de starttijdlijn- als de Tweet-schermen. Afgezien van enkele kleine cosmetische verschillen om de twee te onderscheiden, is het belangrijkste verschil dat in het Tweet-scherm de Home-koptekst fungeert als een knop om de gebruiker terug te brengen naar zijn eigen tijdlijn, terwijl in de tijdlijnlay-out de Tweet View functioneert als een knop.
Voeg na de TableLayout het volgende toe:
Dit is de belangrijkste inhoud voor het Tweet-scherm. Een kleine hoeveelheid informatieve tekst gaat vooraf aan het bewerkbare tekstveld voor de gebruiker om zijn tweet-tekst in te voeren, dan hebben we een knop om door te gaan en de tweet te verzenden. Zodra we onze trekbare bronnen hebben gemaakt, ziet u op het tabblad Grafisch lay-out voor de tweetlay-out zoiets als dit:
Laten we nu de visuele elementen in onze interface maken, waarvan we de meeste al hebben aangeduid in onze lay-outbronnen. Sommige van onze tekeningen worden in XML-bestanden gedefinieerd en sommige worden buiten de toepassing gemaakt met behulp van een grafisch ontwerp of beeldbewerkingsprogramma. Je kunt natuurlijk alle visuele elementen wijzigen die je leuk vindt, maar ik zou aanraden om te beginnen met de stappen die in deze tutorial worden beschreven, en vervolgens wijzigingen aan te brengen zodra je begrijpt hoe de verschillende ingrediënten op elkaar betrekking hebben.
Voor deze toepassing gebruiken we drie afbeeldingen die buiten Eclipse zijn gemaakt, voor het app-pictogram, de starttijdlijn en de tweet-knop. U kunt desgewenst uw eigen versies hiervan maken of helemaal geen moeite doen om afbeeldingen te gebruiken. De starttijdlijn is een eenvoudige tekening, terwijl de tweetknop en het app-pictogram de officiële Twitter-bronnen gebruiken, die ook retweet-, antwoord- en favoriete pictogrammen bevatten.
 |  |  |
 |  |  |
 |  |  |
Wanneer u uw drawables gereed hebt, kopieert u ze naar de map met uw toepassingswerkruimte in "res / drawables- *". Eclipse had drie mappen met tekeningen moeten maken in uw projectwerkruimte, voor apparaten met een lage, gemiddelde en hoge resolutie. De afbeeldingen moeten worden opgeslagen als "ic_launcher" voor het pictogram, "home" en "tweet" voor de knoppen. Zorg ervoor dat elke afbeelding met dezelfde naam in elke map wordt opgeslagen, bijvoorbeeld de tweet-afbeelding zou in alle drie de mappen "tweet.png" kunnen heten, hoewel de afbeeldingen in elke map eigenlijk verschillende grootten hebben, om te voldoen aan de verschillende resoluties.
Mogelijk moet u Eclipse opdracht geven uw werkruimte te vernieuwen voordat uw code met succes naar de nieuwe afbeeldingen kan verwijzen. Hiertoe selecteert u het project in Package Explorer, klikt u er met de rechtermuisknop op of kiest u Bestand en vervolgens Vernieuwen.
Anders dan zwart, wit en grijs, gebruikt de app-interface hoofdzakelijk twee kleuren, tinten groen en blauw. Laten we deze definiëren als kleurresources. Maak in Eclipse een nieuw bestand in de map "res / values" met de naam "colors.xml":
Voer in het XML-kleurenbestand de volgende code in om de twee hoofdkleuren in de app te definiëren:
# FF006699 # FF009933 # 66006699 # 66009933
Deze code geeft twee kleuren plus dekkende versies van elk weer. Als u nu het kleurenschema voor de applicatieknoppen wilt wijzigen, kunt u dit op één locatie doen.
Laten we ten slotte onze achtergronden laten maken om het ontwerp van de gebruikersinterface te voltooien. We zullen om beurten elk tekenbaar bestand doornemen, maar vergeet niet dat je elk bestand moet kopiëren naar alle drie de mappen die kunnen worden getekend in de bronnenmap van je app..
Maak een nieuw bestand in je mappen map "homebg.xml" met de volgende inhoud:
Dit definieert een eenvoudig te tekenen vorm met opvulling en een verloopvulling. Als u terugkijkt op de XML-layoutcode van uw tijdlijn, ziet u dit tekenbaar aangeduid als de achtergrond voor een LinearLayout.
Maak een nieuw bestand met de naam "homebtnbg.xml" in uw drawables met de volgende inhoud:
Deze achtergrond wordt gebruikt voor de Home-knop in het Tweet-scherm. Maak vervolgens een bestand met de naam "profilebg.xml" met de volgende inhoud:
Deze keer definiëren we afgeronde hoeken en opvulling en verloopvulling. Deze achtergrond is voor weergave achter de profielafbeeldingen in de tijdlijn.
De laatste twee drawables zijn iets complexer. Voor de Tweet-knop en de knoppen in elke update (voor beantwoorden of retweeten) gaan we verschillende verschijningen definiëren voor selectietoestanden, zodat de knoppen van uiterlijk veranderen wanneer de gebruiker ze indrukt. Maak een bestand met de naam "tweetbtnbg.xml" met de volgende inhoud:
Deze code definieert twee enigszins verschillende vormen, één voor wanneer de knop wordt ingedrukt. Het enige verschil tussen beide is de kleuren, die worden gedefinieerd als de kleurresources die we hebben gemaakt. Maak tot slot een soortgelijk bestand met de naam "updatebtnbg.xml" met de volgende inhoud:
