ANDROID BottomNavigationBar底部导航栏的实现示例
更新时间：2017年10月23日 09:02:22 作者：张瑾瑜
本篇文章主要介绍了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();
总结
代码和解析都在上方，初学者一定要仔细的使用，方能很好的掌握。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Android10 App启动Activity源码分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
Android LayoutTransiton实现简单的录制按钮
这篇文章主要介绍了Android LayoutTransiton实现简单的录制按钮，主要实现开始，暂停，停止和显示录制时间长度，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
下面小编就为大家带来一篇Android 自定义View实现单击和双击事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
本篇文章主要介绍了ionic监听android返回键实现“再按一次退出”功能，非常具有实用价值，需要的朋友可以参考下2018-02-02
Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果（8）
这篇文章主要介绍了Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
首选项这个名词对于熟悉Android的朋友们一定不会感到陌生，它经常用来设置软件的运行参数。本篇文章主要介绍详解Android首选项框架的使用实例，有兴趣的可以了解一下。2016-11-11
本文主要介绍了Android中的深度链接技术实战，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Android Studio和Gradle使用不同位置JDK的问题解决
这篇文章主要介绍了Android Studio和Gradle使用不同位置JDK的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了Android-SPI的相关资料，帮助大家更好的理解和学习使用Android，感兴趣的朋友可以了解下2021-02-02
这篇文章主要为大家详细介绍了Android自定义View实现自动吸附功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
最新评论