BottomNavigationView实现底部导航栏的整体效果如下图所示：

BottomNavigationView

引入包最新
基本使用
app:menu="@menu/menu_navigation_fix"中的界面
控件点击时候颜色选择@color/sl_color_green_grey
完整的MainActivity代码
app:labelVisibilityMode=""属性
字体的style-可以设置字体大小
导航栏高度和文字和图片之间的间距
设置水波纹效果 app:itemRippleColor
切换自己设定选中图片和未选中图片
- 除去自带着色效果
- 创建一个drawable选择器
- 设置相应item中android:icon属性
添加一个消息提示红色点
- 第一种方式粗略的添加方式
- 第二种（消息红色的中心放在图片右上角顶点）

引入包最新

 implementation 'com.google.android.material:material:1.2.0-alpha06'

基本使用

    <com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/bottom_navigation_1"android:layout_width="match_parent"android:layout_height="wrap_content"app:itemBackground="@color/white"app:itemIconTint="@color/sl_color_green_grey"app:itemTextColor="@color/sl_color_green_grey"app:menu="@menu/menu_navigation_fix" />

BottomNavigationView控件的主要属性含义：

app:iteamBackground 指的是底部导航栏的背景颜色,默认是主题的颜色
app:itemIconTint 指的是底部导航栏中图片的颜色
app:itemTextColor 指的是底部导航栏文字的颜色
app:menu 指的是菜单布局（文字和图片都写在这个里面）

app:menu="@menu/menu_navigation_fix"中的界面

<?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"><itemandroid:id="@+id/action_message"android:checked="true"android:icon="@mipmap/icon_message"android:title="@string/message" /><itemandroid:id="@+id/action_find"android:icon="@mipmap/icon_find"android:title="@string/find" /><itemandroid:id="@+id/action_circle"android:icon="@mipmap/icon_circle"android:title="@string/circle" />
</menu>

控件点击时候颜色选择@color/sl_color_green_grey

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="#b8b9bd" android:state_checked="false" /><item android:color="#0fbbbb" android:state_checked="true" />
</selector>

完整的MainActivity代码

public class MainActivity extends AppCompatActivity {private FrameLayout mainFrame;private BottomNavigationView bottomNavigation;private MyFragment messageFragment, findFragment, circleFragment;private Fragment[] fragments;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}private void initView() {messageFragment = new MyFragment();messageFragment.setMessage(getResources().getString(R.string.message));findFragment = new MyFragment();findFragment.setMessage(getResources().getString(R.string.find));circleFragment = new MyFragment();circleFragment.setMessage(getResources().getString(R.string.circle));fragments = new Fragment[]{messageFragment, findFragment, circleFragment};mainFrame = findViewById(R.id.mainContainer);//设置fragment到布局getSupportFragmentManager().beginTransaction().replace(R.id.mainContainer, messageFragment).commit();bottomNavigation = findViewById(R.id.navigation);//这里是bottomnavigationview的点击事件bottomNavigation.setOnNavigationItemSelectedListener(listener);}private BottomNavigationView.OnNavigationItemSelectedListener listener= new BottomNavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem item) {int id = item.getItemId();if (id == R.id.action_message) switchFragment(fragments[0]);else if (id == R.id.action_find) switchFragment(fragments[1]);else if (id == R.id.action_circle) switchFragment(fragments[2]);return true;}};// 切换fragmentprivate void switchFragment(Fragment fragment) {FragmentManager fm = getSupportFragmentManager();FragmentTransaction transaction = fm.beginTransaction();transaction.replace(R.id.mainContainer, fragment);transaction.commitAllowingStateLoss();}}

运行的效果图如下：

app:labelVisibilityMode=""属性

item多的时候，指的是item非选中状态显示文字，有以下几个值：

labeled 图标文字都显示
selected
auto
unlabeled 文字不显示

它们依次运行如下图所示

auto和select和i 属性sShifting有关
此时isShifting=true;你会发现auto和 selected的效果是一样的效果；
当isShifting=false时候，auto和lable是一样的效果；
关键是这个isShift属性没法设置，目前只有设置2个item的时候它们才好区别；感觉auto这个属性有点鸡肋；下面贴一下关键的源码：

switch (labelVisibilityMode) {case LabelVisibilityMode.LABEL_VISIBILITY_AUTO:if (isShifting) {if (checked) {setViewLayoutParams(icon, defaultMargin, Gravity.CENTER_HORIZONTAL | Gravity.TOP);setViewValues(largeLabel, 1f, 1f, VISIBLE);} else {setViewLayoutParams(icon, defaultMargin, Gravity.CENTER);setViewValues(largeLabel, 0.5f, 0.5f, INVISIBLE);}smallLabel.setVisibility(INVISIBLE);} else {if (checked) {setViewLayoutParams(icon, (int) (defaultMargin + shiftAmount), Gravity.CENTER_HORIZONTAL | Gravity.TOP);setViewValues(largeLabel, 1f, 1f, VISIBLE);setViewValues(smallLabel, scaleUpFactor, scaleUpFactor, INVISIBLE);} else {setViewLayoutParams(icon, defaultMargin, Gravity.CENTER_HORIZONTAL | Gravity.TOP);setViewValues(largeLabel, scaleDownFactor, scaleDownFactor, INVISIBLE);setViewValues(smallLabel, 1f, 1f, VISIBLE);}}break;

字体的style-可以设置字体大小

        app:itemTextAppearanceActive="@style/selectText"//选中字体大小风格，app:itemTextAppearanceInactive="@style/unSelectText"//未选中字体大小风格

<?xml version="1.0" encoding="utf-8"?>
<resources><style name="selectText"><item name="android:textSize">20sp</item><item name="android:drawablePadding">8dp</item></style><style name="unSelectText"><item name="android:textSize">14sp</item><item name="android:drawablePadding">4dp</item></style>
</resources>

导航栏高度和文字和图片之间的间距

    <!-- 导航栏高度 --><dimen name="design_bottom_navigation_height">80dp</dimen>

设置了这个之后导航栏高度就变高了，同时图片和文字之间的距离就变大了，具体是多少我也不清楚
其他的设置都是瞎搞；

设置水波纹效果 app:itemRippleColor

先说一下这里的 app:itemBackground 和app:itemRippleColor都是设置给到导航栏的背景
如果要设置水波纹有有效果,那么必须不设置背景：

 app:itemBackground="@null"app:itemRippleColor="@color/design_default_color_primary"

只有这样才会有效果；否则无效；
这是在其源码里面发现的：

    int itemBackground = a.getResourceId(R.styleable.BottomNavigationView_itemBackground, 0);if (itemBackground != 0) {menuView.setItemBackgroundRes(itemBackground);} else {ColorStateList itemRippleColor =MaterialResources.getColorStateList(context, a, R.styleable.BottomNavigationView_itemRippleColor);setItemRippleColor(itemRippleColor);}

再看看 setItemRippleColor(itemRippleColor);方法，最后还是把水波纹效果设置给了 menuView.setItemBackgroundRes();

  public void setItemRippleColor(@Nullable ColorStateList itemRippleColor) {if (this.itemRippleColor == itemRippleColor) {// Clear the item background when setItemRippleColor(null) is called for consistency.if (itemRippleColor == null && menuView.getItemBackground() != null) {menuView.setItemBackground(null);}return;}this.itemRippleColor = itemRippleColor;if (itemRippleColor == null) {menuView.setItemBackground(null);} else {ColorStateList rippleDrawableColor =RippleUtils.convertToRippleDrawableColor(itemRippleColor);if (VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) {menuView.setItemBackground(new RippleDrawable(rippleDrawableColor, null, null));} else {GradientDrawable rippleDrawable = new GradientDrawable();// TODO: Find a workaround for this. Currently on certain devices/versions, LayerDrawable// will draw a black background underneath any layer with a non-opaque color,// (e.g. ripple) unless we set the shape to be something that's not a perfect rectangle.rippleDrawable.setCornerRadius(0.00001F);Drawable rippleDrawableCompat = DrawableCompat.wrap(rippleDrawable);DrawableCompat.setTintList(rippleDrawableCompat, rippleDrawableColor);menuView.setItemBackground(rippleDrawableCompat);}}}

切换自己设定选中图片和未选中图片

想要切换自己UI设计师给的两种不同的Ui图片；

除去自带着色效果

navigation.setItemIconTintList(null) 除去自带着色效果（在XML中app:itemIconTint=@null无效，需要代码设置）

创建一个drawable选择器

有几个item就创建几个，比如sl_drawable_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_checked="false" android:drawable="@mipmap/icon_circle"/><item android:state_checked="true" android:drawable="@mipmap/icon_circle_focus"/>
</selector>

设置相应item中android:icon属性

找到相应item中 android:icon属性

<?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"><itemandroid:id="@+id/action_circle"android:icon="@drawable/sl_drawable_circle"android:title="@string/circle" />
</menu>

第二个中的切换都是原始图片的切换；
以上就是总结的全部内容了；欢迎评论和点赞，交流，互相学习了！

添加一个消息提示红色点

第一种方式粗略的添加方式

        //获取整个的NavigationViewBottomNavigationMenuView menuView = (BottomNavigationMenuView) navigation.getChildAt(0);//这里就是获取所添加的每一个Tab(或者叫menu)，View tab = menuView.getChildAt(0);BottomNavigationItemView itemView = (BottomNavigationItemView) tab;//加载我们的角标View，新创建的一个布局View badge = LayoutInflater.from(this).inflate(R.layout.item_red_dot, menuView, false);//添加到Tab上FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(badge.getLayoutParams());lp.gravity = Gravity.TOP | Gravity.END;itemView.addView(badge, lp);

第二种（消息红色的中心放在图片右上角顶点）

        //添加消息红点第二种方式BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigation.getChildAt(0);View tab = menuView.getChildAt(0);BottomNavigationItemView itemView = (BottomNavigationItemView) tab;//从系统里面获取图标的ImageViewImageView iv = itemView.findViewById(R.id.icon);//加载我们的角标View，新创建的一个布局final View badge = LayoutInflater.from(this).inflate(R.layout.item_red_dot, menuView, false);final FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(badge.getLayoutParams());//等到有高度以后在布局iv.post(new Runnable() {@Overridepublic void run() {lp.gravity = Gravity.TOP | Gravity.CENTER_HORIZONTAL;lp.topMargin = iv.getTop() - lp.height / 2;//图片top - 消息点的高度一半lp.leftMargin = iv.getWidth() / 2;//图片的宽度的一半itemView.addView(badge, lp);}});

底部菜单控件BottomNavigationView的使用相关推荐

mysql抽屉图标_React Native自定义组件实现抽屉菜单控件效果
一.需求分析原生开发中,自定义View可谓是屡见不鲜的事情,往往系统的控件总不能满足现实的需求.五花八门的产品设计需要我们做出不同的View.关于自定义View的内容网上已经有很多的博文,本篇博客要 ...
Winform控件之菜单控件，工具栏控件和状态栏控件
菜单是用户获取应用程序中主要功能和实用程序的主要途径,如新建文件,打开文件等,这就需要用到菜单控件(MenuStrip).工具栏另一种获取应用程序主要功能的常用方法,比起菜单要直观,这就需要用到工具栏 ...
菜单控件menuStrip 1127
菜单控件menuStrip 1127 引入菜单栏的控件菜单样的属性初始状态给菜单添加快捷键期望通过alt + 快捷键可以激发它实现在录入菜单文本的时候,通过 &+按键可以做一 ...
Qt 实现 QQ 9.0版自定义菜单控件
#简述重新最近开始了QQ最新版 9.0 界面的模仿,前几天搞了一个QQ登陆界面的动画效果详情见 QQ 9.0 新版登录窗口登录特效 ,今晚Qt技术学习班分享了QQ 9.0版本的自定义菜单控件,通过Q ...
WinForm MDI窗体设计（含菜单控件【MenuStrip】）
简介把一些子窗体全部排列到父窗体中,且无论子窗体如何拖拽都无法离开父窗体. 设计确定父窗体父窗体(Form1)的[IsMdiContainer]属性设置为 True 父窗体中添加菜单控件[Men ...
使用javascript oop开发滑动（slide) 菜单控件
这里使用原生的javascript,用面向对象的方式创建一个容易维护使用方便的滑动菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
ASP.NET2.0 菜单控件menu的动态静态用法
利用 ASP.NET Menu 控件,可以开发 ASP.NET 网页的静态和动态显示菜单.您可以在 Menu 控件中直接配置其内容,也可通过将该控件绑定到数据源的方式来指定其内容. 无需编写任何代码, ...
AndroidStudio安卓原生开发_UI高级_DrawerLayout_侧滑菜单控件---Android原生开发工作笔记120
然后我们再来看一个UI控件,侧滑菜单. 上面是文字描述,我们去做一下. 我们到activity_main.xml中去我们先去写第一个子view,是内容显示区域.就是用来显示我们侧滑菜单的区域然后 ...
三种菜单控件的兼容性问题处理集锦
选项菜单OptionsMenu的兼容问题如果开发者用的是2.*及以上版本的Android Studio,那么极有可能发现openOptionsMenu方法无法调出菜单列表,不是SDK版本不够新,恰恰 ...
expander菜单控件_《WPF》Expander控件简单美化
示例图: Expander控件功能很常见, 一般用于系统左侧的菜单收缩面板. 1.主要的组成一个头部(header) 和一个内容(content) 组成. 控制中心资源管理仪表菜单顶部导航 ...

底部菜单控件BottomNavigationView的使用