26

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

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

4

11 回答 11

13

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

更新：

官方的BottomNavigationView已在 Support lib 25 中发布。

于 2016-03-17T12:46:07.877 回答
13

您可以使用支持库 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_width="match_parent"
        android:layout_height="wrap_content"
        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;
            }
        });
于 2016-10-20T18:47:09.390 回答
10

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

添加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

于 2016-11-23T14:42:59.947 回答
5

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

于 2016-03-23T20:40:09.070 回答
2

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

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

于 2016-04-12T17:23:07.470 回答
1

存储库我在这个链接上添加了完整的项目看看 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>

于 2016-10-20T10:17:00.453 回答
1

您可以为BottomNavigationView使用谷歌设计支持库。在这里阅读答案。

于 2016-12-08T14:17:47.960 回答
1

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

于 2016-03-17T12:48:05.513 回答
0

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

于 2016-03-17T12:47:10.470 回答
0

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

于 2016-04-05T16:24:13.010 回答
0

目前还没有代码示例。但是android arsenal中有自定义库，这是一个详细的教程，你可以检查它Android材料设计底部导航

于 2016-03-24T10:44:46.600 回答