第一种用radiobutton实现
https://wizardforcel.gitbooks.io/w3school-android/content/75.html
布局文件，使用radiogroup
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/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" style="@style/tab_menu_item" android:drawableTop="@drawable/qq" android:text="@string/jihua"/> <RadioButton android:id="@+id/rbb_2" style="@style/tab_menu_item" android:drawableTop="@drawable/pp" android:text="@string/dating"/> <RadioButton android:id="@+id/rbb_3" style="@style/tab_menu_item" 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
package com.example.administrator.miaomiao; import android.graphics.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) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_allactivity); fManager = getSupportFragmentManager(); rg_tab_bar = (RadioGroup) findViewById(R.id.rg_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; } fTransaction.commit(); } //隐藏所有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(R.drawable.oo); //当这个图片被绘制时，给他绑定一个矩形 ltrb规定这个矩形 drawable_tuijian.setBounds(0, 0, 40, 40); //设置图片在文字的哪个方向 rb_3.setCompoundDrawables(null, drawable_tuijian, null, null); } }
第二种在github上搜的，博客地址为https://www.jianshu.com/p/ce8e09cda486。
因为公司好多项目会用到底部导航栏，大都千篇一律，无非2-5个Tab（可能会有些点击动画、红点提示或者中间多个加号）总是重复相同的操作...所以...很懒的我希望几行代码就能实现这个效果（少敲一行是一行）
效果图
轻松实现.gif
实现
- 依赖
Step 1. Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Step 2. Add the dependency
implementation 'com.github.forvv231:EasyNavigation:1.0.3'
1、基础版
xml
<com.next.easynavigation.view.EasyNavigationBar
android:id="@+id/navigationBar"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.next.easynavigation.view.EasyNavigationBar>
注：因EasyNavigationBar包含ViewPager，需设置充满
Activity
private String[] tabText = {"首页", "发现", "消息", "我的"};
//未选中icon
private int[] normalIcon = {R.mipmap.index, R.mipmap.find, R.mipmap.message, R.mipmap.me};
//选中时icon
private int[] selectIcon = {R.mipmap.index1, R.mipmap.find1, R.mipmap.message1, R.mipmap.me1};
private List<android.support.v4.app.Fragment> fragments = new ArrayList<>();
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())
.build();
怎么样 是不是很Easy啊(￣▽￣)~*
2、加号版本
private String[] tabText = {"首页", "发现", "", "消息", "我的"};
//未选中icon
private int[] normalIcon = {R.mipmap.index, R.mipmap.find, R.mipmap.add_image, R.mipmap.message, R.mipmap.me};
//选中时icon
private int[] selectIcon = {R.mipmap.index1, R.mipmap.find1, R.mipmap.add_image, R.mipmap.message1, R.mipmap.me1};
navigationBar.titleItems(tabText)
.normalIconItems(normalIcon)
.selectIconItems(selectIcon)
.fragmentList(fragments)
.mode(EasyNavigationBar.MODE_ADD)
.fragmentManager(getSupportFragmentManager())
.build();
- 资源数组中添加文字和图片，不需要文字可传空串
- 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)
.build();
- 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)