Create en YouTube-klient på Android
45
Del
4
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
Hva du skal lage
Det finnes en rekke populære tredjeparts YouTube klienter på Google Play, som Viral Popup og PlayTube, som klarer å tilby noen unike og ekstra funksjonalitet som offisielle YouTube-appen gjør det ikke. Hvis du ønsker å bygge en slik app selv, er denne opplæringen for deg.
I denne opplæringen, vi skaper vår egen YouTube-klient som ikke bare kan søke etter videoer på YouTube, men også spille dem. Gjør du det, vil vi lære å gjøre bruk av YouTube Android Player API og YouTube-data API klientbiblioteket for Java.
Forutsetninger
Sørg for at du har den nyeste Eclipse ADT Bundle satt opp. Du kan laste det ned på Android Developer nettstedet.
Du må også ha en utvikler nøkkel å bruke YouTube API. Følg trinnene på Googles YouTube Developer nettsted for å få en.
1. Opprett et nytt prosjekt
Fyr opp Eclipse og opprette en ny Android-applikasjon. Navn søknaden, SimplePlayer. Velg en unik pakke navn, og sette minstekravet SDK til Android 2.2 og målet SDK til Android 4.x (L Preview).
Vi kommer til å skape aktivitet oss så fjerner markeringen skape aktivitet og klikk Fullfør.
2. Legge Biblioteker
Trinn 1: Last ned biblioteker
Du trenger følgende biblioteker for dette prosjektet:
YouTube Android Player API: Dette biblioteket lar appen embed og kontrollere YouTube-videoer sømløst. I skrivende stund er den nyeste versjonen av dette biblioteket 1.0.0. Du kan laste det ned fra Google Developers nettsiden
YouTube data API v3 klientbiblioteket for Java. Dette biblioteket lar appen spørring informasjon om YouTube. Vi kommer til å bruke den til å muliggjøre vår app for å søke etter videoer på YouTube. Dette er også tilgjengelig på Google Developers nettsiden
Picasso. Dette biblioteket gjør det enkelt å hente og vise eksterne bilder. Vi kommer til å bruke den til å hente miniatyrer av YouTube-videoer. Den nyeste versjonen er for tiden 2.4.0, og du kan laste den ned direkte fra Maven repository
Trinn 2:. Legg Biblioteker
For å legge til YouTube Android Player API, pakk YouTubeAndroidPlayerApi- 1.0.0.zip og kopiere filen YouTubeAndroidPlayerApi.jar til libs mappe for prosjektet.
For å legge til YouTube-data API v3 biblioteket og dets avhengigheter, pakk google-API-tjenester-youtube-v3-rev124 -java-1.19.0.zip og kopiere følgende filer til libs mappen din project:
google-api-services-youtube-v3-rev124-1.19.0.jar
google-api-client-1.19.0.jar
google-oauth-client-1.19.0.jar
google-http-client-1.19.0.jar
jsr305-1.3.9.jar
google-http-client-jackson2-1.19.0.jar
jackson-core-2.1.3.jar
google-api-client-android-1.19.0.jar
google-http-client-android-1.19.0.jar
Finally, å legge til Picasso, kopiere Picasso-2.4.0.jar til libs mappe for prosjektet.
3. Redigere Manifest
Den eneste tillatelse vår app trenger er android.permission.INTERNET å få tilgang til YouTube-servere. Legg til følgende AndroidManifest.xml:
< bruker-tillatelse android: name = "android.permission.INTERNET" />
Vår app har to aktiviteter, en til å søke etter videoer og en til å spille dem. For å slippe å håndtere orienterings endringer i denne opplæringen, tvinger vi begge aktivitetene å bare bruke liggende modus. Erklærer aktivitetene i manifestet ved å legge til følgende kode i det:
< aktivitet android: ". SearchActivity" name = android: screenOrientation = "landskapet" > < intent-filter > < handling android: name = "android.intent.action.MAIN" /> < kategori android: name = "android.intent.category.LAUNCHER" /> < /intent-filter > < /aktivitets > < aktivitet android: name = "PlayerActivity." android: screenOrientation = "landskapet" />
4. Edit strings.xml
res /verdier /strings.xml filen inneholder strenger som vår app bruker. Oppdatere innholdet som vist nedenfor:
< resources > < string name = "APP_NAME" > SimplePlayer < /string > < string name = "søk" > Search < /string > < string name = "feilet" > Kunne ikke initial Youtube Player < /string > < /ressurser >
5. Lag Layout for SearchActivity
Trinn 1: Lag Layout
SearchActivity trenger følgende visninger:
EditText: å tillate brukeren å skrive i søkeordene
Listview: å vise søkeresultatene
LinearLayout: dette synet fungerer som den overordnede syn på de nevnte synspunkter
Opprett en ny fil med navnet layout /activity_search.xml og legge til følgende kode i det:?
< xml version = "1.0" encoding = "UTF-8" > < LinearLayout xmlns: android = "http: //schemas.android.com/apk/res/android "android: layout_width =" match_parent "android: layout_height =" match_parent "android: orientering =" vertikal "> < EditText android: layout_width = "match_parent" android: layout_height = "wrap_content" android: hint = "@ streng /søk" android: id = "+ id /search_input" android: Single = "true" /> < Listview android: id = "+ id /videos_found" android: layout_width = "match_parent" android: layout_height = "match_parent" android: dividerHeight = "5dp" /> < /LinearLayout >
Trinn 2: Layout Out Søkeresultater
Hver søkeresultat refererer til en video på YouTube, og vi trenger en layout for å vise informasjon om den videoen. Derfor hvert element av Listview må inneholde følgende visninger:
Imageview: å vise miniatyrbildet av video
TextView: å vise tittelen på videoen
TextView: å vise beskrivelsen av videoen
RelativeLayout: Denne visningen fungerer som den overordnede syn på de andre visningene
Lag en fil som heter layout /video_item XML og legge til følgende kode i det:?
< xml version = "1.0" encoding = "UTF-8" > < RelativeLayout xmlns:? android = "http://schemas.android.com/apk /res /android "android: layout_width =" match_parent "android: layout_height =" match_parent "android: padding =" 16dp "> < Imageview android: id = "+ id /video_thumbnail" android: layout_width = "128dp" android: layout_height = "128dp" android: layout_alignParentLeft = "true" android: layout_alignParentTop = "true" android: layout_marginRight = "20dp" /> < TextView android: id = "+ id /video_title" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_toRightOf = "+ id /video_thumbnail" android: layout_alignParentTop = "true" android: layout_marginTop = "5dp" android: Tekststørrelse = "25sp" android: textStyle = "fet" /> < TextView android: id = "+ id /video_description" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_toRightOf = "+ id /video_thumbnail" android: layout_below = "+ id /video_title" android: Tekststørrelse = "15sp" /> < /RelativeLayout >
6. Lag Layout for PlayerActivity
Trinn 1: Lag Layout
PlayerActivity trenger følgende visninger:
YouTubePlayerView: å spille YouTube-videoer
LinearLayout: dette synet er den overordnede syn på YouTubePlayerView
Opprett en ny fil med navnet layout /activity_player.xml og legge til følgende kode i det:?
< xml version = "1.0" encoding = "UTF-8" > < LinearLayout xmlns:? android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent "android: orientering =" vertikal "> < com.google.android.youtube.player.YouTubePlayerView android: id = "+ id /player_view" android: layout_width = "match_parent" android: layout_height = "wrap_content" /> < /LinearLayout >
7. Opprett VideoItem
Opprett en ny Java-klassen heter VideoItem.java. Vi bruker denne klassen til å lagre følgende informasjon om en YouTube-video:
YouTube ID
tittelen
beskrivelse
thumbnail URL Anmeldelser
Alle de ovennevnte er lagret som strenger. Etter å legge de kundeskaffere og settere for hver av dem, bør VideoItem.java filen har følgende innhold:
pakken com.hathi.simpleplayer; public class VideoItem {private String tittel; private String beskrivelse; private String thumbnailURL; private String id; public String getId () {return id; } Public void SETID (String id) {this.id = id; } Public String getTitle () {return tittel; } Public void setTitle (String tittel) {this.title = tittel; } Public String getDescription () {return beskrivelse; } Public void setDescription (String beskrivelse) {this.description = beskrivelse; } Public String getThumbnailURL () {return thumbnailURL; } Public void setThumbnailURL (String thumbnail) {this.thumbnailURL = thumbnail; }}
8. Lag en Helper Class
For å slippe å forholde seg til YouTube data API direkte i vår aktivitet, opprette en ny Java-klassen og gi den navnet YoutubeConnector.java. Denne klassen har følgende medlem variabler:
en forekomst av YouTube klassen som skal brukes for å kommunisere med YouTube API
en forekomst av YouTube.Search.List å representere en søket
YouTube API-nøkkel som en statisk String
Vi initial de ovennevnte variablene i konstruktøren. Initialisere forekomst av YouTube, har YouTube.Builder klassen som skal brukes. Klassene som vil være ansvarlig for nettverkstilkoblingen og JSON behandling sendes til byggherren.
Når initialisert, er dens søkemetode som brukes til å lage en søkeforespørsel. Listen metoden er så brukt til å nevne de detaljene vi ønsker i søkeresultatene. For denne opplæringen, vi kommer til å trenge en id og tekstutdrag for hvert søkeresultat. Fra disse, vi trekke følgende fields:
id/videoId
snippet/title
snippet/description
snippet/thumbnails/default/url
The utbyggers API-nøkkel må sendes med hvert søk. Den setKey metoden benyttes for dette formål. Vi bruker også setType metode for å begrense søkeresultatene til videoer bare. På dette punktet, bør klassen se omtrent slik ut:
pakken com.hathi.simpleplayer; public class YoutubeConnector {private YouTube youtube; private YouTube.Search.List søket; //Din utviklernøkkel går her public static endelige String key = "AIzaSQZZQWQQWMGziK9H_qRxz8g-V6eDL3QW_Us"; offentlig YoutubeConnector (Context kontekst) {youtube = new YouTube.Builder (ny NetHttpTransport (), ny JacksonFactory (), ny HttpRequestInitializer () {Override public void initialize (HttpRequest hr) kaster IOException {}}). setApplicationName (content.getString (R.string.app_name)) bygge (.); try {query = youtube.search () liste ("id, biten."); query.setKey (KEY); query.setType ("video"); query.setFields("items(id/videoId,snippet/title,snippet/description,snippet/thumbnails/default/url)"); } catch (IOException e) {Log.d ("YC", "Kunne ikke initialisere:" + e); }}}
Deretter oppretter vi en metode som heter søk for å utføre søk basert på brukerens søkeord. Denne metoden aksepterer søkeord som en String parameter. Spørringen variabel setQ metode brukes for å sette søkeordene.
Vi deretter kjøre spørringen ved hjelp av sin utføre metoden. Resultatene er tilbake i form av en SearchListResponse eksempel. Vi iterere gjennom resultatpostene og opprette en ny liste over VideoItem gjenstander, som vil være returverdien av denne metoden. Etter å legge passende feilbehandling, bør søkemetode se slik ut:
offentlig List < VideoItem > Søk (String nøkkelord) {query.setQ (nøkkelord); try {SearchListResponse respons = query.execute (); List < Søkeresultat > Resultater = response.getItems (); List < VideoItem > elementer = new Arraylist < VideoItem > (); for (Søkeresultat resultat: resultater) {VideoItem element = new VideoItem (); item.setTitle (result.getSnippet () getTitle ().); item.setDescription (result.getSnippet () getDescription ().); item.setThumbnailURL (result.getSnippet () getThumbnails () getDefault () getUrl ()...); item.setId (result.getId () getVideoId ().); items.add (element); } Returnere elementer; } catch (IOException e) {Log.d ("YC", "Kunne ikke søke:" + e); returnere null; }}
9. Opprett SearchActivity
Opprett en ny klasse som heter SearchActivity.java. Denne klassen har felt som representerer synspunktene vi nevnte i activity_search.xml. Det har også en Handler for å gjøre oppdateringer på brukergrensesnittet tråden.
I onCreate metoden, initial vi utsikten og legge en OnEditorActionListener til EditText å vite når brukeren er ferdig å skrive inn søkeord.
Offentlig klasse SearchActivity strekker Aktivitet {private EditText searchInput; private Listview videosFound; private Handler handler; Override Beskyttet void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_search); searchInput = (EditText) findViewById (R.id.search_input); videosFound = (Listview) findViewById (R.id.videos_found); handler = new Handler (); searchInput.setOnEditorActionListener (ny TextView.OnEditorActionListener () {Override public boolean onEditorAction (TextView v, int actionId, KeyEvent hendelse) {if (actionId == EditorInfo.IME_ACTION_DONE) {searchOnYoutube (v.getText () toString ()).; return false;} return true;}}); }}
Du må ha lagt merke kallet til searchOnYoutube metoden. La oss definere metoden nå. I denne metoden, skaper vi en ny tråd å klargjøre en YoutubeConnector forekomst og kjøre sin søkemetode. En ny tråd er nødvendig, fordi nettvirksomheten ikke kan utføres på hovedbrukergrensesnittet tråden. Hvis du glemmer å gjøre dette, vil du møte en runtime unntak. Når resultatene er tilgjengelige, er føreren brukes til å oppdatere brukergrensesnitt
privat List <. VideoItem > search; private void searchOnYoutube (endelig String nøkkelord) {new Thread () {public void run () {YoutubeConnector yc = new YoutubeConnector (SearchActivity.this); search = yc.search (søkeord); handler.post (ny kjørbart () {public void run () {updateVideosFound ();}}); }\t\t}.begynne(); }
I updateVideosFound metoden, genererer vi en ArrayAdapter og gi det videre til Listview for å vise søkeresultatene. I getView metode for adapteren, vi blåse opp video_item.xml layout og oppdatere sine synspunkter for å vise informasjon om søkeresultatet.
The Picasso bibliotekets belastning metoden brukes til å hente miniatyren av video og inn Metoden brukes til å gi det til Imageview
private void updateVideosFound () {ArrayAdapter. < VideoItem > adapter = new ArrayAdapter < VideoItem > (getApplicationContext (), R.layout.video_item, search) {Override offentlig Vis getView (int posisjon, Utsikt convertView, ViewGroup forelder) {if (convertView == null) {convertView = getLayoutInflater () .inflate (R.layout.video_item, foreldre, false); } Imageview thumbnail = (Imageview) convertView.findViewById (R.id.video_thumbnail); TextView title = (TextView) convertView.findViewById (R.id.video_title); TextView description = (TextView) convertView.findViewById (R.id.video_description); VideoItem Søkeresultat = searchResults.get (stilling); . Picasso.with (getApplicationContext ()) belastning (searchResult.getThumbnailURL ()) inn i (thumbnail).; title.setText (searchResult.getTitle ()); description.setText (searchResult.getDescription ()); returnere convertView; }}; videosFound.setAdapter (adapter);}
Til slutt trenger vi en metode som setter OnItemClickListener av Listview, slik at brukeren kan klikke på et søkeresultat og se på tilsvarende video. La oss kalle denne metoden addClickListener og kaller det på slutten av onCreate metoden.
Når et element i listen er tappet, skaper vi en ny intensjonsavtale for PlayerActivity og passere i ID av videoen. Når Intent blir opprettet, blir den startActivity metode som brukes for å starte PlayerActivity
private void addClickListener () {videosFound.setOnItemClickListener (ny AdapterView.OnItemClickListener () {Override public void onItemClick (AdapterView. ≪? ≫ av, Utsikt v, int pos, lang id) {Intent hensikt = new Intent (getApplicationContext (), PlayerActivity.class); intent.putExtra ("VIDEO_ID", searchResults.get (pos) .getId ()); startActivity (forsett);} });}
10. Opprett PlayerActivity
Opprett en ny Java-klasse som heter PlayerActivity.java som arver fra YouTubeBaseActivity. Dette er viktig, fordi bare underklasser av YouTubeBaseActivity kan benytte seg av YouTubePlayerView.
Denne klassen har et enkelt medlem variabel som representerer YouTubePlayerView vi nevnte i activity_player.xml layout filen. Dette er initialisert i onCreate metoden ved å påberope seg initialize metoden i YouTubePlayerView klassen, passerer utvikleren API-nøkkel.
Deretter må implementere OnInitializedListener grensesnittet for å vite når initialisering er fullført klassen vår. Grensesnittet har to metoder, som heter onInitializationFailure og onInitializationSuccess.
I tilfelle av suksess, cueVideo metoden er brukt for å vise YouTube-video. I tilfelle svikt, er en Toast vist som forteller brukeren at det mislyktes
Dette er hva PlayerActivity klassen skal se ut.
Public class PlayerActivity strekker YouTubeBaseActivity implementerer OnInitializedListener {private YouTubePlayerView playerView; Override Beskyttet void onCreate (Bundle bundle) {super.onCreate (bundle); setContentView (R.layout.activity_player); playerView = (YouTubePlayerView) findViewById (R.id.player_view); playerView.initialize (YoutubeConnector.KEY, dette); }Override Public void onInitializationFailure (Provider leverandør, YouTubeInitializationResult resultat) {Toast.makeText (dette, getString (R.string.failed), Toast.LENGTH_LONG) .vis (); }Override Public void onInitializationSuccess (Provider leverandør, YouTubePlayer spiller, boolsk restaurert) {if (restaurert!) {Player.cueVideo (getIntent () getStringExtra ("VIDEO_ID").); }}}
11. Kompilere og kjøre
Vår YouTube-klient er nå klar til å bli deployert til en Android-enhet. Nesten alle populære Android-enheter har det installert, men sørg for at YouTube-appen er installert-og oppdatert-på enheten, fordi vår app avhenger av det.
Når utplassert, bør du være i stand til å skrive inn en spørring for å søke etter videoer på YouTube, og klikk deretter på et resultat for å begynne å spille den tilsvarende video.
Konklusjon
Du vet nå hvordan å legge ned YouTube-videoer i Android app. Du har også lært hvordan du bruker Google API-klient biblioteket og samhandle med YouTube. Android Player API gir en rekke metoder for å kontrollere avspilling av videoer, og du kan bruke dem til å komme opp med svært kreative apps. Se fullstendig guide for å lære mer om API.