android底部导航栏凹凸设计,快速实现底部导航栏

最新推荐文章于 2025-05-08 14:31:20 发布

小小韩妈妈

最新推荐文章于 2025-05-08 14:31:20 发布

阅读量4k

点赞数

文章标签： android底部导航栏凹凸设计

Tint 着色器

优点：去除“无用”图片，节省空间

配合BottomNavigationView，实现一个快速，简洁的Tab栏，效果图如下

传统做法：Tab 切换，字体变色、图片变色。至少给我提供八张图，四张默认，四张选中，然后通过 selector 文件设置

现在BottomNavigationView只需四张图！！！

依赖(AndroidX)

implementation 'com.google.android.material:material:1.1.0-alpha01'1

布局

编写渲染颜色选择器-tint_selector_menu_color

menu 文件中 icon-nav_bottom_menu

BottomNavigationView的点击事件(这里配合Fragmen)

/* Menu显示彩色图标 */ //navBottomMenu.setItemIconTintList(null);

/* 导航栏点击事件 */ navBottomMenu.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.iv_home: { FragmentManager.startFragmentHome(Fragment_A.class); return true; } case R.id.iv_wechat: { FragmentManager.startFragmentHome(Fragment_B.class); return true; } case R.id.iv_pipi: { FragmentManager.startFragmentHome(Fragment_C.class); return true; } case R.id.iv_mine: { FragmentManager.startFragmentHome(Fragment_D.class); return true; } default: break; } return false; } });1

下面是配合ViewPager实现Tab栏

// ViewPager 滑动事件监听 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int i, float v, int i1) { } @Override public void onPageSelected(int i) { //这里我做了中间凹凸按钮，所以要特别处理以下 //如果没有我这种情况的，直接加上这个 navBottomMenu.getMenu().getItem(i).setChecked(true); 就不用再加switch语句了 switch (i) { case 0: //将滑动到的页面对应的 menu 设置为选中状态 navBottomMenu.getMenu().getItem(i).setChecked(true); break; case 1: //将滑动到的页面对应的 menu 设置为选中状态 navBottomMenu.getMenu().getItem(i).setChecked(true); break; case 2: case 3: //将滑动到的页面对应的 menu 设置为选中状态 navBottomMenu.getMenu().getItem(i + 1).setChecked(true); break; default: break; } } @Override public void onPageScrollStateChanged(int i) { } }); }1

对应的适配器(随便写的，大家也可以去参考以下别人写的代码)

public class FragPagerAdapter extends FragmentPagerAdapter { private List fragmentList; public FragPagerAdapter(@NonNull FragmentManager fm, List fragmentList) { super(fm); this.fragmentList = fragmentList; } @Override public Fragment getItem(int position) { return fragmentList.get(position); } @Override public int getCount() { return fragmentList.size(); }

BottomNavigationView实现的Tab栏，比自己以前写的代码更加简洁明了！！！

文章来源: blog.youkuaiyun.com，作者：ZH-黑夜，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.youkuaiyun.com/qq_40945489/article/details/110959289