实现的效果如下图,既可以切换下面的标签来切换fragment,也可以直接左右滑动切换fragment。
1、首先当然是依赖导包
compile 'com.android.support:support-v4:25.3.1' compile 'com.android.support:design:25.3.1'
2、xml文件中布局
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:overScrollMode="never"
android:scrollbars="none"
app:itemBackground="@color/orange"
app:itemIconTint="@color/white"
app:itemTextColor="@color/white"
app:menu="@menu/menu_bottom_nav">
</android.support.design.widget.BottomNavigationView>
每个item的icon的颜色 app:itemIconTint="@color/white"
每个item的文字的颜色 app:itemTextColor="@color/white"
3、上面的控件还需要一个menu_bottom_nav.xml放置于res/menu中
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/bottom_nav_movie"
android:enabled="true"
android:icon="@mipmap/ic_location_on_white_24dp"
android:title="@string/movie"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/bottom_nav_photo"
android:enabled="true"
android:icon="@mipmap/ic_find_replace_white_24dp"
android:title="@string/photo"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/bottom_nav_ui"
android:enabled="true"
android:icon="@mipmap/ic_favorite_white_24dp"
android:title="@string/ui"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/bottom_nav_net"
android:enabled="true"
android:icon="@mipmap/ic_book_white_24dp"
android:title="@string/network"
app:showAsAction="ifRoom"/>
</menu>
4、初始化(包括Fragment、viewPager、 BottomNavigationView)
private void initView() {
mBottomNav = (BottomNavigationView) findViewById(R.id.bottom_nav);
mPager = (ViewPager) findViewById(R.id.viewpager);
fragmentList = new ArrayList<Fragment>();
mMovieFragment = MovieFragment.newInstance(mResources.getString(R.string.movie));
mPhotoFragment = PhotoFragment.newInstance(mResources.getString(R.string.photo));
mUiFragment = UiFragment.newInstance(mResources.getString(R.string.ui));
mNetworkFragment = NetworkFragment.newInstance(mResources.getString(R.string.network));
fragmentList.add(mMovieFragment);
fragmentList.add(mPhotoFragment);
fragmentList.add(mUiFragment);
fragmentList.add(mNetworkFragment);
//给ViewPager设置适配器
MainFragmentpagerAdapter adapter = new MainFragmentpagerAdapter(getSupportFragmentManager(), fragmentList);
mPager.setAdapter(adapter);
mPager.setCurrentItem(0);//设置当前显示标签页为第一页
}
5、 MainFragmentpagerAdapter
package com.example.doubanrxjava2demo.adapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* Created by gd02881 on 2017/7/4.
*/
public class MainFragmentpagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragList;
public MainFragmentpagerAdapter(FragmentManager fm, List<Fragment> fragList) {
super(fm);
this.fragList = fragList;
}
@Override
public Fragment getItem(int position) {
return fragList.get(position);
}
@Override
public int getCount() {
return fragList.size();
}
}
6、事件监听
private void setListener() {
mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
mBottomNav.setSelectedItemId(R.id.bottom_nav_movie);
break;
case 1:
mBottomNav.setSelectedItemId(R.id.bottom_nav_photo);
break;
case 2:
mBottomNav.setSelectedItemId(R.id.bottom_nav_ui);
break;
case 3:
mBottomNav.setSelectedItemId(R.id.bottom_nav_net);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
mBottomNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.bottom_nav_movie:
mPager.setCurrentItem(0);
break;
case R.id.bottom_nav_photo:
mPager.setCurrentItem(1);
break;
case R.id.bottom_nav_ui:
mPager.setCurrentItem(2);
break;
case R.id.bottom_nav_net:
mPager.setCurrentItem(3);
break;
}
return true;
}
});
}