ANDROID BottomNavigationBar底部导航栏的实现示例
作者:张瑾瑜
第一种介绍的就是使用开源库,因为使用开源库最简单,也更加的符合我们的审美标准,同时BottomNavigationBar还是符合当前的Material Design标准的。
效果展示
依赖
compile'com.ashokvarma.android:bottom-navigation-bar:1.2.0'
布局文件
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <com.ashokvarma.bottomnavigation.BottomNavigationBar android:id="@+id/bottom_navigation_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom"/> </LinearLayout>
对于下面将要使用到四个Fragment里面的布局文件
1.fragment_index.xml
2.fragment_map.xml
3.fragment_love.xml
4.fragment_person.xml
只需要将其中的android:text属性中的内容进行修改以做区分
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <TextView android:text="主页" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
Java代码
public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener { BottomNavigationBar mBottomNavigationBar; private IndexFragment indexFragment; private MapFragment mapFragment; private LoveFragment loveFragment; private PersonFragment personFragment; private BadgeItem badgeItem; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initBadge(); setDefaultFragment(); InitNavigationBar(); } private void InitNavigationBar() { mBottomNavigationBar = (BottomNavigationBar)findViewById(R.id.bottom_navigation_bar); mBottomNavigationBar.setTabSelectedListener(this); mBottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING); mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE); mBottomNavigationBar .addItem(new BottomNavigationItem(R.drawable.icon_index,"首页").setActiveColorResource(R.color.red)) .addItem(new BottomNavigationItem(R.drawable.icon_map,"地图").setActiveColorResource(R.color.blue)) .addItem(new BottomNavigationItem(R.drawable.icon_love,"关注").setActiveColorResource(R.color.yellow).setBadgeItem(badgeItem)) .addItem(new BottomNavigationItem(R.drawable.icon_person,"个人").setActiveColorResource(R.color.green)) .setFirstSelectedPosition(0) .initialise(); } public void initBadge() { badgeItem = new BadgeItem() .setBorderWidth(2) .setBorderColor("#ff0000") .setBackgroundColor("#ff0000") .setGravity(Gravity.RIGHT| Gravity.TOP) .setText("2") .setTextColor("#ffffff") .setAnimationDuration(2000) .setHideOnSelect(true); } private void setDefaultFragment() { FragmentManager fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); indexFragment = new IndexFragment(); transaction.replace(R.id.fragment_container, indexFragment); transaction.commit(); } @Override public void onTabSelected(int position) { Log.d("onTabSelected", "onTabSelected: " + position); FragmentManager fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); switch (position) { case 0: if (indexFragment == null) { indexFragment = new IndexFragment(); } transaction.replace(R.id.fragment_container, indexFragment); break; case 1: if (mapFragment== null) { mapFragment = new MapFragment(); } transaction.replace(R.id.fragment_container, mapFragment); break; case 2: if (loveFragment == null) { loveFragment = new LoveFragment(); } transaction.replace(R.id.fragment_container,loveFragment); break; case 3: if (personFragment == null) { personFragment = new PersonFragment(); } transaction.replace(R.id.fragment_container,personFragment); break; default: break; } // 事务提交 transaction.commit(); } @Override public void onTabUnselected(int position) { Log.d("onTabUnselected", "onTabUnselected: " + position); } @Override public void onTabReselected(int position) { Log.d("onTabReselected", "onTabReselected: " + position); } }
代码分析
1.初始化导航条样式
对于Mode和BackgroundStyle各有3种选择
Mode
- 在xml代码使用android:bnbMode属性
- 在Java代码中使用setMode方法
MODE_DEFAULT:如果Item的个数<=3就会使用MODE_FIXED模式,否则使用MODE_SHIFTING模式。
MODE_FIXED:填充模式,未选中的Item会显示文字,没有换挡动画。
MODE_SHIFTING:换挡模式,未选中的Item不会显示文字,选中的会显示文字。在切换的时候会有一个像换挡的动画。
BackgroundStyle
- 在xml代码使用android:bnbBackgroundStyle属性
- 在Java代码中使用setBackgroundStyle方法
BACKGROUND_STYLE_DEFAULT:如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。
BACKGROUND_STYLE_STATIC:点击的时候没有水波纹效果
BACKGROUND_STYLE_RIPPLE:点击的时候有水波纹效果
2.初始化导航条条目
需要几个就添加几个,包含图片和图片下方代表的文字以及设定被选中时产生效果的颜色。
mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_index,"首页").setActiveColorResource(R.color.red));
3.初始化Badge
badgeItem = new BadgeItem().setBorderWidth(2)//边框宽度 .setBorderColor("#ff0000")//边框颜色 .setBackgroundColor("#ff0000")//背景颜色 .setGravity(Gravity.RIGHT| Gravity.TOP)//显示位置 .setText("2")//显示文字 .setTextColor("#ffffff")//文字颜色 .setAnimationDuration(2000)//渐退、渐出的时间 .setHideOnSelect(true);//选中时是否消失
然后为特定需要设置Badge的条目设置上
mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_love,"关注").setActiveColorResource(R.color.yellow).setBadgeItem(badgeItem));
4.初始化Fragment
在activity_main.xml当中有一个FrameLayout,这个需要当导航条条目发生改变时,对应着发生改变。
setDefaultFragment():当活动打开时,事先显示哪个fragment
FragmentManager fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); indexFragment = new IndexFragment(); transaction.replace(R.id.fragment_container, indexFragment); transaction.commit();
下面则为下面的导航条目绑定监听事件
mBottomNavigationBar.setTabSelectedListener(this);
onTabSelected():当选中的导航条目发生改变时
FragmentManager fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); switch (position) { case 0: if (indexFragment == null) { indexFragment = new IndexFragment(); } transaction.replace(R.id.fragment_container, indexFragment); break; case 1: if (mapFragment== null) { mapFragment = new MapFragment(); } transaction.replace(R.id.fragment_container, mapFragment); break; case 2: if (loveFragment == null) { loveFragment = new LoveFragment(); } transaction.replace(R.id.fragment_container,loveFragment); break; case 3: if (personFragment == null) { personFragment = new PersonFragment(); } transaction.replace(R.id.fragment_container,personFragment); break; default: break; } // 事务提交 transaction.commit();
总结
代码和解析都在上方,初学者一定要仔细的使用,方能很好的掌握。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。