Share
Ce que vous allez créerL'équipe de conception matérielle de Google définit simplement la fonctionnalité des onglets dans Android comme suit:
Les onglets facilitent l'exploration et le basculement entre différentes vues.
Dans cet article, vous apprendrez à afficher des onglets à l'aide de la TabLayout et ViewPager API. Dans ce tutoriel pratique, nous aborderons les points suivants:
Accentsconagua
TabLayout et ViewPager Composants. Vous trouverez un exemple de projet pour ce tutoriel sur notre dépôt GitHub afin que vous puissiez suivre facilement.
Pour pouvoir suivre ce tutoriel, vous aurez besoin de:
Vous pouvez également apprendre tous les tenants et les aboutissants de la langue Kotlin dans ma série Kotlin From Scratch.
Selon la documentation officielle Android sur TabLayout, ça dit:
TabLayoutfournit une disposition horizontale pour afficher les onglets.
le TabLayout composant est l’un des composants introduits dans les artefacts de conception de matériaux. De plus, il est également inclus dans la bibliothèque de support de conception. Dans un TabLayout, lorsqu'un onglet est sélectionné ou tapé, une page (ou un fragment) différent est montré à l'utilisateur.
le TabLayout Le composant peut avoir ses onglets affichés fonctionner de deux manières: fixe et défilable. Si les onglets sont fixes, tous les onglets seront affichés à l'écran en même temps.
La capture d'écran ci-dessous est la dernière application officielle WhatsApp pour Android (à ce jour), qui utilise une TabLayout avec une configuration en mode fixe.
Dans les onglets déroulants, si le nombre d'onglets devient trop grand pour l'écran, l'utilisateur peut balayer l'écran de gauche à droite pour en afficher plus..
Voici un exemple de TabLayout avec mode de défilement à onglet - présenté dans la dernière version de l'application Android News & Weather de Google.
En outre, les informations affichées sur un onglet peuvent être du texte, une icône ou une combinaison de texte et d’icône. Par exemple, la dernière application Twitter pour Android utilise des icônes au lieu de texte sur chaque onglet..
Dans les sections suivantes, nous allons plonger dans le codage d’une application simple qui utilise TabLayout avec un ViewPager. Allons rouler!
Le design n’est pas simplement ce à quoi il ressemble et se sent. Le design est la façon dont cela fonctionne. - Steve Jobs
Lancez Android Studio 3 et créez un nouveau projet (vous pouvez le nommer TabLayoutDemo) avec une activité vide appelée Activité principale.
Nous allons créer un TabLayout avec seulement trois onglets. Lorsque chacun des onglets est sélectionné, il affiche un fragment ou une page Android différent. Créons donc maintenant les trois fragments Android pour chacun des onglets. Nous allons commencer par la première classe de fragments et suivre un processus similaire pour les deux classes de fragments restantes.-FragmentTwo.kt et FragmentThree.kt.
Voici mon FragmentOne.kt:
importer android.os.Bundle importer android.support.v4.app.Fragment importer android.view.LayoutInflater importer android.view.View importer android.view.ViewGroup, classe FragmentOne: Fragment () override fun onCreateView (inflater: LayoutInflater?) conteneur: ViewGroup ?, savedInstanceState: Bundle?): Voir? = inflater !!. gonfler (R.layout.fragment_one, conteneur, false) objet associé fun newInstance (): FragmentOne = FragmentOne ()
Voici aussi mon R.layout.fragment_one:
Pour commencer à utiliser TabLayout et ViewPager dans votre projet, assurez-vous d'importer le support de conception ainsi que l'artefact de support Android; ajoutez-les à votre module build.gradle fichier pour les importer.
dépendances implémentation 'com.android.support:design:26.1.0' implémentation 'com.android.support:support-v4:26.1.0'
Aussi, visitez votre res / layout / activlty_main.xml fichier pour inclure les deux TabLayout widget et le ViewPager vue.
Ici nous avons créé un simple TabLayout avec identifiant tab_layout. Dans notre TabLayout Widget XML, vous pouvez voir que nous avons inclus certains attributs, tels que app: tabMode être fixé et aussi application: tabGravity être remplir. le application: tabGravity Cette propriété est utilisée pour configurer la manière dont les éléments d'onglet seront affichés de manière à occuper l'espace disponible. Nous réglons ceci à remplir, qui distribuera les articles uniformément sur toute la largeur du TabLayout. Notez que cela sera plus visible sur des écrans plus larges, tels que les tablettes..
J'ai également inclus un attribut de style personnalisé (@ style / CustomTabLayout) dans notre TabLayout widget.
Nous commençons à personnaliser notre TabLayout en définissant les valeurs des attributs à appliquer sur le TabLayout. Voici les détails pour certains des attributs appliqués:
tabIndicatorColor: définit la couleur de l'indicateur d'onglet pour l'onglet actuellement sélectionné. Ceci peut également être défini par programme en appelant setSelectedTabIndicatorColor () sur un TabLayout exemple. tabIndicatorHeight: définit la hauteur de l'indicateur d'onglet pour l'onglet actuellement sélectionné. Cela peut également être défini par programme en appelant le setSelectedTabIndicatorHeight () sur un TabLayout exemple. tabSelectedTextColor: définit les couleurs du texte pour les différents états (normal, sélectionné) utilisés pour les onglets. L'équivalent de cet attribut en Java est setTabTextColors (). Immédiatement après la création de notre TabLayout widget en XML, la vue suivante était un ViewPager. La documentation officielle dit ce qui suit à propos de ViewPager:
Gestionnaire de mise en page qui permet à l'utilisateur de faire défiler les pages de données vers la gauche et la droite…
Nous devons créer une sous-classe dans SampleAdapter.kt qui étend la FragmentPagerAdapter. Cette classe est responsable de la gestion des différents fragments qui seront affichés sur les onglets.
import android.support.v4.app.Fragment import android.support.v4.app.FragmentManager import android.support.v4.app.FragmentPagerAdapter class SampleAdapter (fm: FragmentManager): FragmentPagerAdapter (fm) substitate fun getItem (position: Int ): Fragment? = quand (position) 0 -> FragmentOne.newInstance () 1 -> FragmentTwo.newInstance () 2 -> FragmentThree.newInstance () else -> null remplace fun get getPageTitle (position: Int): CharSequence = when (position) 0 -> "Onglet 1 élément" 1 -> "Onglet 2 article" 2 -> "Onglet 3 article" else -> "" Remplacer fun getCount (): Int = 3
Ici, nous substituons trois méthodes de la classe parente: obtenir l'article(), getCount (), et getPageTitle (). Voici les explications pour les méthodes:
obtenir l'article(): retourne un Fragment pour un poste particulier au sein de la ViewPager. getCount (): Indique combien de pages seront dans le ViewPager. getPageTitle (): cette méthode est appelée par le ViewPager pour obtenir une chaîne de titre décrivant l'onglet spécifié.Par exemple, si l'onglet sélectionné est le premier onglet avec titre "Onglet 1 élément", une FragmentOne la page sera affichée à l'utilisateur immédiatement.
Ensuite, nous allons initialiser des instances de notre TabLayout, ViewPager, et SampleAdapter. L'initialisation va se passer à l'intérieur onCreate () dans MainActivity.kt.
importer android.os.Bundle import android.support.design.widget.TabLayout importer android.support.v4.view.ViewPager importer android.support.v7.app.AppCompatActivity importer android.support.v7.widget.Toolbar class MainActivity: AppCompatActivity () remplace fun onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) initToolbar () val tabLayout: TabLayout = findViewById (R.id.tab_layout) val viewPager: View R.id.view_pager) val adapter = SampleAdapter (supportFragmentManager) viewPager.adapter = adapter tabLayout.setupWithViewPager (viewPager) tabLayout.addOnTabSelectedListener (objet: TabLayout.OnTabSelectedListener) tab: TabLayout.Tab) redéfinit fun sur onTabReselected (tab: TabLayout.Tab) ) fun sur initToolbar () val toolbar: Toolbar = findViewById (R.id.toolbar) setSupportActionBar (toolbar) supportActionBar !!. title = "TabLa votre démo "
Nous avons eu des références à notre TabLayout et ViewPager de R.layout.activity_main et les initialisé. Nous avons également créé une instance de notre SampleAdapter-en passant une instance de FragmentManager comme argument. Nous devons fournir les points de vue de nos ViewPager, alors nous avons appelé setAdapter () et passé dans notre adaptateur créé à elle. Enfin, nous avons appelé setupWithViewPager () sur une instance de TabLayout faire du travail:
Lorsque l'utilisateur appuie sur un onglet, les pages de la page sont modifiées. ViewPager et affiche la page requise (ou Fragment). En outre, le glissement entre les pages met à jour l'onglet sélectionné. En d’autres termes, cette méthode nous aide à prendre en charge le changement d’état du défilement et à cliquer sur les onglets..
le onTabSelectedListener () est utilisé pour inclure un écouteur qui sera appelé lorsque la sélection de l'onglet sera modifiée. Nous avons remplacé les rappels suivants:
onTabSelected (): déclenché lorsqu'un onglet entre dans l'état sélectionné.onTabUnselected (): invoqué lorsqu'un onglet quitte l'état sélectionné.onTabReselected (): invoqué lorsqu'un onglet déjà sélectionné est à nouveau choisi par l'utilisateur.Notez que nous pouvons également définir le mode de tabulation par programmation au lieu de via la disposition XML-using setTabMode () sur une instance de TabLayout. Nous passons le mode (fixe ou scrollable) à cette méthode sous forme d'arguments. Par exemple, on peut passer TabLayout.MODE_FIXED pour un mode fixe ou TabLayout.MODE_SCROLLABLE pour un mode de défilement.
tabLayout.tabMode = TabLayout.MODE_FIXED tabLayout.tabMode = TabLayout.MODE_SCROLLABLE
Notez que si vous souhaitez créer explicitement les onglets au lieu d'utiliser la méthode d'assistance setUpWithViewPager (), vous pouvez plutôt utiliser nouvel onglet() sur un TabLayout exemple.
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 ("Albums"). (tabLayout.newTab (). setText ("Artists")) Notez également que nous pourrions créer explicitement les onglets via XML plutôt que par programme..
Enfin, vous pouvez exécuter l'application!
Essayez d'interagir avec l'application en balayant vers la gauche ou vers la droite et en tapant sur les onglets..
Les directives de conception de matériel officielles sur les onglets indiquent ce qui suit à propos des onglets déroulants:
Les onglets déroulants affichent un sous-ensemble d'onglets à tout moment. Ils peuvent contenir des étiquettes d'onglets plus longues et un plus grand nombre d'onglets que les onglets fixes. Les onglets défilables sont mieux utilisés pour les contextes de navigation dans les interfaces tactiles lorsque les utilisateurs n'ont pas besoin de comparer directement les étiquettes..
Voyons comment créer des onglets avec une configuration en mode défilant. J'ai fait le titre pour chacun des onglets plus long qu'avant. Voici le résultat en mode fixe:
Tu peux voir ça TabLayout a utilisé plusieurs lignes pour afficher chacun des titres de l'onglet. Dans certaines situations, les titres seront même tronqués! Cela crée une mauvaise expérience utilisateur. Par conséquent, si le titre de vos onglets doit être très long, envisagez d'utiliser le mode de défilement. Notez également que si vous avez plus de quatre onglets, il est recommandé de faire défiler le mode onglet..
Changeons le app: tabMode propriété de fixé à scrollable.
app: tabMode = "scrollable" />
N'oubliez pas que vous pouvez également définir le mode de tabulation par programmation, comme indiqué précédemment.
Voyons maintenant comment remplacer le texte de l'élément de l'onglet par des icônes.
class MainActivity: AppCompatActivity () substitue l'amusement onCreate (savedInstanceState: Bundle?) //… tabLayout.setupWithViewPager (viewPager) tabLayout.getTabAt (0) !!. setIcon (android.R.drawable.ic_dialog_email) ) !!. setIcon (android.R.drawable.ic_dialog_info) tabLayout.getTabAt (2) !!. setIcon (android.R.drawable.ic_dialog_alert) //… //…
Ici nous avons appelé le getTabAt () sur une instance de TabLayout. L'appel de cette méthode renverra l'onglet à l'index spécifié. Ensuite, nous appelons setIcon (). L'appel de cette méthode définira l'icône affichée sur cet onglet.
Je règle également le mode de tabulation à corriger.
Je remplace toujours le getPageTitle () à l'intérieur de SampleAdapter.
class SampleAdapter (fm: FragmentManager): FragmentPagerAdapter (fm) //… remplace fun getPageTitle (position: Int): CharSequence = when (position) 0 -> "TAB 1" 1 -> "TAB 2" 2 -> " ONGLET 3 "sinon -" "" //…
Voici le résultat:
Maintenant, si vous ne voulez que les icônes, vous ne remplacez tout simplement pas getPageTitle ().
Au lieu d'écrire autant de code simplement pour créer une interface ou une activité à onglets, Android Studio 3.0 propose des modèles de code préexistants (disponibles en Java et Kotlin) pour vous aider à démarrer votre projet. Un tel modèle peut être utilisé pour créer une activité à onglets.
Je vais vous montrer comment utiliser cette fonctionnalité pratique dans Android Studio 3..
Pour un nouveau projet, lancez Android Studio 3.
Entrez le nom de l'application et cliquez sur le bouton Suivant bouton.
Vous pouvez laisser les valeurs par défaut telles qu’elles sont dans Périphériques Android cibles dialogue. Clique le Suivant bouton à nouveau.
dans le Ajouter une activité sur mobile dialogue, faites défiler et sélectionnez Activité à onglets. Clique le Suivant bouton après ça.
Dans la dernière boîte de dialogue, faites défiler jusqu'à la Style de navigation menu déroulant et sélectionnez Onglets de la barre d'action (avec ViewPager). Enfin, cliquez sur le terminer bouton pour accepter toutes les configurations.
Android Studio nous a maintenant aidés à créer un projet avec une activité à onglets. Vraiment cool!
Il est fortement conseillé d'explorer le code généré.
Dans un projet Android Studio déjà existant, pour utiliser ce modèle, accédez simplement à Fichier> Activité> Activité à onglets. Et suivez les étapes similaires décrites précédemment.
Les modèles fournis avec Android Studio conviennent à la mise en page simple et à la création d'applications de base, mais si vous souhaitez donner un coup de pouce supplémentaire à votre application, vous pouvez envisager certains modèles disponibles sur Envato Market..
Ils permettent aux développeurs expérimentés de gagner beaucoup de temps en les aidant à réduire le coût de la création d'application à partir de zéro et en concentrant leurs talents sur les éléments uniques et personnalisés de la création d'une nouvelle application..
Dans ce didacticiel, vous avez appris à créer une interface à onglets dans Android à l'aide du TabLayout et ViewPager API à partir de zéro. Nous avons également exploré comment utiliser facilement et rapidement les modèles Android Studio pour créer une interface à onglets..
Je recommande vivement de consulter les directives officielles relatives à la conception de matériel pour les onglets pour en savoir plus sur la manière de concevoir et d'utiliser correctement les onglets dans Android..
Pour en savoir plus sur le codage pour Android, consultez certains de nos autres cours et tutoriels ici sur Envato Tuts.+!
