先上图
预览效果1.创建一个android studio工程并依赖最新的Design Support Library(25) 在app的build.gradle中:
compile 'com.android.support:design:25.0.0'
接下来就可以使用BottomNavigationView控件了。
2.为MainActivity创建如下布局:
<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.xuejinwei.bottomnavigationview.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottom_navigation"/>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemIconTint="@drawable/bottom_navigation_color_selector"
app:itemTextColor="@drawable/bottom_navigation_color_selector"
app:menu="@menu/menu_bottom_navigation"/>
<!--阴影-->
<View
android:layout_width="match_parent"
android:layout_height="8dp"
android:layout_above="@id/bottom_navigation"
android:background="@drawable/shadow"/>
</RelativeLayout>
- app:itemBackground:设置item的背景,对应setItemBackgroundResource(int resId)方法
- app:itemIconTintUsed:设置icon的颜色,对应setItemIconTintList(ColorStateList tint)方法
- app:itemTextColor:设置文字的颜色,对应setIteTextColor(ColorStateList textColor)方法
3.创建Fragment和ViewPagerAdapter为ViewPager服务,代码略去。
4.为ViewPager设置adapter ,添加fragment:
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(DemoFragment.newInstance("拨号"));
adapter.addFragment(DemoFragment.newInstance("信息"));
adapter.addFragment(DemoFragment.newInstance("我的"));
viewPager.setAdapter(adapter);
}
5.为BottomNavigationView添加OnNavigationItemSelectedListener,复写OnNavigationItemSelected方法,这里通过item的id判断选择不同的时候ViewPagerAdapter选中的位置。
bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.item_call:
viewPager.setCurrentItem(0);
break;
case R.id.item_mail:
viewPager.setCurrentItem(1);
break;
case R.id.item_person:
viewPager.setCurrentItem(2);
break;
}
return false;
}
});
6.为ViewPagerAdapter设置OnPageChangeListener,本文重要代码在此,当ViewPagerAdapter滑动fragment的时候BottomNavigationView的选中状态也跟着变化
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (prevMenuItem != null) {
prevMenuItem.setChecked(false);
} else {
bottomNavigationView.getMenu().getItem(0).setChecked(false);
}
bottomNavigationView.getMenu().getItem(position).setChecked(true);
prevMenuItem = bottomNavigationView.getMenu().getItem(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
github BottomNavigationViewDemo
网友评论