Material design library系列——Botto
2017-09-19 本文已影响162人
李晓通
前言
今天给大家带来Material design系列的第五篇文章，BottomNavigationBar的使用，那么按照国际惯例，先给大家介绍一下什么是BottomNavigationBar。
顾名思义，BottomNavigationBar翻译过来就是底部导航控件，由于Android之前一直没有官方的底部导航栏，所以在此之前大家实现也是各有招数，有用RadioGroup实现的，有用LinearLayout实现的，不过现在好了，Google官方在自己推出的Material design中增加了BottomNavigationBar这个底部导航。
使用
- 在gradle中添加依赖
compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.2' - 在xml文件中加入该控件
- 在代码中添加条目
做到这一步，就能实现上面gif的效果了。
注意事项
- BottomNavigationBar高度默认是 56dp
- 菜单元素建议 3~5 个
- BottomNavigationBar的背景颜色默认是 @color/colorAccent
BottomNavigationBar的模式
xml：bnbMode
代码:setMode()
可以改变控件的模式，模式有五种
-
MODE_DEFAULT
如果Item的个数<=3就会使用MODE_FIXED模式，否则使用MODE_SHIFTING模式
-
MODE_FIXED（固定大小）
。填充模式，未选中的Item会显示文字，没有换挡动画。
MODE_FIXED
-
MODE_FIXED_NO_TITLE（固定大小不带文字）
MODE_FIXED_NO_TITLE
-
MODE_SHIFTING（不固定大小）
。换挡模式，未选中的Item不会显示文字，选中的会显示文字。在切换的时候会有一个像换挡的动画
MODE_SHIFTING
-
MODE_SHIFTING_NO_TITLE（不固定大小不带文字）
MODE_SHIFTING_NO_TITLE
Background Style
xml: bnbBackgroundStyle
代码：setBackgroundStyles()
包含3种style
1. BACKGROUND_STYLE_DEFAULT
如果设置的Mode为MODE_FIXED，将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。
2. BACKGROUND_STYLE_STATIC
。点击的时候没有水波纹效果
。航条的背景色是白色，加上setBarBackgroundColor（）可以设置成你所需要的任何背景颜色
-
BACKGROUND_STYLE_STATIC + MODE_SHIFTING效果
BACKGROUND_STYLE_STATIC + MODE_SHIFTING
-
BACKGROUND_STYLE_STATIC + MODE_FIXED效果
BACKGROUND_STYLE_STATIC + MODE_FIXED
3. BACKGROUND_STYLE_RIPPLE
。点击的时候有水波纹效果
。导航条的背景色取决于选中状态的 Item的颜色（ActiveColor），也就是setActiveColorResource这个设置的颜色
-
BACKGROUND_STYLE_RIPPLE+ MODE_SHIFTING效果
BACKGROUND_STYLE_RIPPLE + MODE_SHIFTING
-
BACKGROUND_STYLE_RIPPLE+ MODE_FIXED效果
BACKGROUND_STYLE_RIPPLE+ MODE_FIXED
TabChangeListener
bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
@Override
public void onTabSelected(int position) {
//tab被选择
}
@Override
public void onTabUnselected(int position) {
//tab未被选择
}
@Override
public void onTabReselected(int position) {
//tab被重新选择
}
});
给Item添加Badge，一般用作消息提醒的
// 创建一个BadgeItem
BadgeItem badge=new BadgeItem();
// 方法介绍
// .setBorderWidth(2)//Badge的Border(边界)宽度
// .setBorderColor("#FFF")//Badge的边界颜色
// .setBackgroundColor("#93F")//Badge背景颜色
// .setGravity(Gravity.RIGHT| Gravity.TOP)//位置，默认右上角
// .setText("20")//显示的文本
// .setTextColor("#FFF")//文本颜色
// .setAnimationDuration(2000)
// .setHideOnSelect(true)//当选中状态时消失，非选中状态显示
// 为item添加角标
new BottomNavigationItem(R.drawable.appbar_newloan, "newLoan").setBadgeItem(new TextBadgeItem().setText("20")))
结合Fragment切换
public class MainActivity extends AppCompatActivity {
private ChatmesFragment mChatmesFragment;
private NewLoanFragment mNewLoanFragment;
private SettingFragment mSettingFragment;
private SystemFragment mSystemFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setDefaultFragment();
BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bnb);
bottomNavigationBar.setTabSelectedListener(tabSelectedListener);
bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.appbar_chatmes, "chatmes").setActiveColorResource(R.color.blue))
.addItem(new BottomNavigationItem(R.drawable.appbar_newloan, "newLoan").setActiveColorResource(R.color.black))
.addItem(new BottomNavigationItem(R.drawable.appbar_setting, "setting").setActiveColorResource(R.color.orange))
.addItem(new BottomNavigationItem(R.drawable.appbar_sysmes, "systems").setActiveColorResource(R.color.pink))
.setMode(BottomNavigationBar.MODE_FIXED)
.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE)
.setFirstSelectedPosition(0)
//注意，所有的设置都要在该方法之前完成
.initialise();
}
private void setDefaultFragment() {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
mChatmesFragment = ChatmesFragment.newInstance();
transaction.replace(R.id.framelayout, mChatmesFragment);
transaction.commit();
}
private BottomNavigationBar.OnTabSelectedListener tabSelectedListener = new BottomNavigationBar.OnTabSelectedListener() {
@Override
public void onTabSelected(int position) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
switch (position) {
case 0:
if (mChatmesFragment == null) {
mChatmesFragment = ChatmesFragment.newInstance();
}
transaction.replace(R.id.framelayout, mChatmesFragment);
break;
case 1:
if (mNewLoanFragment == null) {
mNewLoanFragment = NewLoanFragment.newInstance();
}
transaction.replace(R.id.framelayout, mNewLoanFragment);
break;
case 2:
if (mSettingFragment == null) {
mSettingFragment = SettingFragment.newInstance();
}
transaction.replace(R.id.framelayout, mSettingFragment);
break;
case 3:
if (mSystemFragment == null) {
mSystemFragment = SystemFragment.newInstance();
}
transaction.replace(R.id.framelayout, mSystemFragment);
break;
}
transaction.commit();
}
@Override
public void onTabUnselected(int position) {
}
@Override
public void onTabReselected(int position) {
}
};
}
结合Fragment使用
结合ViewPager使用
public class MainActivity extends AppCompatActivity {
private List<Fragment> mFragments = new ArrayList<>();
private ViewPager mViewPager;
private BottomNavigationBar mBottomNavigationBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initFragment();
mViewPager = (ViewPager) findViewById(R.id.viewpager);
MyAdapter pagerAdapter = new MyAdapter(getSupportFragmentManager(), mFragments);
mViewPager.setAdapter(pagerAdapter);
mViewPager.addOnPageChangeListener(onPageChangeListener);
mViewPager.setCurrentItem(0);
mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bnb);
mBottomNavigationBar.setTabSelectedListener(tabSelectedListener);
mBottomNavigationBar.setBarBackgroundColor(R.color.black)
.setMode(BottomNavigationBar.MODE_SHIFTING)
.addItem(new BottomNavigationItem(R.drawable.appbar_chatmes, "chatmes").setActiveColorResource(R.color.white))
.addItem(new BottomNavigationItem(R.drawable.appbar_newloan, "newLoan").setActiveColorResource(R.color.blue))
.addItem(new BottomNavigationItem(R.drawable.appbar_setting, "setting").setActiveColorResource(R.color.red))
.addItem(new BottomNavigationItem(R.drawable.appbar_sysmes, "systems").setActiveColorResource(R.color.orange))
.setFirstSelectedPosition(0)
//注意，所有的设置都要在该方法之前完成
.initialise();
}
private void initFragment() {
mFragments.add(ChatmesFragment.newInstance());
mFragments.add(NewLoanFragment.newInstance());
mFragments.add(SettingFragment.newInstance());
mFragments.add(SystemFragment.newInstance());
}
private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mBottomNavigationBar.selectTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
private BottomNavigationBar.OnTabSelectedListener tabSelectedListener = new BottomNavigationBar.OnTabSelectedListener() {
@Override
public void onTabSelected(int position) {
mViewPager.setCurrentItem(position);
}
@Override
public void onTabUnselected(int position) {
}
@Override
public void onTabReselected(int position) {
}
};
结合ViewPager
总结
好了，今天的BottomNavigationBar使用就给大家带到这里，如果大家有什么疑问或者文章中有任何错误，欢迎留言指出，如果觉得写的还不错，那就动动你的小手点个赞吧。
