android开发:BottomNavigationView仿今日头条底部菜单栏

效果:

在这里插入图片描述
1.在xml中加入BottomNavigationView

 <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemTextColor="@drawable/item"
        app:itemIconTint="@drawable/item"
        app:menu="@menu/bottom_nav_menu"
        />

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="@mipmap/h"
        android:title="首页" />
    <item
        android:id="@+id/navigation_shopping"
        android:icon="@mipmap/ss"
        android:title="商城" />
    <item
        android:id="@+id/navigation_shopping_car"
        android:icon="@mipmap/s"
        android:title="购物车" />

    <item
        android:id="@+id/navigation_me"
        android:icon="@mipmap/m"
        android:title="我的" />

</menu>

itemTextColor:指向drawable文件,设置菜单选中和未选中的字体颜色
itemIconTint:指向drawable文件,设置菜单选中和未选中的图标颜色

<?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/colorAccent"/>
    <item android:state_checked="false" android:color="@color/colorPrimary"/>
</selector>

2.在activity中对BottomNavigationView的点击事件进行监听:


public class Main5Activity extends AppCompatActivity {

    @SuppressLint("WrongConstant")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main5);
        BottomNavigationView navView = findViewById(R.id.nav_view);
        //tab超过3设置,否则未选中的菜单看不见文字。>= 28可以使用这个方法解决
        navView.setLabelVisibilityMode(1);
        //BottomNavigationView设置监听,返回true点击才会有效果
        navView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()) {
                    case R.id.navigation_home:
                        Toast.makeText(Main5Activity.this, "首页", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.navigation_shopping:
                        Toast.makeText(Main5Activity.this, "商城", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.navigation_shopping_car:
                        Toast.makeText(Main5Activity.this, "购物车", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.navigation_me:
                        Toast.makeText(Main5Activity.this, "我的", Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });
    }

}

我们可以在点击事件回调的方法中做好多事情,比如切换隐藏Fragment等操作。
BottomNavigationView 用起来还是有蛮多问题的,比如tab超过3个就会出现未选择的菜单文字看不见等。网上一搜就可以看到好多解决方案。

发布了194 篇原创文章 · 获赞 42 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_39027256/article/details/103588075
今日推荐