1.github地址
https://github.com/zhouxu88/BottomNavigationBar
2.基本使用
2,1添加依赖
implementation ‘com.ashokvarma.android:bottom-navigation-bar:2.0.5‘
2.2布局中使用
<com.ashokvarma.bottomnavigation.BottomNavigationBar android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/bottom_nav_bar" android:layout_alignParentBottom="true" ></com.ashokvarma.bottomnavigation.BottomNavigationBar>
2.3代码中设置
/** * 导航基础设置 包括按钮选中效果 导航栏背景色等 */ bottomNavigationBar.setTabSelectedListener(this) .setMode(BottomNavigationBar.MODE_FIXED) .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC) .setActiveColor("#ffffff")//选中颜色 .setInActiveColor("#2B2B2B")//未选中颜色 .setBarBackgroundColor("#EDC18E");//导航栏背景色 badgeItem = new TextBadgeItem() .setBorderWidth(2) .setTextColor(Color.BLACK) .setBackgroundColor(Color.RED) .setText("99"); /** *添加导航按钮 */ bottomNavigationBar.addItem(new BottomNavigationItem(R.mipmap.home,"首页")) .addItem(new BottomNavigationItem(R.mipmap.setting,"设置")) .addItem(new BottomNavigationItem(R.mipmap.menu,"菜单").setInActiveColor("#ffff00")) .addItem(new BottomNavigationItem(R.mipmap.person,"个人").setBadgeItem(badgeItem))//添加小红点数据 .initialise();//initialise 一定要放在 所有设置的最后一项
2.4添加监听
bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {//这里也可以使用SimpleOnTabSelectedListener @Override public void onTabSelected(int position) {//未选中 -> 选中 } @Override public void onTabUnselected(int position) {//选中 -> 未选中 } @Override public void onTabReselected(int position) {//选中 -> 选中 } });
3.知识点,用法说明。
3.1设置导航栏模式:setMode()
setMode() 内的参数有三种模式类型: MODE_DEFAULT 自动模式:导航栏Item的个数<=3 用 MODE_FIXED 模式,否则用 MODE_SHIFTING 模式 MODE_FIXED 固定模式:未选中的Item显示文字,无切换动画效果。 MODE_SHIFTING 切换模式:未选中的Item不显示文字,选中的显示文字,有切换动画效果。
3.2设置导航栏背景模式:setBackgroundStyle()
setBackgroundStyle() 内的参数有三种样式 BACKGROUND_STYLE_DEFAULT: 默认样式 如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC,如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。 BACKGROUND_STYLE_STATIC: 静态样式 点击无波纹效果,航条的背景色是白色,加上setBarBackgroundColor()可以设置成你所需要的任何背景颜色 BACKGROUND_STYLE_RIPPLE: 波纹样式 点击有波纹效果,导航条的背景色是你设置的处于选中状态的 Item的颜色(ActiveColor),也就是setActiveColorResource这个设置的颜色
3.3设置默认颜色
bottomNavigationBar .setActiveColor("#ff0000") //设置选中的颜色 .setInActiveColor("#FFFFFF")//设置选中的颜色 .setBarBackgroundColor("#000000");//设置bar背景 in-active color: 表示未选中Item中的图标和文本颜色。默认为 Color.LTGRAY active color : 在BACKGROUND_STYLE_STATIC下,表示选中Item的图标和文本颜色。而在BACKGROUND_STYLE_RIPPLE下,表示整个容器的背景色。默认Theme‘s Primary Color background color : 在BACKGROUND_STYLE_STATIC下,表示整个容器的背景色。而在BACKGROUND_STYLE_RIPPLE下,表示选中Item的图标和文本颜色。默认 Color.WHITE
3.4定制Item的选中未选中颜色
//设置Item未选中颜色方法 new BottomNavigationItem().setInActiveColorResource(R.color.white)) 或者 new BottomNavigationItem().setInActiveColor() //设置Item选中颜色方法 new BottomNavigationItem().setActiveColorResource()或者 new BottomNavigationItem().setActiveColor()
3.5Icon的定制
如果使用颜色的变化不足以展示一个选项Item的选中与非选中状态,可以使用BottomNavigationItem.setInActiveIcon()方法来设置。
.addItem(new BottomNavigationItem(R.mipmap.menu,"菜单").setInActiveColor("#ffff00"))
3.6手动隐藏与显示
bottomNavigationBar.hide();//隐藏 bottomNavigationBar.hide(true);//隐藏是否启动动画,这里并不能自定义动画 bottomNavigationBar.unHide();//显示 bottomNavigationBar.hide(true);//隐藏是否启动动画,这里并不能自定义动画
3.7为Item添加Badge,一般用作消息提醒的
badgeItem = new TextBadgeItem() .setBorderWidth(2)//Badge的Border(边界)宽度 .setBorderColor(Color.BLUE)//Badge的Border颜色 .setBackgroundColor(Color.RED) .setTextColor(Color.BLACK)//文本颜色 .setGravity(Gravity.RIGHT| Gravity.TOP)//位置,默认右上角 .setAnimationDuration(2000) .setHideOnSelect(true)//当选中状态时消失,非选中状态显示 .setText("99");
shapeBadgeItem=new ShapeBadgeItem() .setShape(SHAPE_OVAL) //形状 .setShapeColor(Color.BLUE) //颜色 .setShapeColorResource(R.color.colorPrimaryDark) //颜色,资源文件获取 .setEdgeMarginInDp(this,0) //距离Item的margin,dp .setEdgeMarginInPixels(20) //距离Item的margin,px .setSizeInDp(this,10,10) //宽高,dp .setSizeInPixels(5,5) //宽高,px .setAnimationDuration(200) //隐藏和展示的动画速度,单位毫秒,和setHideOnSelect一起使用 .setGravity(Gravity.LEFT) //位置,默认右上角 .setHideOnSelect(true); //true:当选中状态时消失,非选中状态显示,moren false
4案例
public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener { private BottomNavigationBar bottomNavigationBar; private HomeFragment homeFragment; private PersonFragment personFragment; private SettingFragment settingFragment; private MenuFragment menuFragment; private FragmentManager fm; private TextBadgeItem badgeItem; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); bottomNavigationBar=findViewById(R.id.bottom_nav_bar); fm=getFragmentManager(); initBottomBar(); } private void initBottomBar() { /** * 导航基础设置 包括按钮选中效果 导航栏背景色等 */ bottomNavigationBar.setTabSelectedListener(this) .setMode(BottomNavigationBar.MODE_FIXED) .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC) .setActiveColor("#ffffff")//选中颜色 .setInActiveColor("#2B2B2B")//未选中颜色 .setBarBackgroundColor("#EDC18E");//导航栏背景色 badgeItem = new TextBadgeItem() .setBorderWidth(2)//Badge的Border(边界)宽度 .setBorderColor(Color.BLUE)//Badge的Border颜色 .setBackgroundColor(Color.RED) .setTextColor(Color.BLACK)//文本颜色 .setGravity(Gravity.RIGHT| Gravity.TOP)//位置,默认右上角 .setAnimationDuration(2000) .setHideOnSelect(true)//当选中状态时消失,非选中状态显示 .setText("99"); /** *添加导航按钮 */ bottomNavigationBar.addItem(new BottomNavigationItem(R.mipmap.home,"首页")) .addItem(new BottomNavigationItem(R.mipmap.setting,"设置")) .addItem(new BottomNavigationItem(R.mipmap.menu,"菜单").setInActiveColor("#ffff00")) .addItem(new BottomNavigationItem(R.mipmap.person,"个人").setBadgeItem(badgeItem))//添加小红点数据 .initialise();//initialise 一定要放在 所有设置的最后一项 //设置默认导航栏 homeFragment=HomeFragment.newInstance("首页"); fm.beginTransaction().replace(R.id.fl,homeFragment).commit(); } /** * 设置选中逻辑 */ @Override public void onTabSelected(int position) { FragmentTransaction transaction = fm.beginTransaction(); switch (position){ case 0: if(homeFragment==null){ homeFragment=new HomeFragment(); } transaction.replace(R.id.fl,homeFragment); break; case 1: if(settingFragment==null){ settingFragment=new SettingFragment(); } transaction.replace(R.id.fl,settingFragment); break; case 2: if(menuFragment==null){ menuFragment=new MenuFragment(); } badgeItem.setText("4"); transaction.replace(R.id.fl,menuFragment); break; case 3: if(personFragment==null){ personFragment=new PersonFragment(); } transaction.replace(R.id.fl,personFragment); break; default: break; } transaction.commit(); } /** * 设置未选中逻辑 */ @Override public void onTabUnselected(int position) { } /** * 设置释放逻辑 */ @Override public void onTabReselected(int position) { } }
参考:
1.Android底部导航 BottomNavigationBar(Google官方)
3.安卓 BottomNavigationBar 底部导航栏 最简单用法详解
原文地址:https://www.cnblogs.com/wangjiaghe/p/9742921.html
时间: 2024-10-09 03:55:44