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();
总结
代码和解析都在上方,初学者一定要仔细的使用,方能很好的掌握。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- [快学Python3]Tuple(元组)
- HDU 1248 寒冰王座(完全背包裸题)
- [快学Python3]String(字符串)
- [快学Python3]XML解析处理 - Element Tree
- Educational Codeforces Round 21(A.暴力,B.前缀和,C.贪心)
- [快学Python3]JSON解析
- Codeforces 754A Lesha and array splitting(简单贪心)
- [快学Python3]日期和时间处理
- Codeforces Round #412 (rated, Div. 2, base on VK Cup 2017 Round 3)(A.B.C,3道暴力题,C可二分求解)
- [快学Python3]目录与文件操作
- Codeforces Round #411 (Div. 2)(A,B,C,D 四水题)
- [快学Python3]INI文件读写
- [快学Python3]迭代器和生成器
- [快学Python3]模块和包
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 视频配音篇,如何使用百度翻译将文本转换为mp3语音?
- Objective-C的hook方案/ Method Swizzling
- Python爬虫:无账号无限制获取企查查信息
- Spark Streaming——Spark第一代实时计算引擎
- bamtools分割bam文件
- 在genome browser中添加自己的注释文件
- 原理+代码|Python基于主成分分析的客户信贷评级实战
- Python办公自动化 | 从PPT到Word
- linux命令行参数getopts参数二选一
- 黎巴嫩首都爆炸能量有多大?物理学家看视频计算:300吨TNT!
- OracleDG 环境主备业务数据不同步备库报ORA-600错误的处理过程
- Xcode清理模拟器文件
- 【Android 音视频开发打怪升级:FFmpeg音视频编解码篇】六、FFmpeg简单合成MP4:视屏解封与重新封装
- 32.opengl高级光照-延迟着色法
- Tsunami:一款功能强大的通用网络安全扫描工具