Share
Wat je gaat creërenHet materiaalontwerpteam bij Google definieert eenvoudig de functionaliteit van tabbladen in Android als volgt:
Met tabs kunt u eenvoudig verschillende weergaven verkennen en schakelen.
In dit bericht leert u hoe u tabbladen kunt weergeven met behulp van de TabLayout en ViewPager API. In deze praktische zelfstudie behandelen we het volgende:
Accentsconagua
TabLayout en ViewPager componenten. Een voorbeeldproject voor deze zelfstudie is te vinden op onze GitHub-repo, zodat u deze eenvoudig kunt volgen.
Als je deze zelfstudie wilt kunnen volgen, heb je het volgende nodig:
Je kunt ook alle ins en outs van de Kotlin-taal leren in mijn Kotlin From Scratch-serie.
Volgens de officiële Android-documentatie op TabLayout, het zegt:
TabLayoutbiedt een horizontale lay-out om tabbladen weer te geven.
De TabLayout component is een van de componenten die wordt geïntroduceerd als onderdeel van de artefacten van het ontwerp van het materiaal. Bovendien is het ook opgenomen in de bibliotheek voor ontwerpondersteuning. In een TabLayout, wanneer een tabblad wordt geselecteerd of getikt, wordt een andere pagina (of fragment) aan de gebruiker getoond.
De TabLayout component kan de weergegeven tabbladen op twee manieren laten functioneren: vast en schuifbaar. Als de tabbladen zijn hersteld, worden alle tabbladen tegelijkertijd op het scherm weergegeven.
De onderstaande schermafbeelding is de nieuwste officiële WhatsApp Android-app (vanaf dit moment), die een TabLayout met een configuratie met vaste modus.
In schuifbare tabbladen kan de gebruiker naar links of rechts vegen om meer tabbladen weer te geven als het aantal tabbladen te breed wordt voor het scherm..
Hier is een voorbeeld van een TabLayout met schuifbare tabbladmodus - weergegeven in de nieuwste versie van de Android-app Nieuws en weer van Google.
Bovendien kan de informatie die op een tabblad wordt weergegeven tekst, een pictogram of een combinatie van zowel tekst als een pictogram zijn. De nieuwste Twitter-app voor Android gebruikt bijvoorbeeld pictogrammen in plaats van tekst op elk tabblad.
In de volgende secties gaan we dieper in op het coderen van een eenvoudige app die gebruikmaakt van TabLayout met een ViewPager. Laten we gaan rollen!
Design is niet alleen hoe het eruit ziet en voelt. Ontwerp is hoe het werkt. - Steve Jobs
Start Android Studio 3 en maak een nieuw project (u kunt het een naam geven TabLayoutDemo) met een lege activiteit genaamd Hoofdactiviteit.
We gaan een maken TabLayout met slechts drie tabbladen. Wanneer elk van de tabbladen is geselecteerd, wordt een ander Android-fragment of -pagina weergegeven. Laten we nu de drie Android-fragmenten maken voor elk van de tabbladen. We beginnen met de eerste fragmentklasse en u moet een vergelijkbaar proces volgen voor de resterende twee fragmentklassen-FragmentTwo.kt en FragmentThree.kt.
Hier is mijn FragmentOne.kt:
import android.os.Bundle import android.support.v4.app.Fragmentimport android.view.LayoutInflater import android.view.View import android.view.ViewGroup class FragmentOne: Fragment () override fun onCreateView (inflater: LayoutInflater ?, container: ViewGroup ?, savedInstanceState: Bundle?): Bekijken? = inflator !!. inflate (R.layout.fragment_one, container, false) metgezel object fun newInstance (): FragmentOne = FragmentOne ()
Hier is ook mijn R.layout.fragment_one:
Om te beginnen met gebruiken TabLayout en ViewPager in uw project moet u de ontwerpondersteuning en ook het ondersteuningsartefact van Android importeren, dus voeg deze toe aan uw modules build.gradle bestand om ze te importeren.
afhankelijkheden implementatie 'com.android.support:design:26.1.0' implementatie 'com.android.support:support-v4:26.1.0'
Bezoek ook jouw res / lay-out / activlty_main.xml bestand om zowel de TabLayout widget en de ViewPager uitzicht.
Hier hebben we een eenvoudig gemaakt TabLayout met id tab_layout. In onze TabLayout XML-widget kunt u zien dat we enkele kenmerken hebben opgenomen, zoals app: tabMode zijn vast en ook app: tabGravity zijn vullen. De app: tabGravity eigenschap wordt gebruikt om te configureren hoe de tabitems worden weergegeven om de beschikbare ruimte op te nemen. We hebben dit ingesteld vullen, die de items gelijkmatig over de breedte van de TabLayout. Merk op dat dit meer zichtbaar zal zijn in bredere schermen, zoals tablets.
Ik heb ook een attribuut aangepast op maat toegevoegd (@ Stijl / CustomTabLayout) in onze TabLayout widget.
We beginnen met het aanpassen van onze TabLayout door de waarden in te stellen van de attributen die moeten worden toegepast op de TabLayout. Hier zijn de details voor enkele van de toegepaste attributen:
tabIndicatorColor: stelt de kleur van de tabindicator in voor het momenteel geselecteerde tabblad. Dit kan ook programmatisch worden ingesteld door te bellen setSelectedTabIndicatorColor () op een TabLayout aanleg. tabIndicatorHeight: stelt de hoogte van de tabindicator in voor het momenteel geselecteerde tabblad. Dit kan ook programmatisch worden ingesteld door de setSelectedTabIndicatorHeight () op een TabLayout aanleg. tabSelectedTextColor: stelt de tekstkleuren in voor de verschillende statussen (normaal, geselecteerd) die voor de tabbladen worden gebruikt. Het equivalent van dit kenmerk in Java is setTabTextColors (). Onmiddellijk na het maken van onze TabLayout widget in XML, de volgende weergave was een ViewPager. De officiële documentatie zegt het volgende over ViewPager:
Layout Manager waarmee de gebruiker links en rechts door pagina's met gegevens kan bladeren ...
We moeten een subklasse maken in SampleAdapter.kt dat verlengt de FragmentPagerAdapter. Deze klasse is verantwoordelijk voor het beheer van de verschillende fragmenten die op de tabbladen worden weergegeven.
import android.support.v4.app.Fragmentimport android.support.v4.app.FragmentManager import android.support.v4.app.FragmentPagerAdapter class SampleAdapter (fm: FragmentManager): FragmentPagerAdapter (fm) overschrijf leuk getItem (positie: Int ): Fragment? = when (positie) 0 -> FragmentOne.newInstance () 1 -> FragmentTwo.newInstance () 2 -> FragmentThree.newInstance () else -> null override fun getPageTitle (position: Int): CharSequence = when (positie) 0 -> "Tab 1 Item" 1 -> "Tab 2 Item" 2 -> "Tab 3 Item" else -> "" overschrijven fun getCount (): Int = 3
Hier overschrijven we drie methoden uit de bovenliggende klasse: getItem (), getCount (), en getPageTitle (). Hier zijn de verklaringen voor de methoden:
getItem (): geeft a terug Fragment voor een bepaalde positie binnen de ViewPager. getCount (): Geeft aan hoeveel pagina's in de ViewPager. getPageTitle (): deze methode wordt aangeroepen door de ViewPager om een titelstring te verkrijgen om het opgegeven tabblad te beschrijven.Als het geselecteerde tabblad bijvoorbeeld het eerste tabblad met titel is "Item Tab 1", een FragmentOne pagina wordt onmiddellijk aan de gebruiker getoond.
Vervolgens gaan we instanties van onze initialiseren TabLayout, ViewPager, en SampleAdapter. Initialisatie zal binnen gebeuren onCreate () in MainActivity.kt.
import android.os.Bundle import android.support.design.widget.TabLayout import android.support.v4.view.ViewPager import android.support.v7.app.AppCompatActivity import android.support.v7.widget.Toolbar class MainActivity: AppCompatActivity () override plezier onCreate (savedInstanceState: bundel?) super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) initToolbar () val tabLayout: TabLayout = findViewById (R.id.tab_layout) val viewPager: ViewPager = findViewById ( R.id.view_pager) val adapter = SampleAdapter (supportFragmentManager) viewPager.adapter = tabblad adapterLayout.setupWithViewPager (viewPager) tabLayout.addOnTabSelectedListener (object: TabLayout.OnTabSelectedListener override fun onTabSelected (tab: TabLayout.Tab) override fun onTabUnselected ( tab: TabLayout.Tab) negeer plezier opTabReselected (tab: TabLayout.Tab) ) private fun initToolbar () val werkbalk: Toolbar = findViewById (R.id.toolbar) setSupportActionBar (werkbalk) supportActionBar !!. title = "TabLa yout Demo "
We hebben verwijzingen naar onze TabLayout en ViewPager van R.layout.activity_main en initialiseerde ze. We hebben ook een instantie van onze gemaakt SampleAdapter-een instantie van FragmentManager als een argument. We moeten de meningen voor ons geven ViewPager, dus we belden setAdapter () en hebben er onze aangemaakte adapter aan doorgegeven. Eindelijk hebben we gebeld setupWithViewPager () op een instantie van TabLayout om wat werk te doen:
Wanneer de gebruiker op een tabblad tikt, verandert het de pagina's in de ViewPager en toont de vereiste pagina (of Fragment). Ook vegen tussen pagina's werkt het geselecteerde tabblad bij. Met andere woorden, deze methode helpt ons om te zorgen voor wijzigingen in de schuifstatus en klikken op de tabbladen.
De onTabSelectedListener () wordt gebruikt om een listener op te nemen die wordt aangeroepen wanneer de tabselectie verandert. We hebben de volgende callbacks opgeheven:
onTabSelected (): geactiveerd wanneer een tabblad de geselecteerde staat binnengaat.onTabUnselected (): wordt aangeroepen wanneer een tabblad de geselecteerde status verlaat.onTabReselected (): wordt aangeroepen wanneer een gebruiker een reeds geselecteerd tabblad opnieuw selecteert.Merk op dat we de tabbladmodus ook programmatisch kunnen instellen in plaats van via de lay-out XML-gebruik setTabMode () op een instantie van TabLayout. We geven de methode (vast of scrollable) door aan deze methode als argumenten. We kunnen bijvoorbeeld slagen TabLayout.MODE_FIXED voor een vaste modus-of TabLayout.MODE_SCROLLABLE voor een schuifbare modus.
tabLayout.tabMode = TabLayout.MODE_FIXED tabLayout.tabMode = TabLayout.MODE_SCROLLABLE
Merk op dat als u expliciet de tabbladen wilt maken in plaats van de helpermethode te gebruiken setUpWithViewPager (), je kunt in plaats daarvan gebruiken nieuw tabblad() op een TabLayout aanleg.
val tabLayout: TabLayout = findViewById (R.id.tab_layout) tabLayout.addTab (tabLayout.newTab (). setText ("Songs")) tabLayout.addTab (tabLayout.newTab (). setText ("Albums")) tabLayout.addTab (tabLayout.newTab (). setText ( "Kunstenaars")) Merk ook op dat we de tabbladen expliciet via XML konden maken in plaats van programmatisch.
Eindelijk kunt u de app uitvoeren!
Probeer interactie te hebben met de applicatie door naar links of rechts te vegen en op de tabs te tikken.
De officiële richtlijnen voor materiaalontwerp op tabbladen zegt het volgende over schuifbare tabbladen:
Scrollable tabs geven op elk willekeurig moment een subset van tabbladen weer. Ze kunnen langere tablabels bevatten en een groter aantal tabbladen dan vaste tabbladen. Scrollable-tabbladen kunnen het best worden gebruikt om door contexten in aanraakinterfaces te bladeren wanneer gebruikers de tablabels niet rechtstreeks hoeven te vergelijken.
Laten we eens kijken hoe u tabbladen kunt maken met schuifbare modusconfiguratie. Ik maakte de titel voor elk van de tabbladen langer dan voorheen. Hier is het resultaat in de vaste modus:
Je kan dat zien TabLayout heeft meerdere regels gebruikt om alle titels van de tab weer te geven. In sommige situaties zal het zelfs de titels afkappen! Dit creëert een slechte gebruikerservaring, dus als uw tabbladen erg lang moeten zijn, kunt u overwegen de schuifbare modus te gebruiken. Houd er ook rekening mee dat als u meer dan vier tabbladen wilt hebben, het wordt aanbevolen om de tabmodus schuifbaar te maken.
Laten we het veranderen app: tabMode eigendom van vast naar scrollbare.
app: tabMode = "scrollable" />
Vergeet niet dat je de tabmodus ook programmatisch kunt instellen, zoals eerder besproken.
Laten we nu eens kijken hoe u de tekst van het tabbladitem kunt vervangen door pictogrammen.
class MainActivity: AppCompatActivity () override fun onCreate (savedInstanceState: Bundle?) // ... tabLayout.setupWithViewPager (viewPager) tabLayout.getTabAt (0) !!. setIcon (android.R.drawable.ic_dialog_email) tabLayout.getTabAt (1 ) !!. setIcon (android.R.drawable.ic_dialog_info) tabLayout.getTabAt (2) !!. setIcon (android.R.drawable.ic_dialog_alert) // ... // ...
Hier hebben we de getTabAt () op een instantie van TabLayout. Als u deze methode aanroept, wordt het tabblad geretourneerd bij de opgegeven index. Vervolgens bellen we setIcon (). Als u deze methode aanroept, wordt het pictogram op dit tabblad weergegeven.
Ik heb ook de tabmodus ingesteld die moet worden hersteld.
Ik negeer nog steeds de getPageTitle () binnen in de SampleAdapter.
class SampleAdapter (fm: FragmentManager): FragmentPagerAdapter (fm) // ... negeer leuke getPageTitle (positie: Int): CharSequence = when (positie) 0 -> "TAB 1" 1 -> "TAB 2" 2 -> " TAB 3 "else ->" " // ...
Hier is het resultaat:
Als u alleen de pictogrammen wilt, hoeft u deze eenvoudigweg niet te negeren getPageTitle ().
In plaats van zoveel code te schrijven, alleen om vanuit het niets een interface met tabbladen of activiteit te maken, heeft Android Studio 3.0 een aantal reeds bestaande codesjablonen (beschikbaar in Java en Kotlin) om je project een vliegende start te geven. Eén zo'n sjabloon kan worden gebruikt om een activiteit met tabbladen te maken.
Ik zal je laten zien hoe je deze handige functie in Android Studio 3 kunt gebruiken.
Voor een nieuw project start je Android Studio 3.
Voer de naam van de toepassing in en klik op de volgende knop.
U kunt de standaardinstellingen laten zoals ze zijn in de Target Android-apparaten dialoogvenster. Klik op de volgende knop opnieuw.
In de Toevoegen een activiteit naar mobiel dialoogvenster, scrol omlaag en selecteer Activiteit met tabbladen. Klik op de volgende knop daarna.
Blader in het laatste dialoogvenster naar de Navigatiestijl vervolgkeuzemenu en selecteer Action Bar-tabbladen (met ViewPager). Klik ten slotte op Af hebben om alle configuraties te accepteren.
Android Studio heeft ons nu geholpen bij het maken van een project met een activiteit met tabbladen. Echt cool!
U wordt dringend geadviseerd om de gegenereerde code te verkennen.
In een reeds bestaand Android Studio-project, om deze sjabloon te gebruiken, gaat u gewoon naar Bestand> Activiteit> Activiteit met tabbladen. En volg dezelfde stappen die eerder werden beschreven.
De sjablonen die bij Android Studio worden meegeleverd, zijn goed voor eenvoudige lay-outs en het maken van eenvoudige apps, maar als u uw app nog een stapje hoger wilt zetten, kunt u enkele app-sjablonen overwegen die verkrijgbaar zijn bij Envato Market..
Ze zijn een enorme tijdbesparing voor ervaren ontwikkelaars, waardoor ze de hele klus van het maken van een nieuwe app kunnen doorbreken en hun talenten kunnen richten op de unieke en aangepaste onderdelen van het maken van een nieuwe app.
In deze zelfstudie hebt u geleerd hoe u in Android een interface met tabbladen kunt maken met behulp van de TabLayout en ViewPager API helemaal opnieuw. We hebben ook onderzocht hoe je de Android Studio-sjablonen eenvoudig en snel kunt gebruiken om een interface met tabbladen te maken.
Ik raad ten zeerste aan om de officiële richtlijnen voor materiaalontwerp voor tabbladen te lezen voor meer informatie over het correct ontwerpen en gebruiken van tabbladen in Android.
Voor meer informatie over codering voor Android, bekijk enkele van onze andere cursussen en tutorials hier op Envato Tuts+!
