Question

如何根据谷歌新指南（纯机器人）实现底部导航选项卡。有没有例子？？

参考：https://www.google.com/design/spec/components/bottom-navigation.html

Answer 1

据我所知，

Here第一个自定义解决方案。

<强>更新

官方BottomNavigationView已发布在支持库25中。

Answer 2

You can use the support library v25.

Add in your build.gradle

compile 'com.android.support:design:25.0.0'

Add the BottomNavigationView in your layout:

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

Then create a menu file (menu/bottom_navigation_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/my_action1"
        android:enabled="true"
        android:icon="@drawable/my_drawable"
        android:title="@string/text"
        app:showAsAction="ifRoom" />
    ....
</menu>

Then add the listener:

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.my_action1:
                        //Do something...
                        break;

                }
                return false;
            }
        });

Answer 3

现在，BottomNavigationView已添加到2016年10月发布的设计支持lib v25.0.0中

将BottomNavigationView添加到您的xml文件中。

对于前。 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="priyank.patel.bottomnavigationdemo.MainActivity">

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        android:layout_alignParentTop="true">
    </FrameLayout>

    <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="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:menu="@menu/bottom_navigation_main" />
</RelativeLayout>

将菜单项的xml添加到菜单文件夹中。

对于前。 bottom_navigation_main.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_favorites"
        android:enabled="true"
        android:icon="@drawable/ic_favorite_white_24dp"
        android:title="@string/text_favorites"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_video"
        android:enabled="true"
        android:icon="@drawable/ic_music_video_white_24dp"
        android:title="@string/text_video"
        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>

在活动类的OnNavigationItemSelectedListener上设置BottomNavigationView。

对于前。 MainActivity.java

import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

private Fragment fragment;
private FragmentManager fragmentManager;

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

    fragmentManager = getSupportFragmentManager();
    fragment = new FavouriteFragment();
    final FragmentTransaction transaction = fragmentManager.beginTransaction();
    transaction.add(R.id.main_container, fragment).commit();

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

    bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.action_favorites:
                            fragment = new FavouriteFragment();
                            break;
                        case R.id.action_video:
                            fragment = new VideoFragment();
                            break;
                        case R.id.action_music:
                            fragment = new MusicFragment();
                            break;
                    }
                    final FragmentTransaction transaction = fragmentManager.beginTransaction();
                    transaction.replace(R.id.main_container, fragment).commit();
                    return true;
                }
            });
    }
}

在此处查看BottomNavigation-Demo

Answer 4

那里没有代码示例。虽然有自定义库可以完成现在的工作。（如上面的帖子所述）我不建议使用TabLayout来实现这一点，因为在底部导航选项卡的设计指南中明确提到滑动屏幕不应该水平滚动页面。但是，TabLayout扩展了HorizontalScrollView，它的主要动机是方便滚动，即使你可以禁用它，它也不会是理想的。

Answer 5

正如user6146138所说，https://github.com/roughike/BottomBar是一个很棒的实现。您可以查看一个很棒的教程here，这很容易理解，第2部分将向您展示如何使用附加的片段。

另一个不错的实现是https://github.com/aurelhubert/ahbottomnavigation，如果你想查看它。我不知道有关它的任何教程，但链接上的说明已经足够IMO了。

Answer 6

截至目前，还没有代码示例，并且Bottom栏不在支持库中（尚未）。我找到了一个模仿指南的第三方库。它可以找到here。

Answer 7

存储库我在此链接中添加了完整项目看看 https://gitlab.com/ashish29agre/android-bottom-navigation-view-support-lib

嗨这可能是一点点，这里是xml

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/nm_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimaryDark"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        app:layout_scrollFlags="scroll|enterAlways"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:menu="@menu/nav_menu" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/nm_bottom"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

Answer 8

您可以使用BottomNavigationView的Google设计支持库。阅读答案here。

Answer 9

您可以使用TabLayout。它可以很容易地在屏幕底部对齐。

Answer 10

还没有代码示例。但是android库中有自定义库，这是一个详细的教程，你可以检查它Android material design bottom navigation

Answer 11

没有官方示例，但请查看以下链接非常好的实施。 https://github.com/roughike/BottomBar

如何根据谷歌新指南实施底部导航选项卡

11 个答案: