效果图
QQ截图20180918111315.png
准备工作：
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation 'com.android.support:appcompat-v7:28.0.0-rc02'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
//添加design包
implementation 'com.android.support:design:28.0.0-rc02'
}
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/menu_navigation_home"
android:icon="@mipmap/home"
android:title="主页"></item>
<item
android:id="@+id/menu_navigation_novel"
android:icon="@mipmap/novel"
android:title="小说"></item>
<item
android:id="@+id/menu_navigation_person"
android:icon="@mipmap/person"
android:title="个人"></item>
</menu>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorBlue" android:state_checked="true"></item>
<item android:color="@color/colorPrimary" android:state_checked="false"></item>
</selector>
QQ截图20180918135458.png
注：准备工作里面需要做的就是
①添加design依赖；
②color（颜色）的一些添加
③添加两个资源文件，位置在上图中清晰的标注了出来。
推荐两个网站：
[RGB颜色对照表](http://www.cnblogs.com/android100/p/android-rgb-list.html)
[阿里巴巴矢量图标库](http://iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3)
使用：
xml：
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/act_main_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/act_main_navigationView"></android.support.v4.view.ViewPager>
<android.support.design.widget.BottomNavigationView
android:id="@+id/act_main_navigationView"
android:layout_width="match_parent"
android:layout_height="48dp"//控件高度
android:layout_alignParentBottom="true"//底部
android:background="?android:attr/windowBackground"//背景
app:itemBackground="@null"//item背景
app:itemIconTint="@drawable/navigation_selector"//item图标状态
app:itemTextColor="@drawable/navigation_selector"//item文字状态
app:menu="@menu/navigation"></android.support.design.widget.BottomNavigationView>
</RelativeLayout>
注：我的Android studio版本4.1.3，在书写itemIconTint和itemTextColor属性时是没有drawable提示的，需要自己写完
activity
public class MainActivity extends BaseActivity {
@BindView(R.id.act_main_viewpager)
ViewPager viewPager;
@BindView(R.id.act_main_navigationView)
BottomNavigationView bottomNavigationView;
/**
* 主页
*/
Fragment_Home fragment_home;
/**
* 小说
*/
Fragment_Novel fragment_novel;
/**
* 个人
*/
Fragment_Person fragment_person;
/**
* viewpager适配器
*/
Viewpager_Adapter adapter_viewpager;
MenuItem menuItem;
@Override
public void init() {
fragment_home = new Fragment_Home();
fragment_novel = new Fragment_Novel();
fragment_person = new Fragment_Person();
bottomNavigationView.setOnNavigationItemSelectedListener(onNavigationItemSelectedListener);
viewPager.setOnPageChangeListener(onPageChangeListener);
adapter_viewpager = new Viewpager_Adapter(getSupportFragmentManager());
viewPager.setAdapter(adapter_viewpager);
ArrayList<Fragment> arrayList = new ArrayList<>();
arrayList.add(fragment_home);
arrayList.add(fragment_novel);
arrayList.add(fragment_person);
adapter_viewpager.setArrayList(arrayList);
}
private BottomNavigationView.OnNavigationItemSelectedListener onNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
menuItem = menuItem;
switch (menuItem.getItemId()) {
case R.id.menu_navigation_home:
viewPager.setCurrentItem(0);
return true;
case R.id.menu_navigation_novel:
viewPager.setCurrentItem(1);
return true;
case R.id.menu_navigation_person:
viewPager.setCurrentItem(2);
return true;
default:
break;
}
return false;
}
};
private ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageSelected(int i) {
if (menuItem != null) {
menuItem.setChecked(false);
} else {
bottomNavigationView.getMenu().getItem(0).setChecked(false);
}
menuItem = bottomNavigationView.getMenu().getItem(i);
menuItem.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int i) {
}
};
@Override
public int getLayout() {
return R.layout.activity_main;
}
}
注：activity我是书写了通用型的baseActivity你们demo使用时按平时继承的appCompatActivity就行，里面最重要的就是两个事件的监听
适配器
public class Viewpager_Adapter extends FragmentPagerAdapter {
private ArrayList<Fragment> arrayList;
public void setArrayList(ArrayList<Fragment> arrayList) {
this.arrayList = arrayList;
notifyDataSetChanged();
}
public Viewpager_Adapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int i) {
return arrayList.get(i);
}
@Override
public int getCount() {
return arrayList != null ? arrayList.size() : 0;
}
}
总结
关于此文的底部导航栏没什么多得好说的，只是design添加了一个新的控件，更加美化，更加简单我们操作而已。我们不必再向以前一样用那种很复杂的布局来弄
最后感谢博主：Afanbaby
网友评论