Android neue untere Navigationsleiste oder BottomNavigationView


133

Sah, dass die neue Richtlinie herauskam und in der google photosneuesten App verwendet wurde. Sie haben keine Ahnung, wie Sie die neue untere Navigationsleiste verwenden sollen. Sehen Sie sich die neue Support-Bibliothek an und finden Sie keinen Hinweis.

Geben Sie hier die Bildbeschreibung ein

Kann keine offizielle Probe finden.

Wie benutze ich die neue untere Leiste? Ich möchte keine Anpassungen vornehmen.



Sie können einen Blick auf meine Antwort werfen
Prashant

Antworten:


175

Ich denke, Sie könnten danach suchen.

Hier ist ein kurzer Ausschnitt, um loszulegen:

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);
    }
}

Hier ist ein Referenzlink.

https://github.com/roughike/BottomBar

EDIT New Releases.

Die untere Navigationsansicht ist seit einiger Zeit in den Richtlinien für das Materialdesign enthalten, aber es war für uns nicht einfach, sie in unsere Apps zu implementieren. Einige Anwendungen haben ihre eigenen Lösungen entwickelt, während andere sich auf Open-Source-Bibliotheken von Drittanbietern verlassen haben, um die Aufgabe zu erledigen. Jetzt wird in der Design-Support-Bibliothek diese untere Navigationsleiste hinzugefügt. Lassen Sie uns einen Blick darauf werfen, wie wir sie verwenden können!

Wie benutzt man ?

Zunächst müssen wir unsere Abhängigkeit aktualisieren!

compile com.android.support:design:25.0.0

Design 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>

Erstellen Sie ein Menü gemäß Ihren Anforderungen.

<?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>

Behandlung von aktivierten / deaktivierten Zuständen. Auswahldatei erstellen.

<?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>

Klickereignisse behandeln.

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;
            }
});

Bearbeiten: Mit Androidx müssen Sie nur die folgenden Abhängigkeiten hinzufügen.

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

Layout

<?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>

Wenn Sie mehr über die Methoden und die Funktionsweise erfahren möchten, lesen Sie diese.

Sicher wird es Ihnen helfen.


Die untere Leiste im Beispiel kann immer noch von Ihnen selbst angepasst werden, um origin android lib zu verwenden. Ich dachte es könnte in der Support-Bibliothek sein. Oder noch nicht öffentlich?
zjywill

@zjywill Es ist nicht angepasst, aber es ist eine Möglichkeit, die offizielle Funktionalität der unteren Navigationsleiste in unserer App zu nutzen. Probieren Sie einfach diesen Code aus.
Jay Rathod RJ

1
Ich würde Ihnen nicht empfehlen, die untere Balkenleiste zu verwenden, da die API nicht vollständig implementiert ist und ich auf Renderprobleme gestoßen bin. Sie können das Symbol zur Laufzeit nicht ändern, und die Farben, die ich für den Hintergrund der Schaltflächen festgelegt habe, wurden weiterhin ignoriert.
Alon Kogan

Bitte antworten Sie, wie kann ich Geschichte speichern
Mitul Goti

1
Die Java-Reflexion über mShiftingMode hat mir geholfen! Ich weiß nicht, was sie denken, wenn sie dieses Feld nicht aussetzen
Bananendroide

48

Sie sollten BottomNavigationView aus der Android Support Library v25 verwenden. Es stellt eine standardmäßige untere Navigationsleiste für die Anwendung dar.

Hier ist ein Beitrag auf Medium, der eine Schritt-für-Schritt-Anleitung enthält: https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.9vmiekxze


2
stackoverflow.com/questions/40153888/… hallo maxim .. ich habe dies implementiert, aber es wird nicht
angezeigt

@SagarChavada Sie möchten vielleicht in diesem Beitrag
Maksim Turaev

5
@DroidDev, weil BottomNavigationView an dem Tag veröffentlicht wurde, an dem diese Antwort veröffentlicht wurde. Zuvor waren nur Lösungen von Drittanbietern verfügbar.

Wissen Sie, ob Sie benutzerdefinierte Ansichten mit einem Adapter erstellen können?
Radu

1
@Alan, sieht so aus, als ob BottomNavigationView ein Teil der Support Library ist, die mindestens API Level 9 unterstützt, also denke ich, dass es funktionieren wird. Sie können es immer noch auf dem Emulator überprüfen, um 100% sicher zu sein.
Maksim Turaev

17

Meine ursprüngliche Antwort befasste sich mit dem BottomNavigationView, aber jetzt gibt es eine BottomAppBar. Ich habe oben einen Abschnitt mit einem Implementierungslink hinzugefügt.

Untere App-Leiste

Das BottomAppBarunterstützt einen Floating Action Button.

Geben Sie hier die Bildbeschreibung ein

Bild von hier . In der Dokumentation und in diesem Tutorial finden Sie Hilfe beim Einrichten von BottomAppBar.

Unten Navigationsansicht

Das folgende vollständige Beispiel zeigt, wie Sie eine untere Navigationsansicht ähnlich dem Bild in der Frage erstellen. Siehe auch Bottom Navigation in der Dokumentation.

Geben Sie hier die Bildbeschreibung ein

Fügen Sie die Designunterstützungsbibliothek hinzu

Fügen Sie diese Zeile der build.grade- Datei Ihrer App neben den anderen Dingen der Support-Bibliothek hinzu.

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

Ersetzen Sie die Versionsnummer durch die aktuelle.

Erstellen Sie das Aktivitätslayout

Das einzige Besondere, das wir dem Layout hinzugefügt haben, ist das BottomNavigationView. Um die Farbe des Symbols und des Texts beim Klicken zu ändern, können Sie a verwenden, selectoranstatt die Farbe direkt anzugeben. Dies ist hier der Einfachheit halber weggelassen.

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>

Beachten Sie, dass wir es früher ganz layout_alignParentBottomunten platziert haben.

Definieren Sie die Menüpunkte

Die XML oben für die untere Navigationsansicht, auf die verwiesen wird bottom_nav_menu. Dies ist es, was aus unserer Sicht jeden Artikel definiert. Wir werden es jetzt schaffen. Sie müssen lediglich eine Menüressource hinzufügen, wie Sie es für eine Aktionsleiste oder Symbolleiste tun würden.

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>

Sie müssen Ihrem Projekt die entsprechenden Symbole hinzufügen. Dies ist nicht sehr schwierig, wenn Sie zu Datei> Neu> Bildelement gehen und als Symboltyp Aktionsleiste und Registerkartensymbole auswählen .

Fügen Sie einen ausgewählten Listener hinzu

Hier passiert nichts Besonderes. Wir fügen der unteren Navigationsleiste in der onCreateMethode unserer Aktivität nur einen Listener hinzu .

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;
            }
        });
    }
}

Benötigen Sie weitere Hilfe?

Wie das geht, habe ich im folgenden YouTube-Video gelernt. Die Computerstimme ist etwas seltsam, aber die Demonstration ist sehr klar.


16

Sie können dazu auch das Registerkartenlayout mit benutzerdefinierter Registerkartenansicht verwenden.

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];
        }
    }

}

Laden Sie das vollständige Beispielprojekt herunter


8
Gemäß den Designrichtlinien von Google sollte keine Wischbewegung zum Wechseln zwischen Registerkarten verwendet werden. google.com/design/spec/components/…
Carl B

1
Wäre großartig, wenn Sie dem Autor, der die Verhaltensweisen geschrieben hat, eine Gutschrift geben würden :)
Nikola Despotoski

13

Google hat BottomNavigationView nach der Version 25.0.0 der Design Support Library gestartet. Es gab jedoch folgende Einschränkungen:

  1. Sie können Titel und das mittlere Symbol nicht entfernen.
  2. Sie können die Textgröße von Titeln nicht ändern.
  3. Y̶o̶u̶ ̶c̶a̶n̶'̶t̶ ̶c̶h̶a̶n̶g̶e̶ ̶t̶h̶e̶ ̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶ ̶c̶o̶l̶o̶r̶ ̶i̶t̶ ̶i̶̶̶
  4. Es hat kein BottomNavigationBehavior: also keine Integration mit FAB oder SnackBar über CordinatorLayout.
  5. Jedes menuItem ist eine reine Erweiterung von FrameLayout, sodass es keinen schönen Kreis-Enthüllungseffekt hat

Das Maximum, das Sie mit dieser ersten Version von BottomNavigationView tun können, ist: (ohne Reflexion oder Implementierung der Bibliothek selbst).

Geben Sie hier die Bildbeschreibung ein

Also, wenn Sie eines davon wollen. Sie können eine Drittteilbibliothek wie Roughike / BottomBar verwenden oder die Bibliothek selbst implementieren.


4
Nur für den Datensatz können Sie die Hintergrundfarbe und die Titeltextgröße ändern (obwohl ich andere Probleme mit der von mir verwendeten Methode festgestellt habe). Wenn Sie android: background = "xxx" verwenden, ändert sich die Hintergrundfarbe. Wenn Sie jedoch auch eine angeben, haben app:itemBackground="xxx"alle Elemente diese Farbe gemeinsam und Sie können den Hintergrund nicht sehen (es sei denn, Sie fügen Transparenz hinzu, aber dennoch haben alle Symbole dieselbe Farbe). . Sehr lahm, dass das Android-Team eine so beschissene Komponente veröffentlicht hat… immer zu 75% fertig, ohne die Extrameile, die es großartig machen würde.
Martin Marconcini

Wir können die Hintergrundfarbe ändern
Steve

Hallo, ich verwende dieselbe Bibliothek und sie funktioniert einwandfrei, aber hier möchte ich nur Symbole ohne Titel in der Mitte der unteren Leiste anzeigen. ist es möglich? und ich habe bereits versucht, leere Menüpunkte einzufügen, aber es werden immer noch nur Symbole oben angezeigt. Wie kann ich nur Symbole ohne Titel in der Mitte der unteren Leiste anzeigen?
Benutzer512

Hallo, bitte überprüfen Sie meine Antwort auf diese hier stackoverflow.com/questions/40183239/…
Sanf0rd

@MartinMarconcini Wie haben Sie die Textgröße für die untere Navigationsansicht geändert?
Ponsuyambu Velladurai

10

Wie von Sanf0rd erwähnt, hat Google BottomNavigationView als Teil der Design Support Library Version 25.0.0 gestartet . Die von ihm erwähnten Einschränkungen sind größtenteils zutreffend, außer dass Sie die Hintergrundfarbe der Ansicht und sogar die Textfarbe und die Symboltönungsfarbe ändern können. Es hat auch eine Animation, wenn Sie mehr als 4 Elemente hinzufügen (leider kann es nicht manuell aktiviert oder deaktiviert werden).

Ich habe ein ausführliches Tutorial darüber mit Beispielen und einem zugehörigen Repository geschrieben, das Sie hier lesen können: https://blog.autsoft.hu/now-you-can-use-the-bottom-navigation-view-in-the- Design-Support-Bibliothek /


Das Wesentliche davon

Sie müssen diese in Ihrer App-Ebene hinzufügen build.gradle:

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

Sie können es wie folgt in Ihr Layout aufnehmen:

<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" />

Sie können die Elemente über eine Menüressource wie folgt angeben:

<?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>

Sie können den Farbton und die Textfarbe als Farbliste festlegen, sodass das aktuell ausgewählte Element hervorgehoben wird:

<?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>

Schließlich können Sie die Auswahl der Elemente mit einem OnNavigationItemSelectedListener durchführen:

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;
    }
});

1
Ausgezeichnet! Vorschlag - App entfernen: itemBackground = "@ color / darkGrey", um einen nativen kreisförmigen Welleneffekt zu erzielen.
Gark

8

Andere alternative Bibliotheken, die Sie ausprobieren können: - 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();

1
Eine andere ähnliche Bibliothek ist AHBottomNavigation: github.com/aurelhubert/ahbottomnavigation
ninjahoahong

3

Ich denke, das ist auch nützlich.

Snippet

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);
    }
}

Links

https://github.com/pocheshire/BottomNavigationBar

Es ist https://github.com/roughike/BottomBar, portiert auf C # für Xamarin-Entwickler


3

Ich habe eine private Klasse erstellt, die eine Rasteransicht und eine Menüressource verwendet:

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;
        }
    }

your_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>

und ein benutzerdefiniertes Layoutelement 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>

Verwendung innerhalb Ihrer Hauptaktivität:

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

und

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;
            ...
        }
    }
}

und in 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>

3

In Version 25 der Design Support Library gibt es eine neue offizielle BottomNavigationView

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html in gradle hinzufügen 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" />

1

Diese Bibliothek, BottomNavigationViewEx , erweitert Googles BottomNavigationView. Sie können die Google-Bibliothek ganz einfach so anpassen, dass die untere Navigationsleiste so angezeigt wird, wie Sie es möchten. Sie können den Schaltmodus deaktivieren, die Sichtbarkeit der Symbole und Texte ändern und vieles mehr. Probieren Sie es auf jeden Fall aus.


0

Ich habe auf diesen Github-Beitrag verwiesen und die three layoutsfor- three fragmentSeiten in der unteren Registerkartenleiste festgelegt.

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")

    );

So stellen Sie die Anzahl der Ausweise ein:

  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;


    }

0

Sie können die Layouts gemäß den oben genannten Antworten erstellen. Wenn jemand dies in Kotlin verwenden möchte: -

 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
}

Dann können Sie in oncreate den obigen Listener auf Ihre Ansicht einstellen

   mDataBinding?.navigation?.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

-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 (im Menü)

<?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"/>

Inside onCreate()Methode,

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

Und Klasse wie unten erstellen.

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);
        }
    }
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.