如何根据谷歌新指南实现底部导航标签

Posted 2023-04-13

【中文标题】如何根据谷歌新指南实现底部导航标签

【英文标题】：How to implement bottom navigation tab as per the google new guideline

【发布时间】：2016-07-03 19:41:51

【问题描述】：

如何按照谷歌新指南（纯安卓）实现底部导航选项卡。有例子吗？

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

【问题讨论】：

我已经以最好的方式实现了 BottomNavigationView。请访问：***.com/a/44967021/2412582

【参考方案1】：

Here 据我所知，第一个自定义解决方案。

更新：

官方 BottomNavigationView 已在 Support lib 25 中。

【参考方案2】：

您可以使用支持库 v25。

添加您的build.gradle

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

在您的布局中添加BottomNavigationView：

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

然后创建一个菜单文件（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>

然后添加监听器：

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

【参考方案3】：

现在，BottomNavigationView 已添加到 2016 年 10 月发布的设计支持库 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_
    android:layout_
    tools:context="priyank.patel.bottomnavigationdemo.MainActivity">

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

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_
        android:layout_
        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

【参考方案4】：

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

【讨论】：

我同意...即使关闭滑动，也没有简单的方法可以摆脱像动画一样的滑动，而是淡入或向上滑动。

【参考方案5】：

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

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

【讨论】：

我尝试使用 roughike，但始终自动选择第一个选项卡 - 知道为什么吗？

@Lion789 你是说最初的意思吗？还是总是？您不希望最初选择第一个选项卡吗？请您更详细地描述这个问题。

【参考方案6】：

到目前为止，还没有代码示例，并且底部栏不在支持库中（还）。我找到了一个模仿指南的第三方库。可以找到here。

【参考方案7】：

Repository 我在这个链接上添加了完整的项目看看 https://gitlab.com/ashish29agre/android-bottom-navigation-view-support-lib

嗨，这可能有点晚了这里是 xml

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


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


<RelativeLayout
    android:layout_
    android:layout_>


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/nm_bottom"
        android:layout_
        android:layout_
        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_
        android:layout_
        android:layout_above="@id/nm_bottom"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

【讨论】：

“layout_behavior”应该在RelativeLayout中，而“layout_scrollFlags”不适用于BottomNavigationView

它对我有用 在gitlab.com/ashish29agre/…查看我的答案

【参考方案8】：

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

【参考方案9】：

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

【参考方案10】：

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

【参考方案11】：

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