首页 > 系统 > Android > 正文

ANDROID BottomNavigationBar底部导航栏的实现示例

2019-10-22 18:25:15
字体:
来源:转载
供稿:网友

第一种介绍的就是使用开源库,因为使用开源库最简单,也更加的符合我们的审美标准,同时BottomNavigationBar还是符合当前的Material Design标准的。

效果展示

ANDROID,BottomNavigationBar,实现底部导航栏,安卓底部导航栏实现

ANDROID,BottomNavigationBar,实现底部导航栏,安卓底部导航栏实现

ANDROID,BottomNavigationBar,实现底部导航栏,安卓底部导航栏实现

ANDROID,BottomNavigationBar,实现底部导航栏,安卓底部导航栏实现

依赖

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

  1. 在xml代码使用android:bnbMode属性
  2. 在Java代码中使用setMode方法

MODE_DEFAULT:如果Item的个数<=3就会使用MODE_FIXED模式,否则使用MODE_SHIFTING模式。
MODE_FIXED:填充模式,未选中的Item会显示文字,没有换挡动画。
MODE_SHIFTING:换挡模式,未选中的Item不会显示文字,选中的会显示文字。在切换的时候会有一个像换挡的动画。

BackgroundStyle

  1. 在xml代码使用android:bnbBackgroundStyle属性
  2. 在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();

总结

代码和解析都在上方,初学者一定要仔细的使用,方能很好的掌握。

源码:BottomBarOne.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


注:相关教程知识阅读请移步到Android开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表