Hvis du utvikler en Android-app med flere skjermer, er en stor navigasjonsalternativ faner. Tabs er spesielt nyttig hvis skjermene er alle på en lignende hierarki, for eksempel å gi forskjellige visninger av lignende informasjon. Hvis du har en veldig hierarkisk struktur, kan faner gjøre mindre logisk sans, og du kanskje foretrekke å klikke dypere inn i aktiviteten.
Siden Android 3.0, er den foretrukne måten å gjøre dette ved hjelp Fragments lenker. Fragmenter tillater deg å bryte dine aktiviteter opp i modulære brikker, slik at du kan kombinere og bruke flere fragmenter i flere aktiviteter. Du kan tenke på en fragment som en slags sub aktivitet, klarte delvis av hovedaktiviteten. Vi vil ikke gå inn å bruke Fragments i detalj her, men vi vil se på å bruke dem til å sette opp en enkel tabbed app.
App og oppsett layout
Opprett et nytt prosjekt, TabTest, i Eclipse, husker at det må være rettet mot Android 3.0 eller høyere. . (. Jeg brukte 4.0.3) Kontroller at du bruker "med Handling Bar" tema
Vår hovedaktivitet, TabTestActivity, setter opp ActionBar:
public class TabTestActivity strekker Aktivitet {ActionBar .tab- Fane1, Fane2, tab3; Fragment fragmentTab1 = new FragmentTab1 (); Fragment fragmentTab2 = new FragmentTab2 (); Fragment fragmentTab3 = new FragmentTab3 (); beskyttet void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_tab_test); ActionBar actionBar = getActionBar (); actionBar.setNavigationMode (ActionBar.NAVIGATION_MODE_TABS); Fane1 = actionBar.newTab () setText ("1").; Fane2 = actionBar.newTab () setText ("2").; tab3 = actionBar.newTab () setText ("3").; tab1.setTabListener (ny MyTabListener (fragmentTab1)); tab2.setTabListener (ny MyTabListener (fragmentTab2)); tab3.setTabListener (ny MyTabListener (fragmentTab3)); actionBar.addTab (Fane1); actionBar.addTab (Fane2); actionBar.addTab hverandre (tab 3); } ActionBar.Tab er, som du forventer, en fane i handlingsfeltet, og skaper vi tre av dem. Vi skaper også tre Fragments å holde innholdet i våre tre kategoriene. Vi skal skape de FragmentTab underklasser i et øyeblikk.
Vi setter opp oppsettet som vanlig (se senere avsnitt for XML), ta tak i ActionBar, og sette navigasjonsmodus til faner. De andre navigasjonsmodi er List, som gir en menylisten, og Standard (bare har en "hjem" logo og tittel tekst). Vi deretter opprette tre nye faner i ActionBar, tildele dem til våre ActionBar.Tab klassen, og sette tittelteksten for hver enkelt. Du kan også usesetIcon (R.drawable.image) for å angi et bilde ikon i stedet.
Til slutt lager vi en ny TabListener for hver enkelt, og deretter legge alle tre til ActionBar. En TabListener gir en tilbakeringing grensesnitt for å håndtere handlinger brukes til faner, inkludert fokusere dem, legge dem, eller fjerne dem. ActionBar.TabListener er et grensesnitt, så vi må implementere det med den tilpassede MyTabListener klassen.
Legg merke til at vi bruker android.app.Fragment (ikke android.app.v4.support.Fragment ). Vi må også redigere AndroidManifest.xml å sette minimum SDK til 13.
Opprette fanene
Etter å ha skrevet den viktigste aktiviteten, må vi opprette kategorien klasser. FragmentTab1.java ser slik ut:
public class FragmentTab1 strekker Fragment {public Vis onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {Vis view = inflater.inflate (R.layout.tab, container, false); TextView textview = (TextView) view.findViewById (R.id.tabtextview); textview.setText (R.string.One); returnere view; }} Denne klassen må forlenge Fragment som det blir behandlet som en Fragment når konstruere ActionBar. Det er ganske enkelt; det meste bare blåse sin layout. Vi har også satt av innholdet i TextView (du må redigere verdier /strings.xml tilsvarende for å gi denne strengen ressurs). Du kan også gjøre andre endringer i kategorien, som bakgrunnsfarge, her.
FragmentTab2.java og FragmentTab3.java er nesten identiske, bortsett fra at tekststrengen vil være R.string.Two og R.string. Tre hhv. (Du vil merke at dette kan bruke litt av refactoring å unngå kode repetisjon. Du kan sette opp de Fragments å bruke tekststrenger som argumenter i en pakke, men det er utenfor omfanget av denne opplæringen.)
Opprette TabListener
Den siste bit av aktiv kode før vi flytte inn på XML-filer er MyTabListener Klasse:
public class MyTabListener implementerer ActionBar.TabListener {Fragment fragment; offentlig MyTabListener (fragment fragment) {this.fragment = fragment; } Public void onTabSelected (tab Tab, FragmentTransaction ft) {ft.replace (R.id.fragment_container, fragment); } Public void onTabUnselected (tab Tab, FragmentTransaction ft) {ft.remove (fragment); } Public void onTabReselected (Tab-kategorien, FragmentTransaction ft) {//ingenting gjort her}} FragmentTransaction gir API for ulike fragment operasjoner. Hvert sett med endringer til et fragment i aktivitet (fjerner den, og erstatte den med en annen fragment, og legger til det, og så videre) kalles en transaksjon, og styres gjennom FragmentTransaction. Samt at du kan utføre et sett med endringer på en gang, kan du også legge transaksjonene til baksiden stabelen, som tillater brukere å navigere bakover gjennom endringene de har gjort. Men i dette tilfellet er vi ikke direkte håndtere eventuelle transaksjoner oss selv, bare legge noe til en transaksjon som hovedaktiviteten (og ActionBar) skal klare for oss.
Så for hver tilbakeringings lytteren blir, det legger den aktuelle transaksjonen til FragmentTransaction vedtatt i på den tiden. Hvis kategorien er valgt, erstatter den nåværende fragment den gamle i fragment container, og hvis det er valgt, er den fjernet. Dette kan selvfølgelig gjøres mye mer komplisert hvis koden din krever det.
utforminger
Etter å ha skrevet inn koden, må vi opprette XML-oppsett. Hoved layout, activity_tab_test.xml, er bare en beholder for kategorien fragmenter:?
< xml version = "1.0" encoding = "UTF-8" > < FrameLayout xmlns:? Android = " http://schemas.android.com/apk/res/android "android: id =" + id /fragment_container "android: layout_width =" match_parent "android: layout_height =" match_parent "/> Dette er R.id.fragment_container nevnt i MyTabListener koden, at hvert fragment vil erstattes i så fanen er valgt. Det er bare et enkelt bilde, som dekker hele skjermen (kategorien titler gå i ActionBar som har sin egen Android-generert layout)
Neste vi trenger kategorien layout, tab.xml.
< xml version = "1.0" encoding = "UTF-8" > < RelativeLayout xmlns:? android = "http://schemas.android.com/apk/res/android~~number=plural" xmlns: verktøy = "http : //schemas.android.com/tools "android: layout_width =" match_parent "android: layout_height =" match_parent "> < TextView android: id = "+ id /tabtextview" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_centerHorizontal = "true" android: layout_centerVertical = "true" /> < /RelativeLayout > En annen enkel layout: dette bare har en enkelt TextView, som vi setter vår streng ressurs inn i FragmentTab * klasser. Hvis du ønsket fanene til å være mer forskjellige fra hverandre, kan du lage flere oppsett og bruk en annen en i hver kategori klasse. Dette oppsettet vil bli droppet inn i FrameLayout av hoved aktivitet XML
Alle deler av koden din er nå sammen.; kjøre den og du bør få en tabbed aktivitet som ser litt ut som skjermdumpen ovenfor.
Som alltid, dette er et enkelt eksempel på en struktur som kan bli veldig komplisert hvis du vil ha det til. Eksperimentere videre og se hva enkle og mer komplekse layout alternativer du kan sette opp, og hvordan du kan håndtere ulike aspekter av din app i en fane sammenheng. Faner når de brukes på riktig måte kan gi en god UI, så de er vel verdt å få fatt i.
Denne artikkelen konkluderer vår serie om Android App Development for nybegynnere. For den forrige artikkelen i denne serien kan du se:
Hvordan bygge en hurtigmenyen i Android App Development
For å begynne på begynnelsen besøk:
Android Programming for nybegynnere: Part 1