Android nowy dolny pasek nawigacyjny lub BottomNavigationView

134

Zobaczyłem nowe wytyczne i zostały użyte w google photosnajnowszej aplikacji. Nie mam pojęcia, jak używać nowego dolnego paska nawigacyjnego. Przejrzyj nową bibliotekę pomocy, nie znalazłem żadnego kontaktu.

wprowadź opis obrazu tutaj

Nie mogę znaleźć żadnej oficjalnej próbki.

Jak korzystać z nowego dolnego paska? Nie chcę dostosowywać.

zjywill
źródło
Możesz spojrzeć na moją odpowiedź: stackoverflow.com/a/44967021/2412582
Prashant

Odpowiedzi:

177

Myślę, że możesz tego szukać.

Oto krótki opis, aby rozpocząć:

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

Oto link referencyjny.

https://github.com/roughike/BottomBar

EDYTUJ nowe wydania.

Widok nawigacji u dołu od jakiegoś czasu znajduje się w wytycznych dotyczących projektowania materiałów, ale nie było nam łatwo wdrożyć go w naszych aplikacjach. Niektóre aplikacje zbudowały własne rozwiązania, podczas gdy inne polegały na bibliotekach open source innych firm, aby wykonać zadanie. Teraz w bibliotece wsparcia projektowania pojawia się dolny pasek nawigacji, przyjrzyjmy się, jak możemy go używać!

Jak używać ?

Na początek musimy zaktualizować naszą zależność!

compilecom.android.support:design:25.0.0

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

Utwórz menu zgodnie z wymaganiami.

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

Obsługa stanów Włączony / Wyłączony. Utwórz plik selektora.

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

Obsługa zdarzeń kliknięcia.

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

Edycja: Używając Androidx, wystarczy dodać poniższe zależności.

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

Układ

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

Jeśli chcesz dowiedzieć się więcej o jego metodach i sposobie działania, przeczytaj to.

Na pewno ci to pomoże.

Jay Rathod RJ
źródło
dolny pasek w próbce nadal można dostosować samodzielnie, w dowolny sposób, aby użyć pochodzenia android lib. Pomyślałem, że może to znaleźć się w bibliotece pomocy. Albo jeszcze nie publiczne?
zjywill
@zjywill To nie jest dostosowane, ale jest to sposób na użycie funkcji oficjalnego dolnego paska nawigacji w naszej aplikacji. Po prostu wypróbuj ten kod.
Jay Rathod RJ
1
Nie sugerowałbym używania dolnego paska roughhike, ponieważ API nie jest w pełni zaimplementowane i napotkałem problemy z renderowaniem. Nie możesz zmienić ikony w czasie wykonywania i ignorowała kolory, które ustawiłem dla tła przycisków.
Alon Kogan
Proszę, odpowiedz, jak mogę ocalić historię
Mitul Goti,
1
Pomogła mi refleksja w Javie na mShiftingMode! Nie wiem, co myślą, nie ujawniając tego pola
Droid bananowy,
48

Należy użyć BottomNavigationView z biblioteki obsługi systemu Android w wersji 25. Reprezentuje standardowy dolny pasek nawigacyjny aplikacji.

Oto post na Medium z przewodnikiem krok po kroku: https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.9vmiekxze

Maksim Turaev
źródło
2
stackoverflow.com/questions/40153888/ ... witaj, maksym ... zaimplementowałem to, ale się nie pojawia ..
Sagar Chavada
@SagarChavada, może zechcesz zajrzeć w tym poście
Maksim Turaev
5
@DroidDev to dlatego, że BottomNavigationView zostało wydane w dniu opublikowania tej odpowiedzi. Wcześniej dostępne były tylko rozwiązania innych firm.
Czy wiesz, czy możesz tworzyć niestandardowe widoki za pomocą adaptera?
Radu
1
@Alan, wygląda na to, że BottomNavigationView jest częścią biblioteki wsparcia, która ma co najmniej obsługiwany poziom API 9, więc myślę, że będzie działać. Nadal możesz to sprawdzić na emulatorze, aby mieć 100% pewności.
Maksim Turaev
20

Moja pierwotna odpowiedź dotyczyła BottomNavigationView, ale teraz jest BottomAppBar. Na górze dodałem sekcję z linkiem do implementacji.

Dolny pasek aplikacji

BottomAppBarObsługuje przycisk Pływający działania.

wprowadź opis obrazu tutaj

Zdjęcie stąd . Zobacz dokumentację i ten samouczek, aby uzyskać pomoc dotyczącą konfigurowania BottomAppBar.

Dolny widok nawigacji

Poniższy pełny przykład pokazuje, jak utworzyć dolny widok nawigacji podobny do obrazu w pytaniu. Zobacz także Nawigacja u dołu w dokumentacji.

wprowadź opis obrazu tutaj

Dodaj bibliotekę wsparcia projektowania

Dodaj tę linię do pliku build.grade swojej aplikacji obok innych elementów biblioteki obsługi.

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

Zastąp numer wersji tym, który jest aktualny.

Utwórz układ działania

Jedyną specjalną rzeczą, którą dodaliśmy do układu, jest BottomNavigationView. Aby zmienić kolor ikony i tekstu po kliknięciu, możesz użyć a selectorzamiast bezpośredniego określania koloru. Zostało to pominięte dla uproszczenia.

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>

Zwróć uwagę, że layout_alignParentBottomfaktycznie umieszczaliśmy go na dole.

Zdefiniuj pozycje menu

XML powyżej dla widoku nawigacji dolnej, do którego się odwołano bottom_nav_menu. To właśnie definiuje każdy element z naszego punktu widzenia. Zrobimy to teraz. Wszystko, co musisz zrobić, to dodać zasób menu, tak jak w przypadku paska akcji lub paska narzędzi.

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>

Będziesz musiał dodać odpowiednie ikony do swojego projektu. Nie jest to zbyt trudne, jeśli przejdziesz do Plik> Nowy> Zasób obrazu i wybierzesz Pasek akcji i ikony kart jako typ ikony.

Dodaj odbiornik wybranego elementu

Nie dzieje się tu nic specjalnego. Po prostu dodajemy odbiornik do dolnego paska nawigacyjnego w onCreatemetodzie naszego działania .

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

Potrzebujesz więcej pomocy?

Nauczyłem się, jak to zrobić, oglądając następujący film na YouTube. Głos komputera jest trochę dziwny, ale demonstracja jest bardzo wyraźna.

Suragch
źródło
16

Aby to osiągnąć, możesz również użyć układu karty z niestandardowym widokiem karty.

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

}

Pobierz kompletny przykładowy projekt

waleedsarwar86
źródło
8
Zgodnie z wytycznymi projektowymi Google do przełączania się między kartami nie należy przesuwać palcem. google.com/design/spec/components/…
Carl B
1
Byłoby wspaniale, gdybyś
wskazał
13

Firma Google uruchomiła BottomNavigationView po wersji 25.0.0 biblioteki obsługi projektowania. Ale przyszedł z następującymi ograniczeniami:

  1. Nie możesz usunąć tytułów ani ikony środkowej.
  2. Nie możesz zmienić rozmiaru tekstu tytułów.
  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̶s̶ ̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶ ̶c̶o̶l̶o̶r̶ ̶i̶t̶ ̶i̶s̶ ̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶ ̶c̶o̶l̶o̶r̶ ̶i̶t̶ ̶i̶s̶ ̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶ ̶c̶o̶l̶o̶r̶ ̶i̶t̶ ̶i̶s̶ ̶b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶ ̶c̶o̶l̶o̶r̶ ̶i̶t̶ ̶i̶s̶ ̶a̶l̶swe ̶yror
  4. Nie ma BottomNavigationBehavior: więc nie ma integracji z FAB lub SnackBar przez CordinatorLayout.
  5. Każde menuItem jest czystym rozszerzeniem FrameLayout, więc nie ma żadnego ładnego efektu ujawnienia koła

Więc maksimum, które możesz zrobić z tą pierwszą wersją BottomNavigationView, to: (bez żadnej refleksji lub samodzielnego implementowania biblioteki).

wprowadź opis obrazu tutaj

Więc jeśli chcesz którekolwiek z nich. Możesz użyć biblioteki trzeciej części, takiej jak roughike / BottomBar, lub zaimplementować bibliotekę samodzielnie.

Sanf0rd
źródło
4
Tak dla przypomnienia, możesz zmienić kolor tła i rozmiar tekstu tytułu (chociaż znalazłem inne problemy z metodą, której używam). użycie android: background = "xxx" zmieni kolor tła, ale jeśli określisz również app:itemBackground="xxx"wszystkie elementy w tym kolorze i nie zobaczysz tła (chyba że dodasz przezroczystość, ale nadal wszystkie ikony mają ten sam kolor) . Bardzo kiepskie, że zespół Androida wypuścił tak kiepski komponent… zawsze ukończony w 75%, pomijając dodatkowy kilometr, który sprawiłby, że byłby świetny.
Martin Marconcini
możemy zmienić kolor tła
Steve
Cześć, używam tej samej biblioteki i działa dobrze, ale tutaj chcę wyświetlać tylko ikony bez tytułów na środku dolnego paska. Czy to możliwe? i już próbowałem umieścić puste pozycje w menu, ale nadal ikony są wyświetlane tylko na górze. jak mogę wyświetlać tylko ikony bez tytułów na środku dolnego paska?
user512
cześć, proszę sprawdzić moją odpowiedź tutaj stackoverflow.com/questions/40183239/…
Sanf0rd
@MartinMarconcini Jak zmieniłeś rozmiar tekstu w dolnym widoku nawigacji?
Ponsuyambu Velladurai
10

Jak wspomniał Sanf0rd, Google uruchomił BottomNavigationView jako część biblioteki Design Support Library w wersji 25.0.0 . Ograniczenia, o których wspomniał, są w większości prawdziwe, z wyjątkiem tego, że MOŻESZ zmienić kolor tła widoku, a nawet kolor tekstu i odcień ikon. Ma również animację, gdy dodajesz więcej niż 4 elementy (niestety nie można jej włączyć ani wyłączyć ręcznie).

Napisałem na ten temat szczegółowy samouczek z przykładami i towarzyszącym im repozytorium, które możesz przeczytać tutaj: https://blog.autsoft.hu/now-you-can-use-the-bottom-navigation-view-in-the- biblioteka-wsparcia-projektowania /


Istota tego

Musisz dodać je na poziomie swojej aplikacji build.gradle:

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

Możesz umieścić go w swoim układzie w następujący sposób:

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

Możesz określić elementy za pomocą zasobu menu, takiego jak:

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

Możesz także ustawić odcień i kolor tekstu jako listę kolorów, aby aktualnie wybrany element był podświetlony:

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

Na koniec możesz obsłużyć wybór elementów za pomocą 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
źródło
1
Świetny! Sugestia - usuń aplikację: itemBackground = "@ color / darkGrey", aby uzyskać natywny cykliczny efekt tętnienia.
Gark
8

Inna alternatywna biblioteka, którą możesz wypróbować: - 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
źródło
1
Inną podobną biblioteką jest AHBottomNavigation: github.com/aurelhubert/ahbottomnavigation
ninjahoahong
3

Myślę, że to też się przyda.

Skrawek

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

Spinki do mankietów

https://github.com/pocheshire/BottomNavigationBar

Jest https://github.com/roughike/BottomBar przeniesiony do C # dla deweloperów platformy Xamarin

Pocheshire
źródło
3

stworzyłem prywatne zajęcia, które używają widoku siatki i zasobu 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;
        }
    }

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

oraz element układu niestandardowego 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>

użycie w ramach Twojej głównej aktywności:

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

i

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

oraz w 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
źródło
3

Dostępna jest nowa oficjalna funkcja BottomNavigationView w wersji 25 biblioteki Design Support Library

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html dodaj w 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
źródło
1

Ta biblioteka, BottomNavigationViewEx , rozszerza BottomNavigationView firmy Google. Możesz łatwo dostosować bibliotekę Google, aby dolny pasek nawigacyjny był taki, jak chcesz. Możesz wyłączyć tryb zmiany biegów, zmienić widoczność ikon i tekstów i wiele więcej. Zdecydowanie wypróbuj to.

Anky An
źródło
0

Odniosłem się do tego posta na githubie i ustawiłem three layoutsdla three fragmentstron na dolnym pasku zakładek.

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

    );

Aby ustawić liczbę odznak:

  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
źródło
0

Możesz tworzyć układy zgodnie z powyższymi odpowiedziami Jeśli ktoś chce użyć tego w kotlinie: -

 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
}

następnie w oncreate możesz ustawić powyższy słuchacz do swojego widoku

   mDataBinding?.navigation?.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
Rohan Sharma
źródło
-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 (wewnątrz menu)

<?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()Metoda wewnętrzna ,

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

I stwórz klasę jak poniżej.

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
źródło