BottomNavigationView初探，给你分享Material Design最新控件

最新推荐文章于 2023-01-09 00:17:38 发布

原创最新推荐文章于 2023-01-09 00:17:38 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #控件

Android 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何使用Android的BottomNavigationView组件实现底部导航栏，并提供了一个简单的实战案例。通过布局文件和MainActivity代码展示了如何设置菜单项及响应点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天新建Android Studio项目的时候，发现一个微妙的变化：
看完心情是这样的：

这里写图片描述

这个什么东西：

这里写图片描述

BottomNavigationView
来看看吧，小伙伴们：
这里写图片描述

先看它的布局文件：

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

app:menu 一定是我们的菜单，来看看：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

果然如此。那么在MainActivity中，它是怎么使用的呢？

public class MainActivity extends AppCompatActivity {

    private TextView mTextMessage;

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    mTextMessage.setText(R.string.title_home);
                    return true;
                case R.id.navigation_dashboard:
                    mTextMessage.setText(R.string.title_dashboard);
                    return true;
                case R.id.navigation_notifications:
                    mTextMessage.setText(R.string.title_notifications);
                    return true;
            }
            return false;
        }

    };

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

        mTextMessage = (TextView) findViewById(R.id.message);
        BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    }

}