Новая нижняя панель навигации Android или BottomNavigationView

133

Видел, что новое руководство вышло и использовалось в google photosпоследнем приложении. Понятия не имею, как использовать новую нижнюю панель навигации. Просмотрите новую библиотеку поддержки, не нашел никаких подсказок.

введите описание изображения здесь

Не могу найти ни одного официального образца.

Как использовать новую нижнюю панель? Не хочу ничего настраивать.

zjywill
источник
посетите это: stackoverflow.com/questions/36019986/…
Fartab
Вы можете взглянуть на мой ответ: stackoverflow.com/a/44967021/2412582
Prashant
Обратитесь к stackoverflow.com/a/49031168/2468324
Анкит Бишт

Ответы:

175

Думаю, вы можете это найти.

Вот небольшой фрагмент для начала:

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

Вот справочная ссылка.

https://github.com/roughike/BottomBar

ИЗМЕНИТЬ новые выпуски.

Вид нижней навигации уже некоторое время присутствует в рекомендациях по материальному дизайну, но нам было нелегко реализовать его в наших приложениях. Некоторые приложения создали свои собственные решения, в то время как другие полагались на сторонние библиотеки с открытым исходным кодом для выполнения своей работы. Теперь библиотека поддержки дизайна видит добавление этой нижней панели навигации, давайте рассмотрим, как мы можем ее использовать!

Как пользоваться ?

Для начала нам нужно обновить нашу зависимость!

compile com.android.support:design:25.0.0

Дизайн 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>

Создайте меню в соответствии с вашими требованиями.

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

Обработка включенных / отключенных состояний. Сделайте селекторный файл.

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

Обработка событий щелчка.

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

Изменить: используя Androidx, вам просто нужно добавить ниже зависимости.

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

раскладка

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

Если вы хотите узнать больше о методах и принципах работы, прочтите это.

Наверняка вам это поможет.

Джей Ратод RJ
источник
нижняя панель в образце по-прежнему настраивается вами самостоятельно, при любом использовании origin android lib. Я думал, что это может быть в поддержке lib. Или еще не публично?
zjywill
@zjywill Это не настраивается, но это способ использования официальных функций нижней панели навигации в нашем приложении. Просто попробуйте этот код.
Jay Rathod RJ
1
Я бы не предлагал вам использовать нижнюю панель Roughhike, поскольку API не полностью реализован и я столкнулся с проблемами рендеринга. Вы не можете изменить значок во время выполнения, и он продолжал игнорировать цвета, которые я установил для фона кнопок.
Алон Коган
Пожалуйста, ответьте, как я могу сохранить историю
Митул Готи,
1
Мне помогло отражение java в mShiftingMode! Я не знаю, что они думают, не открывая это поле
Банановый дроид
48

Вы должны использовать BottomNavigationView из библиотеки поддержки Android v25. Он представляет собой стандартную нижнюю панель навигации для приложения.

Вот сообщение на Medium с пошаговым руководством: https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.9vmiekxze

Максим Тураев
источник
2
stackoverflow.com/questions/40153888/… привет, максим .. я реализовал это, но он не отображается ..
Сагар Чавада
@SagarChavada, возможно, вы захотите посмотреть в этом посте
Максим Тураев
5
@DroidDev, потому что BottomNavigationView был выпущен в день публикации этого ответа. До этого были доступны только сторонние решения.
Знаете ли вы, можно ли создавать пользовательские представления с помощью адаптера?
Radu
1
@Alan, похоже, BottomNavigationView является частью библиотеки поддержки, которая имеет минимальный поддерживаемый уровень API 9, поэтому я думаю, это сработает. Вы все еще можете проверить это на эмуляторе, чтобы быть уверенным на 100%.
Максим Тураев
17

В моем первоначальном ответе речь шла о BottomNavigationView, но теперь есть BottomAppBar. Я добавил для этого раздел вверху со ссылкой на реализацию.

Нижний App Bar

BottomAppBarПоддерживает кнопку Floating действий.

введите описание изображения здесь

Изображение отсюда . См. Документацию и это руководство для помощи в настройке BottomAppBar.

Нижняя навигация

В следующем полном примере показано, как сделать вид нижней навигации похожим на изображение в вопросе. См. Также « Нижняя навигация» в документации.

введите описание изображения здесь

Добавить библиотеку поддержки дизайна

Добавьте эту строку в файл build.grade вашего приложения рядом с другими элементами библиотеки поддержки.

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

Замените номер версии на текущий.

Создать макет Activity

Единственное, что мы добавили в макет - это BottomNavigationView. Чтобы изменить цвет значка и текста при щелчке, вы можете использовать selectorвместо указания цвета непосредственно. Это опущено для простоты здесь.

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>

Обратите внимание, что мы обычно layout_alignParentBottomпомещали это внизу.

Определить пункты меню

Упомянутый выше xml для нижнего навигационного представления bottom_nav_menu. Это то, что определяет каждый элемент на наш взгляд. Мы сделаем это сейчас. Все, что вам нужно сделать, это добавить ресурс меню так же, как и для панели действий или панели инструментов.

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>

Вам нужно будет добавить соответствующие значки в ваш проект. Это не очень сложно, если вы перейдете в File> New> Image Asset и выберете Action Bar и Tab Icons. в качестве типа значка.

Добавить элемент выбранного слушателя

Здесь ничего особенного не происходит. Мы просто добавляем слушателя в нижнюю панель навигации в onCreateметоде нашей деятельности .

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

Нужна дополнительная помощь?

Я узнал, как это сделать, просмотрев следующее видео на YouTube. Компьютерный голос немного странный, но демонстрация очень четкая.

Suragch
источник
16

Вы также можете использовать макет вкладок с настраиваемым видом вкладок, чтобы добиться этого.

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

}

Скачать полный образец проекта

waleedsarwar86
источник
8
Согласно рекомендациям Google по дизайну, для переключения вкладок нельзя использовать смахивание. google.com/design/spec/components/…
Carl B,
1
Было бы здорово, если бы вы поставили должное автору, написавшему поведение :)
Никола Деспотоски,
13

Google запустил BottomNavigationView после версии 25.0.0 библиотеки поддержки дизайна. Но у него были следующие ограничения:

  1. Вы не можете удалить заголовки и центральный значок.
  2. Вы не можете изменить размер текста заголовков.
  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̶ ̶a̶l̶heaa.ysreaalseaa
  4. У него нет BottomNavigationBehavior: поэтому нет интеграции с FAB или SnackBar через CordinatorLayout.
  5. Каждый элемент menuItem является чистым расширением FrameLayout, поэтому у него нет красивого эффекта раскрытия круга.

Таким образом, максимум, который вы можете сделать с этой первой версией BottomNavigationView: (без каких-либо отражений или самостоятельной реализации библиотеки).

введите описание изображения здесь

Итак, если вы хотите что-то из этого. Вы можете использовать стороннюю библиотеку, такую ​​как Roughike / BottomBar, или реализовать библиотеку самостоятельно.

Sanf0rd
источник
4
Для записи вы можете изменить цвет фона и размер текста заголовка (хотя я обнаружил другие проблемы с методом, который я использую). использование android: background = "xxx" изменит цвет фона, но если вы также укажете, app:itemBackground="xxx"все элементы будут иметь этот цвет, и вы не сможете увидеть фон (если вы не добавите прозрачность, но все же, все значки имеют один и тот же цвет) , Очень неприятно, что команда Android выпустила такой дрянной компонент… всегда готовый на 75%, без лишних усилий, которые сделали бы его отличным.
Мартин Маркончини
мы можем изменить цвет фона
Стив
привет, я использую ту же библиотеку, и она работает нормально, но здесь я хочу отображать только значки без заголовков в центре нижней панели. Является ли это возможным? и я уже пытался пустить элементы меню, но значки все еще отображаются только вверху. как я могу показать только значки без заголовков в центре нижней панели?
user512
привет, пожалуйста, проверьте мой ответ здесь stackoverflow.com/questions/40183239/…
Sanf0rd
@MartinMarconcini Как вы изменили размер текста для нижней панели навигации?
Ponsuyambu Velladurai
10

Как упоминал Sanf0rd, Google запустил BottomNavigationView как часть библиотеки поддержки дизайна версии 25.0.0 . Упомянутые им ограничения в основном верны, за исключением того, что вы МОЖЕТЕ изменить цвет фона представления и даже цвет текста и цвет оттенка значка. Он также имеет анимацию, когда вы добавляете более 4 элементов (к сожалению, его нельзя включить или отключить вручную).

Я написал подробное руководство с примерами и сопутствующим репозиторием, которое вы можете прочитать здесь: https://blog.autsoft.hu/now-you-can-use-the-bottom-navigation-view-in-the- дизайн-поддержка библиотека /


Суть этого

Вы должны добавить их на уровне своего приложения build.gradle:

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

Вы можете включить его в свой макет следующим образом:

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

Вы можете указать элементы через ресурс меню следующим образом:

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

И вы можете установить оттенок и цвет текста в виде списка цветов, чтобы текущий выбранный элемент был выделен:

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

Наконец, вы можете обрабатывать выбор элементов с помощью 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;
    }
});
Балаж Герлей
источник
1
Превосходно! Предложение - удалите app: itemBackground = "@ color / darkGrey", чтобы получить собственный эффект круговой ряби.
Гарк
8

Вы можете попробовать другую альтернативную библиотеку: - 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
Еще одна похожая библиотека - AHBottomNavigation: github.com/aurelhubert/ahbottomnavigation
ninjahoahong,
3

Думаю, это тоже пригодится.

отрывок

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

связи

https://github.com/pocheshire/BottomNavigationBar

Это https://github.com/roughike/BottomBar, перенесенное на C # для разработчиков Xamarin.

Pocheshire
источник
3

Я создал частный класс, который использует сетку и ресурс меню:

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>

и пользовательский элемент макета 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>

использование внутри вашей основной деятельности:

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

и

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

и в 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
источник
3

В версии 25 библиотеки поддержки дизайна появился новый официальный BottomNavigationView.

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html добавить в 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
источник
1

Эта библиотека, BottomNavigationViewEx , расширяет BottomNavigationView от Google. Вы можете легко настроить библиотеку Google так, чтобы нижняя панель навигации была такой, какой вы хотите. Вы можете отключить режим переключения, изменить видимость значков и текста и многое другое. Обязательно попробуйте.

Анки Ан
источник
0

Я сослался на это сообщение на github и установил three layoutsдля three fragmentстраниц в нижней панели вкладок.

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

    );

Чтобы установить количество значков:

  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

Вы можете создавать макеты в соответствии с вышеупомянутыми ответами, если кто-то хочет использовать это в 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
}

затем в oncreate вы можете установить вышеупомянутый слушатель для своего представления

   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 (внутри меню)

<?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()метод,

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

И создайте класс, как показано ниже.

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);
        }
    }
}
Кишоре Редди
источник