android底部导航栏实现
爱的呼唤简谱第⼀种⽤radiobutton实现
布局⽂件，使⽤radiogroup
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="schemas.android/apk/res/android"
xmlns:app="schemas.android/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/ly_top_bar"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/colorPrimary"/>
<RadioGroup
android:layout_width="match_parent"
android:layout_height="56dp"
android:id="@+id/rg_tab_bar"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rbb_1"
android:drawableTop="@drawable/qq"
android:text="@string/jihua"/>
甜蜜花园<RadioButton
android:id="@+id/rbb_2"
android:drawableTop="@drawable/pp"
android:text="@string/dating"/>
<RadioButton
android:id="@+id/rbb_3"
android:drawableTop="@drawable/oo"
android:text="@string/wode"/>
</RadioGroup>
<View
android:id="@+id/div_tab_bar"
android:layout_width="match_parent"
android:layout_height="2px"
android:layout_above="@id/rg_tab_bar" />
<FrameLayout
android:id="@+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/div_tab_bar"
android:layout_below="@id/ly_top_bar">
</FrameLayout>
</RelativeLayout>
activity⽂件，每个界⾯是⼀个fragment
ample.administrator.miaomiao;
aphics.drawable.Drawable;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
public class allactivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
private RadioGroup rg_tab_bar;
private RadioButton rb_1;
private RadioButton rb_2;
private RadioButton rb_3;
//Fragment Object
private Fragment1 fg1;
private Fragment2 fg2;
private Fragment3 fg3;
private FragmentManager fManager;
// private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_allactivity);
fManager = getSupportFragmentManager();
rg_tab_bar = (RadioGroup) findViewById(_tab_bar);
rg_tab_bar.setOnCheckedChangeListener(this);
//获取第⼀个单选按钮，并设置其为选中状态
rb_1 = (RadioButton) findViewById(R.id.rbb_1);
rb_2 = (RadioButton) findViewById(R.id.rbb_2);
rb_3 = (RadioButton) findViewById(R.id.rbb_3);
rb_1.setChecked(true);
initView();
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
FragmentTransaction fTransaction = fManager.beginTransaction();
hideAllFragment(fTransaction);
switch (checkedId){
case R.id.rbb_1:
if(fg1 == null){
fg1 = new Fragment1();
fTransaction.add(R.id.ly_content,fg1, "Fragment1");
}else{
fTransaction.show(fg1);
}
break;
case R.id.rbb_2:
if(fg2 == null){
fg2 = new Fragment2();
fTransaction.add(R.id.ly_content,fg2, "Fragment2");
}else{
fTransaction.show(fg2);
}
break;
case R.id.rbb_3:
if(fg3 == null){
fg3 = new Fragment3();
fTransaction.add(R.id.ly_content,fg3, "Fragment3");
}else{
fTransaction.show(fg3);
}
break;
}
fTransactionmit();
}
//隐藏所有Fragment
private void hideAllFragment(FragmentTransaction fragmentTransaction){
if(fg1 != null)fragmentTransaction.hide(fg1);
if(fg2 != null)fragmentTransaction.hide(fg2);
// if(fg3 != null)fragmentTransaction.hide(fg3);
if(fg3 != null)fragmentTransaction.hide(fg3);
}
private void initView() {
//定义底部标签图⽚⼤⼩和位置
Drawable drawable_news = getResources().getDrawable(R.drawable.qq);
//当这个图⽚被绘制时，给他绑定⼀个矩形 ltrb规定这个矩形
drawable_news.setBounds(0, 0, 40, 40);
//设置图⽚在⽂字的哪个⽅向
rb_1.setCompoundDrawables(null, drawable_news, null, null);
//定义底部标签图⽚⼤⼩和位置
Drawable drawable_live = getResources().getDrawable(R.drawable.pp);
//当这个图⽚被绘制时，给他绑定⼀个矩形 ltrb规定这个矩形
drawable_live.setBounds(0, 0, 40, 40);夏家三千金手机铃声
/
/设置图⽚在⽂字的哪个⽅向
rb_2.setCompoundDrawables(null, drawable_live, null, null);
//定义底部标签图⽚⼤⼩和位置
Drawable drawable_tuijian = getResources().getDrawable();
//当这个图⽚被绘制时，给他绑定⼀个矩形 ltrb规定这个矩形
ving rhamesdrawable_tuijian.setBounds(0, 0, 40, 40);
//设置图⽚在⽂字的哪个⽅向
rb_3.setCompoundDrawables(null, drawable_tuijian, null, null);
}
}
因为公司好多项⽬会⽤到底部导航栏，⼤都千篇⼀律，⽆⾮2-5个Tab（可能会有些点击动画、红点提
⽰或者中间多个加号）总是重复相同的操作...所以...很懒的我希望⼏⾏代码就能实现这个效果（少敲⼀⾏是⼀⾏）
在最好的时光遇见你效果图
轻松实现.gif
实现
依赖
Step 1. Add it in your adle at the end of repositories:
allprojects {
生活大爆炸杀青repositories {
...
maven { url 'jitpack.io' }
}
Step 2. Add the dependency
1、基础版
xml
&asynavigation.view.EasyNavigationBar
android:id="@+id/navigationBar"
android:layout_width="match_parent"
android:layout_height="match_parent">
注：因EasyNavigationBar包含ViewPager，需设置充满
Activity
private String[] tabText = {"⾸页", "发现", "消息", "我的"};
//未选中icon
private int[] normalIcon = {R.mipmap.index, R.mipmap.find, ssage, };
//选中时icon
private int[] selectIcon = {R.mipmap.index1, R.mipmap.find1, ssage1, 1};
navigationBar = findViewById(R.id.navigationBar);
fragments.add(new FirstFragment());
fragments.add(new SecondFragment());
fragments.add(new FirstFragment());
fragments.add(new SecondFragment());
navigationBar.titleItems(tabText)
.normalIconItems(normalIcon)
.selectIconItems(selectIcon)
.fragmentList(fragments)
.fragmentManager(getSupportFragmentManager())
怎么样是不是很Easy啊(￣▽￣)~*
2、加号版本
private String[] tabText = {"⾸页", "发现", "", "消息", "我的"};
//未选中icon
private int[] normalIcon = {R.mipmap.index, R.mipmap.find, R.mipmap.add_image, ssage, }; //选中时icon
navigationBar.titleItems(tabText)
.normalIconItems(normalIcon)
.selectIconItems(selectIcon)
.fragmentList(fragments)
.mode(EasyNavigationBar.MODE_ADD)
.fragmentManager(getSupportFragmentManager())
资源数组中添加⽂字和图⽚，不需要⽂字可传空串
mode设置为EasyNavigationBar.MODE_ADD
基础版和加号版本.png
3、中间添加⾃定义view
View view = LayoutInflater.from(this).inflate(R.layout.custom_add_view, null);
navigationBar.titleItems(tabText)
.normalIconItems(normalIcon)
.selectIconItems(selectIcon)
.fragmentManager(getSupportFragmentManager())
.fragmentList(fragments)
.mode(EasyNavigationBar.MODE_ADD_VIEW)
.addCustomView(view)
.addLayoutRule(EasyNavigationBar.RULE_CENTER)
addCustomView添加⾃定义好的view
mode设置为EasyNavigationBar.MODE_ADD_VIEW
⾃定义中间按钮
属性
什么？不过瘾？看看下⾯给你提供可以更改的属性，满⾜你的需求（xml也可设置）navigationBar.titleItems(tabText) //必传 Tab⽂字集合
.normalIconItems(normalIcon) //必传 Tab未选中图标集合
.selectIconItems(selectIcon) //必传 Tab选中图标集合
.fragmentList(fragments) //必传 fragment集合
.fragmentManager(getSupportFragmentManager()) //必传
.iconSize(20) //Tab图标⼤⼩
.tabTextSize(10) //Tab⽂字⼤⼩
.tabTextTop(2) //Tab⽂字距Tab图标的距离
.normalTextColor(Color.parseColor("#666666")) //Tab未选中时字体颜⾊
.selectTextColor(Color.parseColor("#333333")) //Tab选中时字体颜⾊
.scaleType(ImageView.ScaleType.CENTER_INSIDE) //同 ImageView的ScaleType
.navigationBackground(Color.parseColor("#80000000")) //导航栏背景⾊
.onTabClickListener(new EasyNavigationBar.OnTabClickListener() { //Tab点击事件 return true 页⾯不会切换 @Override
public boolean onTabClickEvent(View view, int position) {
return false;
}
})
.smoothScroll(false) //点击Tab Viewpager切换是否有动画
.canScroll(false) //Viewpager能否左右滑动
.mode(EasyNavigationBar.MODE_ADD) //默认MODE_NORMAL 普通模式 //MODE_ADD 带加号模式
.anim(Anim.ZoomIn) //点击Tab时的动画
.addIconSize(36) //中间加号图⽚的⼤⼩
.addLayoutHeight(100) //包含加号的布局⾼度背景透明所以加号看起来突出⼀块
.navigationHeight(40) //导航栏⾼度
.lineHeight(100) //分割线⾼度默认1px
.lineColor(Color.parseColor("#ff0000"))
.addLayoutRule(EasyNavigationBar.RULE_BOTTOM) //RULE_CENTER 加号居中addLayoutHeight调节位置 EasyNavigationBar.RULE_BOTTOM 加号在导航栏靠下 .addLayoutBottom(10) //
加号到底部的距离
.hasPadding(true) //true ViewPager布局在导航栏之上 false有重叠
.hintPointLeft(-3) //调节提⽰红点的位置hintPointLeft hintPointTop（看⽂档说明）
.hintPointTop(-3)
.hintPointSize(6) //提⽰红点的⼤⼩
.msgPointLeft(-10) //调节数字消息的位置msgPointLeft msgPointTop（看⽂档说明）
.msgPointTop(-10)
.msgPointTextSize(9) //数字消息中字体⼤⼩
.msgPointSize(18) //数字消息红⾊背景的⼤⼩
.addAlignBottom(true) //加号是否同Tab⽂字底部对齐 RULE_BOTTOM时有效；
.addTextTopMargin(50) //加号⽂字距离加号图⽚的距离
.
addTextSize(15) //加号⽂字⼤⼩
.addNormalTextColor(Color.parseColor("#ff0000")) //加号⽂字未选中时字体颜⾊
.addSelectTextColor(Color.parseColor("#00ff00")) //加号⽂字选中时字体颜⾊
需求（简单列举⼏个）
需求1：红点或数字消息提⽰
//数字消息⼤于99显⽰99+ ⼩于等于0不显⽰，取消显⽰则可以navigationBar.setMsgPointCount(2, 0)
navigationBar.setMsgPointCount(2, 109);
navigationBar.setMsgPointCount(0, 5);
//红点提⽰第⼆个参数控制是否显⽰
清除也可以这样（这样的⽅法名可能直观些）
//清除第四个红点提⽰
navigationBar.clearHintPoint(3);
//清除第⼀个数字消息
数字消息的位置可通过msgPointLeft、msgPointTop来控制，默认这两个值为Tab图标的⼀半
数字消息位置属性说明.png
注：红点提⽰同理，通过hintPointLeft和hintPointTop两个属性调节位置
需求2：半开放式登录、点击“我的”Tab、不切换页⾯、需要进⾏登录操作
.onTabClickListener(new EasyNavigationBar.OnTabClickListener() {
@Override
public boolean onTabClickEvent(View view, int position) {
if (position == 3) {
Toast.makeText(AddActivity.this, "请先登录", Toast.LENGTH_SHORT).show();
return true;
}
return false;
}
onTabClickEvent⽅法中return true则拦截事件、不进⾏页⾯切换
注：这种情况canScroll不能设置为true、否则滑动仍会切换页⾯
需求3：加号突出（以前这种⽐较多，现在好多都在导航栏⾥⾯、了好多）
简书和爱奇艺两种加号.png
发布评论