android BottomNavigationView(底部导航栏)

BottomNavigationView 很早之前就在 Material Design 中出现了，但是直到 Android Support Library 25 中才增加了 BottomNavigationView 控件。

添加依赖

compile 'com.android.support:design:25.3.1'

在 res/menu/ 目录下创建一个 xml 文件（没有该目录则手动创建一个），我将其命名为 navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/one"
android:icon="@mipmap/foot_ask_image"
android:title="call" />
<item
android:id="@+id/two"
android:icon="@mipmap/foot_ask_image_action"
android:title="message" />
<item
android:id="@+id/three"
android:icon="@mipmap/foot_look_live"
android:title="setting" />
<item
android:id="@+id/me"
android:icon="@mipmap/foot_look_live"
android:title="我的" />

</menu>

布局中

<?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.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_above="@+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
<TextView
android:id="@+id/text"
android:layout_above="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@android:color/darker_gray"/>
<!--itemIconTint 图标颜色 选中和未选中
menu  是刚才写的navigation-->
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="@android:color/white"
app:itemIconTint="@color/button_text"
app:itemTextColor="@color/button_text"
app:menu="@menu/navigation" />
</RelativeLayout>

里面itemTextColor使用的是ColorStateList着色

注意

底部导航栏高度默认是 56dp。

菜单元素只能是 3~5 个。如果个数少于3个或者多于5个，则会报错。

如果大于3个则会变得很丑

具体案例:BottomNavigationView+ViewPager

ViewPager

public class ViewPagerAdapter extends FragmentPagerAdapter {

private final List<Fragment> mFragmentList = new ArrayList<>();

public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}

@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}

@Override
public int getCount() {
return mFragmentList.size();
}

public void addFragment(Fragment fragment) {
mFragmentList.add(fragment);
}

}

Fragment

public class LocationFragment extends Fragment {

private View mView;
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

mView=inflater.inflate(R.layout.fragmet_one,container,false);
TextView textView= (TextView) mView.findViewById(R.id.text);
textView.setText("第一个");
return mView;
}
}

Activity

public class BottomActivitys extends AppCompatActivity{

private BottomNavigationView bottomNavigationView;
private ViewPager viewPager;
private MenuItem menuItem;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.bottoms);
bottomNavigationView= (BottomNavigationView) findViewById(R.id.navigation);
viewPager= (ViewPager) findViewById(R.id.viewpager);
/**
* 切换
*/
bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.one:
viewPager.setCurrentItem(0);
break;
case R.id.two:
viewPager.setCurrentItem(1);
break;
case R.id.three:
viewPager.setCurrentItem(2);
break;
case R.id.me:

viewPager.setCurrentItem(3);
break;

}
return false;
}
});

/**
* viewpager滑动切换
*/
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
if (menuItem != null) {
menuItem.setChecked(false);
} else {
bottomNavigationView.getMenu().getItem(0).setChecked(false);
}
menuItem = bottomNavigationView.getMenu().getItem(position);
menuItem.setChecked(true);
}

@Override
public void onPageScrollStateChanged(int state) {
}
});
/**
* 禁止滑动
*/
viewPager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return true;
}
});
setupViewPager(viewPager);
}

private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

adapter.addFragment(new LocationFragment());
adapter.addFragment(new TwoFragment());
adapter.addFragment(new ThreeFragment());
adapter.addFragment(new LocationFragment());
viewPager.setAdapter(adapter);
}
}

运行如下：

具体请看Demo中的BottomActivitys