web-dev-qa-db-fra.com

Utiliser l'onglet avec la nouvelle barre d'outils (AppCompat v7-21)

J'utilisais SupportActionBar avec des onglets et un thème ActionBar personnalisé (créé avec http://jgilfelt.github.io/Android-actionbarstylegenerator/ ), qui affiche les onglets uniquement lorsque l'utilisateur développe la vue de recherche.

public boolean onMenuItemActionExpand(MenuItem item) {
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        return true;
    }
}

J'ai migré d'ActionBar vers la barre d'outils. Mon application doit vraiment prendre en charge l’API 9.

Est-il possible d'utiliser ce code pour ajouter les onglets ?:

Toolbar toolbar = (Toolbar) findViewById(R.id.new_actionbar);
setSupportActionBar(toolbar);
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

Si possible, comment puis-je utiliser mon thème personnalisé ou le style de la barre d'outils?

La documentation indique que ceci est obsolète et suggère d'utiliser un type de navigation différent. Mais je ne connais aucun autre composant dans Android qui présente les mêmes fonctionnalités.

De l'aide?

androidtabsandroid-support-libraryandroid-appcompatandroid-actionbar-compat
70
Leandro Hoffmann

Avec l'API 21, la méthode setNavigationMode(ActionBar.NAVIGATION_MODE_TABS) est obsolète .

UPDATE 01/08/2019 (Composants matériels Android)

Avec la version stable de Android Matériaux en novembre 2018, Google a déplacé les composants matériels de l'espace de noms Android.support.design à com.google.Android.material.
Bibliothèque de composants matériels remplace la bibliothèque de support de conception d’Android.

Ajoutez la dépendance à votre build.gradle:

dependencies { implementation ‘com.google.Android.material:material:1.0.0’ }

Ensuite, vous pouvez utiliser le nouveau TabLayout .

<androidx.constraintlayout.widget.ConstraintLayout>

     <com.google.Android.material.appbar.AppBarLayout   ...>

        <androidx.appcompat.widget.Toolbar  .../>


        <com.google.Android.material.tabs.TabLayout
         ...
         />

     </com.google.Android.material.appbar.AppBarLayout>

     <androidx.viewpager.widget.ViewPager 
        Android:id="@+id/viewpager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.constraintlayout.widget.ConstraintLayout>

Le code est simple:

TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
tabs.setupWithViewPager(pager);

UPDATE 29/05/2015 (bibliothèque de support)

Avec la nouvelle bibliothèque de support de conception , vous pouvez maintenant utiliser la nouvelle TabLayout .

Ajoutez simplement cette dépendance à votre build.gradle

compile 'com.Android.support:design:22.2.0'

Le code est très simple:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

Pour mettre en œuvre de nombreuses fonctionnalités des conceptions de matériau, vous devez l’utiliser dans un CoordinatorLayout et un AppBarLayout .

Quelque chose comme ça:

 <Android.support.design.widget.CoordinatorLayout
         xmlns:Android="http://schemas.Android.com/apk/res/Android"
         xmlns:app="http://schemas.Android.com/apk/res-auto"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent">


     <Android.support.design.widget.AppBarLayout
             Android:layout_height="wrap_content"
             Android:layout_width="match_parent">

         <Android.support.v7.widget.Toolbar
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

         <Android.support.design.widget.TabLayout
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

     </Android.support.design.widget.AppBarLayout>

     <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

 </Android.support.design.widget.CoordinatorLayout>

[~ # ~] ancien [~ # ~]

Vous pouvez utiliser un modèle différent. Par exemple, vous pouvez utiliser le même exemple que vous pouvez voir dans googleio14.

Il utilise un SlidingTabLayout qui fonctionne avec un ViewPager.

Ici vous pouvez trouver l'exemple (c'est dans votre exemple sdk)

Vous trouverez ici l'exemple de Google io14:

157
Gabriele Mariotti

Bien que je sois probablement un peu en retard pour répondre à cette question maintenant, je me suis rendu compte que j’écrivais ne réponse à une question similaire , qui couvre à la fois l’utilisation de la bibliothèque de prise en charge de Design et la version antérieure à Google I/O.

J'ai inclus les pièces essentielles ci-dessous:

L'utilisation de TabLayout avec Toolbar est devenue beaucoup plus simple depuis l'annonce de la bibliothèque de support Android Design, ce qui signifie qu'il n'est plus nécessaire de télécharger des classes d'affichage personnalisées.

De la publication de blogspot des développeurs Android sur Android Design Support Library :

Onglets :

Basculer entre différentes vues de votre application via onglets n’est pas un nouveau concept en matière de conception matérielle. Ils sont également utilisables comme modèle de navigation de niveau supérieur ou pour organiser différents groupes de contenu. dans votre application (par exemple, différents genres de musique).

TabLayout de la bibliothèque de conception implémente les deux onglets fixes, où la largeur de la vue est divisée de manière égale entre tous les onglets, ainsi que les onglets déroulants, où ils ne sont pas de taille uniforme et peuvent défiler horizontalement. Les onglets peuvent être ajoutés par programme:

TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

Toutefois, si vous utilisez un ViewPager pour la pagination horizontale entre onglets, vous pouvez créer des onglets directement à partir de votre PagerAdaptergetPageTitle () , puis reliez les deux ensemble à l'aide de setupWithViewPager(). Cela garantit que les événements de sélection d'onglets mettent à jour ViewPager et que les modifications de page mettent à jour l'onglet sélectionné.

Si vous n'utilisez pas la bibliothèque Design Support, vous devrez procéder comme suit:

1. Téléchargez les fichiers SlidingTabLayout.Java et SlidingTabStrip.Java depuis l'application I/O Conference de Google sur GitHub. Ce sont les vues qui seraient utilisées dans la disposition des onglets. J'ai donc créé un dossier avec mes autres Java appelées 'vue' et les ai placées là.

2. Modifiez votre mise en page pour inclure le SlidingTabLayout:

<LinearLayout
    Android:orientation="vertical"
    ... >

    <!-- This is the Toolbar with the tabs underneath -->
    <LinearLayout
        Android:orientation="vertical"
        ... >

        <include Android:id="@+id/my_toolbar" layout="@layout/toolbar" />

        <com.mycompany.myapp.SlidingTabLayout
            Android:id="@+id/sliding_tabs"
            Android:background="?attr/colorPrimary"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content" />
    </LinearLayout>

    <!-- This is the ViewPager (which you already should have if you have
        used tabs before) -->
    <Android.support.v4.view.ViewPager
        Android:id="@+id/view_pager"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

    ...

</LinearLayout>

La ligne qui référence le Toolbar (<include Android:id="@+id/detail_toolbar" layout="@layout/toolbar" />), Fait référence à un autre fichier XML que j'avais utilisé pour créer le Toolbar.

3. Modifiez les noms des packages dans SlidingTabLayout.Java Et SlidingTabStrip.Java En fonction de leur emplacement. Dans mon cas, j'ai utilisé quelque chose de similaire à: package com.mycompany.myapp.view; Pour ces deux fichiers. Organisez les importations et ajoutez le cas échéant, comme indiqué par le IDE que vous utilisez.

4. Dans votre Activity (qui étendait AppCompatActivity), configurez le Toolbar dans le onCreate méthode:

Toolbar toolbar = (Toolbar) findViewById(R.id.detail_toolbar);
setSupportActionBar(toolbar);

5. Configurez les parties ViewPager et SlidingTabLayout:

mViewPager = (ViewPager) findViewById(R.id.view_pager);
mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.tab_line));   
mSlidingTabLayout.setDistributeEvenly(true);
mSlidingTabLayout.setViewPager(mViewPager);

La couleur 'tab_line' Était une couleur que j'avais déclarée dans color.xml Et qui serait la couleur de l'indicateur de ligne de tabulation. Notez également que les variables ci-dessus étaient globales, ce que j'ai défini précédemment dans cette activité:

SlidingTabLayout mSlidingTabLayout;
ViewPager mViewPager;

6. Enfin, configurez le ViewPagerAdapter que j'avais déjà appelé. Ce serait responsable de changer la page en fonction de l'onglet sélectionné. J'ai utilisé le code suivant:

public class ViewPagerAdapter extends FragmentPagerAdapter {

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public int getCount() {
        // Returns the number of tabs
        return 3;
    }

    @Override
    public Fragment getItem(int position) {
        // Returns a new instance of the fragment
        switch (position) {
            case 0:
                return new FragmentOne();
            case 1:
                return new FragmentTwo();
            case 2:
                return new FragmentThree();
        }
        return null;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        Locale l = Locale.getDefault();
        switch (position) {
            case 0:
                return getString(R.string.title_section1).toUpperCase(l);
            case 1:
                return getString(R.string.title_section2).toUpperCase(l);
            case 2:
                return getString(R.string.title_section3).toUpperCase(l);
        }
        return null;
    }
}

Comme je l'ai mentionné ci-dessus, vous trouverez plus de détails sur ces solutions sur ne autre question à laquelle j'ai répondu, sur l'utilisation des onglets coulissants avec la barre d'outils .

14
Farbod Salamat-Zadeh