Android nouvelle barre de navigation inférieure ou vue de navigation inférieure

133

Vu la nouvelle directive est sortie et utilisée dans la google photosdernière application. Vous ne savez pas comment utiliser la nouvelle barre de navigation inférieure. Voir à travers la nouvelle bibliothèque de support, je n'ai trouvé aucune piste.

entrez la description de l'image ici

Impossible de trouver un échantillon officiel.

Comment utiliser la nouvelle barre inférieure? Je ne veux pas faire de personnalisation.

zjywill
la source
Vous pouvez jeter un oeil à ma réponse: stackoverflow.com/a/44967021/2412582
Prashant
Reportez-vous à stackoverflow.com/a/49031168/2468324
Ankit Bisht

Réponses:

175

Je pense que vous pourriez chercher ceci.

Voici un petit extrait de code pour commencer:

public class MainActivity extends AppCompatActivity {
    private BottomBar mBottomBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Notice how you don't use the setContentView method here! Just
        // pass your layout to bottom bar, it will be taken care of.
        // Everything will be just like you're used to.
        mBottomBar = BottomBar.bind(this, R.layout.activity_main,
                savedInstanceState);

        mBottomBar.setItems(
                new BottomBarTab(R.drawable.ic_recents, "Recents"),
                new BottomBarTab(R.drawable.ic_favorites, "Favorites"),
                new BottomBarTab(R.drawable.ic_nearby, "Nearby"),
                new BottomBarTab(R.drawable.ic_friends, "Friends")
        );

        mBottomBar.setOnItemSelectedListener(new OnTabSelectedListener() {
            @Override
            public void onItemSelected(final int position) {
                // the user selected a new tab
            }
        });
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mBottomBar.onSaveInstanceState(outState);
    }
}

Voici le lien de référence.

https://github.com/roughike/BottomBar

MODIFIER les nouvelles versions.

La vue de navigation inférieure fait partie des directives de conception des matériaux depuis un certain temps, mais il n'a pas été facile pour nous de l'implémenter dans nos applications. Certaines applications ont construit leurs propres solutions, tandis que d'autres se sont appuyées sur des bibliothèques open-source tierces pour faire le travail. Maintenant, la bibliothèque de support de conception voit l'ajout de cette barre de navigation inférieure, voyons comment nous pouvons l'utiliser!

Comment utiliser ?

Pour commencer, nous devons mettre à jour notre dépendance!

compile com.android.support:design:25.0.0

Conception xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <!-- Content Container -->

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:menu="@menu/bottom_navigation_main" />

</RelativeLayout>

Créez un menu selon vos besoins.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_schedules"
        android:enabled="true"
        android:icon="@drawable/ic_access_time_white_24dp"
        android:title="@string/text_schedules"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_music"
        android:enabled="true"
        android:icon="@drawable/ic_audiotrack_white_24dp"
        android:title="@string/text_music"
        app:showAsAction="ifRoom" />
</menu>

Gestion des états Activé / Désactivé. Créez un fichier de sélection.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:state_checked="true"
      android:color="@color/colorPrimary" />
  <item
      android:state_checked="false"
      android:color="@color/grey" />
 </selector>

Gérez les événements de clic.

BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);

bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_favorites:

                        break;
                    case R.id.action_schedules:

                        break;
                    case R.id.action_music:

                        break;
                }
                return false;
            }
});

Edit: En utilisant Androidx, il vous suffit d'ajouter les dépendances ci-dessous.

implementation 'com.google.android.material:material:1.2.0-alpha01'

Disposition

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto" 
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_gravity="bottom"
            app:menu="@menu/bottom_navigation_menu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
</FrameLayout>

Si vous voulez en savoir plus sur ses méthodes et son fonctionnement, lisez ceci.

Cela vous aidera sûrement.

Jay Rathod RJ
la source
la barre inférieure de l'exemple est toujours personnalisée par vous-même, quelle que soit la manière d'utiliser la lib android d'origine. J'ai pensé que cela pourrait être dans le support lib. Ou pas encore public?
zjywill
@zjywill Ce n'est pas personnalisé, mais c'est un moyen d'utiliser la fonctionnalité officielle de la barre de navigation inférieure dans notre application. Essayez simplement ce code.
Jay Rathod RJ
1
Je ne vous suggérerais pas d'utiliser la barre inférieure Roughhike car l'API n'est pas entièrement implémentée et j'ai rencontré des problèmes de rendu. Vous ne pouvez pas changer l'icône au moment de l'exécution, et il a continué à ignorer les couleurs que j'ai définies pour l'arrière-plan des boutons.
Alon Kogan
Veuillez répondre à cette question: comment puis-je sauvegarder l'histoire
Mitul Goti
1
La réflexion java sur mShiftingMode m'a aidé! Je ne sais pas à quoi pensent-ils en n'exposant pas ce champ
Banana droid
48

Vous devez utiliser BottomNavigationView à partir de la bibliothèque de support Android v25. Il représente une barre de navigation inférieure standard pour l'application.

Voici un article sur Medium qui contient un guide étape par étape: https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.9vmiekxze

Maksim Turaev
la source
2
stackoverflow.com/questions/40153888/… bonjour maxime .. j'ai implémenté ceci, mais il
n'apparaît
@SagarChavada, vous voudrez peut-être regarder dans cet article
Maksim Turaev
5
@DroidDev, c'est parce que BottomNavigationView a été publié le jour où cette réponse a été publiée. Auparavant, seules des solutions tierces étaient disponibles.
Savez-vous si vous pouvez créer des vues personnalisées avec un adaptateur?
Radu
1
@Alan, on dirait que BottomNavigationView fait partie de la bibliothèque de support qui a un niveau d'API minimum pris en charge 9, donc je suppose que cela fonctionnera. Vous pouvez toujours le vérifier sur l'émulateur pour être sûr à 100%.
Maksim Turaev
17

Ma réponse initiale concernait le BottomNavigationView, mais maintenant il y a un BottomAppBar. J'ai ajouté une section en haut pour cela avec un lien d'implémentation.

Barre d'applications inférieure

Le BottomAppBarprend en charge un bouton d'action flottant.

entrez la description de l'image ici

Image d' ici . Consultez la documentation et ce didacticiel pour obtenir de l'aide sur la configuration du BottomAppBar.

Vue de navigation inférieure

L'exemple complet suivant montre comment rendre une vue de navigation inférieure similaire à l'image de la question. Voir aussi Navigation par le bas dans la documentation.

entrez la description de l'image ici

Ajouter la bibliothèque de support de conception

Ajoutez cette ligne au fichier build.grade de votre application à côté des autres éléments de la bibliothèque de support.

implementation 'com.android.support:design:28.0.0'

Remplacez le numéro de version par ce qui est actuel.

Créer la mise en page Activité

La seule chose spéciale que nous avons ajoutée à la mise en page est le BottomNavigationView. Pour changer la couleur de l'icône et du texte lorsque vous cliquez dessus, vous pouvez utiliser a selectorau lieu de spécifier directement la couleur. Ceci est omis par souci de simplicité ici.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_menu"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white" />

</RelativeLayout>

Notez que nous avions l'habitude layout_alignParentBottomde le mettre en bas.

Définir les éléments de menu

Le xml ci-dessus pour la vue de navigation inférieure référencée bottom_nav_menu. C'est ce qui définit chaque élément à notre avis. Nous allons le faire maintenant. Tout ce que vous avez à faire est d' ajouter une ressource de menu comme vous le feriez pour une barre d'actions ou une barre d'outils.

bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_recents"
        android:enabled="true"
        android:icon="@drawable/ic_action_recents"
        android:title="Recents"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_action_favorites"
        android:title="Favorites"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_nearby"
        android:enabled="true"
        android:icon="@drawable/ic_action_nearby"
        android:title="Nearby"
        app:showAsAction="ifRoom" />
</menu>

Vous devrez ajouter les icônes appropriées à votre projet. Ce n'est pas très difficile si vous allez dans Fichier> Nouveau> Image et choisissez Barre d'action et Icônes d'onglets comme type d'icône.

Ajouter un auditeur sélectionné par élément

Il ne se passe rien de spécial ici. Nous ajoutons simplement un auditeur à la barre de navigation inférieure dans la onCreateméthode de notre activité .

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_recents:
                        Toast.makeText(MainActivity.this, "Recents", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_favorites:
                        Toast.makeText(MainActivity.this, "Favorites", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_nearby:
                        Toast.makeText(MainActivity.this, "Nearby", Toast.LENGTH_SHORT).show();
                        break;

                }
                return true;
            }
        });
    }
}

Besoin d'aide?

J'ai appris à faire cela en regardant la vidéo YouTube suivante. La voix de l'ordinateur est un peu étrange, mais la démonstration est très claire.

Suragch
la source
16

Vous pouvez également utiliser la mise en page des onglets avec une vue par onglets personnalisée pour y parvenir.

custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingTop="8dp">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:scaleType="centerInside"
        android:src="@drawable/ic_recents_selector" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:textAllCaps="false"
        android:textColor="@color/tab_color"
        android:textSize="12sp"/>
</LinearLayout>

activity_main.xml

<?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:orientation="vertical">

    <android.support.v4.view.ViewPager

        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        style="@style/AppTabLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="?attr/colorPrimary" />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;

    private int[] mTabsIcons = {
            R.drawable.ic_recents_selector,
            R.drawable.ic_favorite_selector,
            R.drawable.ic_place_selector};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Setup the viewPager
        ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
        MyPagerAdapter pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);

        mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
        mTabLayout.setupWithViewPager(viewPager);

        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }

        mTabLayout.getTabAt(0).getCustomView().setSelected(true);
    }


    private class MyPagerAdapter extends FragmentPagerAdapter {

        public final int PAGE_COUNT = 3;

        private final String[] mTabsTitle = {"Recents", "Favorites", "Nearby"};

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

        public View getTabView(int position) {
            // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
            TextView title = (TextView) view.findViewById(R.id.title);
            title.setText(mTabsTitle[position]);
            ImageView icon = (ImageView) view.findViewById(R.id.icon);
            icon.setImageResource(mTabsIcons[position]);
            return view;
        }

        @Override
        public Fragment getItem(int pos) {
            switch (pos) {

                case 0:
                    return PageFragment.newInstance(1);

                case 1:
                    return PageFragment.newInstance(2);
                case 2:
                    return PageFragment.newInstance(3);

            }
            return null;
        }

        @Override
        public int getCount() {
            return PAGE_COUNT;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTabsTitle[position];
        }
    }

}

Télécharger un exemple de projet complet

waleedsarwar86
la source
8
Selon les directives de conception de Google, il ne faut pas utiliser un mouvement de balayage pour basculer entre les onglets. google.com/design/spec/components/…
Carl B
1
Ce serait génial si vous attribuez un crédit à l'auteur qui a écrit les comportements :)
Nikola Despotoski
13

Google a lancé le BottomNavigationView après la version 25.0.0 de la bibliothèque de support de conception. Mais il est venu avec les limitations suivantes:

  1. Vous ne pouvez pas supprimer les titres et l'icône centrale.
  2. Vous ne pouvez pas modifier la taille du texte des titres.
  3. Y̶o̶u̶ ̶c̶a̶n̶'̶t̶ ̶c̶h̶a̶n̶g̶e̶ ̶t̶h̶e̶e̶ ̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶ ̶c̶o̶o̶o̶r̶ ̶i̶t̶̶̶̶̶̶o̶r̶ ̶i̶t̶̶̶̶̶s ̶aalswa.̶̶̶̶̶
  4. Il n'a pas de BottomNavigationBehavior: donc pas d'intégration avec FAB ou SnackBar via CordinatorLayout.
  5. Chaque menuItem est une pure extension de FrameLayout, il n'a donc aucun effet de révélation de cercle

Donc, le maximum que vous pouvez faire avec cette première version de BottomNavigationView est: (sans aucune réflexion ni implémentation de la bibliothèque par vous-même).

entrez la description de l'image ici

Donc, si vous en voulez un. Vous pouvez utiliser une bibliothèque tierce comme roughike / BottomBar ou implémenter la bibliothèque vous-même.

Sanf0rd
la source
4
Pour mémoire, vous pouvez changer la couleur d'arrière-plan et vous pouvez changer la taille du texte du titre (même si j'ai trouvé d'autres problèmes avec la méthode que j'utilise). en utilisant android: background = "xxx" changera sa couleur d'arrière-plan, mais si vous spécifiez également un app:itemBackground="xxx"tous les éléments partagent cette couleur et vous ne pouvez pas voir l'arrière-plan (sauf si vous ajoutez de la transparence, mais quand même, toutes les icônes partagent la même couleur) . Très boiteux que l'équipe Android ait publié un composant aussi merdique ... toujours complet à 75%, manquant le mile supplémentaire qui le rendrait génial.
Martin Marconcini
on peut changer la couleur de fond
Steve
salut, j'utilise la même bibliothèque et ça fonctionne bien, mais ici je veux afficher uniquement les icônes sans titres au centre de la barre inférieure. c'est possible? et j'ai déjà essayé de mettre des éléments de menu vides, mais les icônes ne s'affichent toujours qu'en haut. Comment puis-je afficher uniquement les icônes sans titres au centre de la barre inférieure?
user512
salut, s'il vous plaît vérifier ma réponse pour ceci ici stackoverflow.com/questions/40183239/…
Sanf0rd
@MartinMarconcini Comment avez-vous modifié la taille du texte pour la vue de navigation inférieure?
Ponsuyambu Velladurai
10

Comme Sanf0rd l'a mentionné, Google a lancé BottomNavigationView dans le cadre de la version 25.0.0 de Design Support Library . Les limitations qu'il a mentionnées sont pour la plupart vraies, sauf que vous POUVEZ changer la couleur d'arrière-plan de la vue et même la couleur du texte et la couleur de la teinte de l'icône. Il a également une animation lorsque vous ajoutez plus de 4 éléments (malheureusement, il ne peut pas être activé ou désactivé manuellement).

J'ai écrit un tutoriel détaillé à ce sujet avec des exemples et un référentiel d'accompagnement, que vous pouvez lire ici: https://blog.autsoft.hu/now-you-can-use-the-bottom-navigation-view-in-the- bibliothèque-support-design /


L'essentiel

Vous devez les ajouter au niveau de votre application build.gradle:

compile 'com.android.support:appcompat-v7:25.0.0'  
compile 'com.android.support:design:25.0.0'

Vous pouvez l'inclure dans votre mise en page comme ceci:

<android.support.design.widget.BottomNavigationView  
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@color/darkGrey"
        app:itemIconTint="@color/bottom_navigation_item_background_colors"
        app:itemTextColor="@color/bottom_navigation_item_background_colors"
        app:menu="@menu/menu_bottom_navigation" />

Vous pouvez spécifier les éléments via une ressource de menu comme celle-ci:

<?xml version="1.0" encoding="utf-8"?>  
<menu  
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_one"
        android:icon="@android:drawable/ic_dialog_map"
        android:title="One"/>
    <item
        android:id="@+id/action_two"
        android:icon="@android:drawable/ic_dialog_info"
        android:title="Two"/>
    <item
        android:id="@+id/action_three"
        android:icon="@android:drawable/ic_dialog_email"
        android:title="Three"/>
    <item
        android:id="@+id/action_four"
        android:icon="@android:drawable/ic_popup_reminder"
        android:title="Four"/>
</menu>

Et vous pouvez définir la teinte et la couleur du texte sous forme de liste de couleurs, de sorte que l'élément actuellement sélectionné soit mis en surbrillance:

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:color="@color/colorAccent"
        android:state_checked="false"/>
    <item
        android:color="@android:color/white"
        android:state_checked="true"/>

</selector>

Enfin, vous pouvez gérer la sélection des éléments avec un OnNavigationItemSelectedListener:

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {  
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Fragment fragment = null;
        switch (item.getItemId()) {
            case R.id.action_one:
                // Switch to page one
                break;
            case R.id.action_two:
                // Switch to page two
                break;
            case R.id.action_three:
                // Switch to page three
                break;
        }
        return true;
    }
});
Balázs Gerlei
la source
1
Excellent! Suggestion - supprimez l'application: itemBackground = "@ color / darkGrey" pour obtenir un effet d'ondulation circulaire natif.
Gark
8

Autre bibliothèque alternative que vous pouvez essayer: - https://github.com/Ashok-Varma/BottomNavigation

<com.ashokvarma.bottomnavigation.BottomNavigationBar
    android:layout_gravity="bottom"
    android:id="@+id/bottom_navigation_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
                .initialise();
Ashok Varma
la source
1
Une autre bibliothèque similaire est AHBottomNavigation: github.com/aurelhubert/ahbottomnavigation
ninjahoahong
3

Je pense que cela est également utile.

Fragment

public class MainActivity : AppCompatActivity, BottomNavigationBar.Listeners.IOnTabSelectedListener
{
    private BottomBar _bottomBar;

    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        SetContentView(Resource.Layout.MainActivity);

        _bottomBar = BottomBar.Attach(this, bundle);
        _bottomBar.SetItems(
            new BottomBarTab(Resource.Drawable.ic_recents, "Recents"),
            new BottomBarTab(Resource.Drawable.ic_favorites, "Favorites"),
            new BottomBarTab(Resource.Drawable.ic_nearby, "Nearby")
        );
        _bottomBar.SetOnItemSelectedListener(this);
        _bottomBar.HideShadow();
        _bottomBar.UseDarkTheme(true);
        _bottomBar.SetTypeFace("Roboto-Regular.ttf");

        var badge = _bottomBar.MakeBadgeForTabAt(1, Color.ParseColor("#f02d4c"), 1);
        badge.AutoShowAfterUnSelection = true;
    }

    public void OnItemSelected(int position)
    {

    }

    protected override void OnSaveInstanceState(Bundle outState)
    {
        base.OnSaveInstanceState(outState);

        // Necessary to restore the BottomBar's state, otherwise we would
        // lose the current tab on orientation change.
        _bottomBar.OnSaveInstanceState(outState);
    }
}

Liens

https://github.com/pocheshire/BottomNavigationBar

C'est https://github.com/roughike/BottomBar porté en C # pour les développeurs Xamarin

Pocheshire
la source
3

J'ai créé une classe privée qui utilise une grille et une ressource de menu:

private class BottomBar {

    private GridView mGridView;
    private Menu     mMenu;
    private BottomBarAdapter mBottomBarAdapter;
    private View.OnClickListener mOnClickListener;

    public BottomBar (@IdRes int gridviewId, @MenuRes int menuRes,View.OnClickListener onClickListener) {
        this.mGridView = (GridView) findViewById(gridviewId);
        this.mMenu = getMenu(menuRes);
        this.mOnClickListener = onClickListener;

        this.mBottomBarAdapter = new BottomBarAdapter();
        this.mGridView.setAdapter(mBottomBarAdapter);
    }

    private Menu getMenu(@MenuRes int menuId) {
        PopupMenu p = new PopupMenu(MainActivity.this,null);
        Menu menu = p.getMenu();
        getMenuInflater().inflate(menuId,menu);
        return menu;
    }

    public GridView getGridView(){
        return mGridView;
    }

    public void show() {
        mGridView.setVisibility(View.VISIBLE);
        mGridView.animate().translationY(0);
    }

    public void hide() {
        mGridView.animate().translationY(mGridView.getHeight());
    }



    private class BottomBarAdapter extends BaseAdapter {

        private LayoutInflater    mInflater;

        public BottomBarAdapter(){
            this.mInflater = LayoutInflater.from(MainActivity.this);
        }

        @Override
        public int getCount() {
            return mMenu.size();
        }

        @Override
        public Object getItem(int i) {
            return mMenu.getItem(i);
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {

            MenuItem item = (MenuItem) getItem(i);

            if (view==null){
                view = mInflater.inflate(R.layout.your_item_layout,null);
                view.setId(item.getItemId());
            }

            view.setOnClickListener(mOnClickListener);
            view.findViewById(R.id.bottomnav_icon).setBackground(item.getIcon());
            ((TextView) view.findViewById(R.id.bottomnav_label)).setText(item.getTitle());

            return view;
        }
    }

votre_menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/item1_id"
        android:icon="@drawable/ic_item1"
        android:title="@string/title_item1"/>
    <item android:id="@+id/item2_id"
        android:icon="@drawable/ic_item2"
        android:title="@string/title_item2"/>
    ...
</menu>

et un élément de mise en page personnalisé your_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_margin="16dp">
    <ImageButton android:id="@+id/bottomnav_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="4dp"/>
    <TextView android:id="@+id/bottomnav_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="4dp"
        style="@style/mystyle_label" />
</LinearLayout>

utilisation dans votre activité principale:

BottomBar bottomBar = new BottomBar(R.id.YourGridView,R.menu.your_menu, mOnClickListener);

et

private View.OnClickListener mOnClickListener = new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.item1_id:
                //todo item1
                break;
            case R.id.item2_id:
                //todo item2
                break;
            ...
        }
    }
}

et dans layout_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    ...
    <FrameLayout android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <GridView android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/your_background_color"
        android:verticalSpacing="0dp"
        android:horizontalSpacing="0dp"
        android:numColumns="4"
        android:stretchMode="columnWidth"
        app:layout_anchor="@id/fragment_container"
        app:layout_anchorGravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>
G Dias
la source
3

Il existe un nouveau BottomNavigationView officiel dans la version 25 de la bibliothèque de support de conception

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html ajouter dans gradle compile 'com.android.support:design:25.0.0'

XML

<android.support.design.widget.BottomNavigationView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:design="http://schema.android.com/apk/res/android.support.design"
    android:id="@+id/navigation"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    design:menu="@menu/my_navigation_items" />
Mrk_Slk
la source
1

Cette bibliothèque, BottomNavigationViewEx , étend BottomNavigationView de Google. Vous pouvez facilement personnaliser la bibliothèque de Google pour avoir la barre de navigation inférieure comme vous le souhaitez. Vous pouvez désactiver le mode de décalage, modifier la visibilité des icônes et des textes et bien plus encore. Essayez-le vraiment.

Anky An
la source
0

J'ai fait référence à ce post github et j'ai défini les pages three layoutspour three fragmentdans la barre d'onglets inférieure.

FourButtonsActivity.java:

bottomBar.setFragmentItems(getSupportFragmentManager(), R.id.fragmentContainer,
            new BottomBarFragment(LibraryFragment.newInstance(R.layout.library_fragment_layout), R.drawable.ic_update_white_24dp, "Recents"),
            new BottomBarFragment(PhotoEffectFragment.newInstance(R.layout.photo_effect_fragment), R.drawable.ic_local_dining_white_24dp, "Food"),
            new BottomBarFragment(VideoFragment.newInstance(R.layout.video_layout), R.drawable.ic_favorite_white_24dp, "Favorites")

    );

Pour définir le nombre de badges:

  BottomBarBadge unreadMessages = bottomBar.makeBadgeForTabAt(1, "#E91E63", 4);
  unreadMessages.show();
  unreadMessages.setCount(4);
  unreadMessages.setAnimationDuration(200);
  unreadMessages.setAutoShowAfterUnSelection(true);

LibraryFragment.java:

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class LibraryFragment extends Fragment {
    private static final String STARTING_TEXT = "Four Buttons Bottom Navigation";

    public LibraryFragment() {
    }

    public static LibraryFragment newInstance(int resource) {
        Bundle args = new Bundle();
        args.putInt(STARTING_TEXT, resource);

        LibraryFragment sampleFragment = new LibraryFragment();
        sampleFragment.setArguments(args);

        return sampleFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {


        View view = LayoutInflater.from(getActivity()).inflate(
                getArguments().getInt(STARTING_TEXT), null);
        return view;


    }
Steve
la source
0

Vous pouvez créer les mises en page selon les réponses mentionnées ci-dessus Si quelqu'un veut utiliser cela dans kotlin: -

 private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.images -> {
          // do your work....
            return@OnNavigationItemSelectedListener true
        }
       R.id.videos ->
         {
          // do your work....
            return@OnNavigationItemSelectedListener true
        }
    }
    false
}

puis dans oncreate, vous pouvez définir l'auditeur ci-dessus à votre vue

   mDataBinding?.navigation?.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
Rohan Sharma
la source
-1
<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/navigation" />

navigation.xml (menu intérieur)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home"
        app:showAsAction="always|withText"
        android:enabled="true"/>

onCreate()Méthode intérieure ,

BottomNavigationView navigation = (BottomNavigationView)findViewById(R.id.navigation);
//Dont forgot this line     
BottomNavigationViewHelper.disableShiftMode(navigation);

Et créez une classe comme ci-dessous.

public class BottomNavigationViewHelper {
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}
Kishore Reddy
la source