总的效果就是一个可以滑动切换BottomNavigationBar的视图,其中每次切换的为Fragment。
首先我们需要设计fragment的视图,接着实现一个Fragment的逻辑功能,这里的代码就略过了(就是实现几个Fragment)。
然后我们实现一个Activity的布局来承载BottomNavigationBar + ViewPager + Fragment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_one"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="@color/colorPrimary"/>
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
对于ViewPager,我们需要重写一个适配器。在这里,由于其中放入的是fragment,所以我们要继承自FragmentPagerAdapter这个类:
public class MyPagerAdapter extends FragmentPagerAdapter {
private FragmentManager fragmentManager;
private List<Fragment> fragments;
//这里传入的是一个FragmentManger以及一个Fragment的列表,也就是所有需要的Fragment都放入这个队列中。
public MyPagerAdapter(FragmentManager fm, List<Fragment> mFragments) {
super(fm);
this.fragments = mFragments;
this.fragmentManager = fm;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
之后我们在Activity实现以下逻辑:
public class NiuBiJieMianMainActivity extends AppCompatActivity {
private ViewPager viewPager;
private List<Fragment> fragmentList;
private BottomNavigationBar bottomNavigationBar;
private final String ONE = "one";
private final String TWO = "two";
private final String THREE = "three";
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_activity_one);
bottomNavigationBar = findViewById(R.id.bottom_navigation_bar);
viewPager = findViewById(R.id.viewpager_one);
//将所有的fragment放入一个ArrayList中
fragmentList = new ArrayList<Fragment>();
Fragment f1 = new FirstFragment();
Fragment f2 = new SecondFragment();
Fragment f3 = new ThirdFragment();
fragmentList.add(f1);
fragmentList.add(f2);
fragmentList.add(f3);
FragmentManager fragmentManager = getSupportFragmentManager();
MyPagerAdapter myPagerAdapter = new MyPagerAdapter(fragmentManager, fragmentList);
//将viewPager设置Adapter
viewPager.setAdapter(myPagerAdapter);
//设置初始化的位置(即第0个位置,开始的位置)
viewPager.setCurrentItem(0);
//当做出动作时,通过此监听
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//滑动页面之后做的事,这里与BottomNavigationBar连接,设置BottomNavigationBar。这是我们可以通过滑动改变BottomNavigationBar
bottomNavigationBar.selectTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
bottomNavigationBar
.setInActiveColor(R.color.colorPrimary) //未选中状态颜色
.setActiveColor(R.color.colorAccent) //选中状态颜色
.setMode(BottomNavigationBar.MODE_FIXED) //导航栏模式
.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC) //导航栏背景模式(图标的动画样式和这个有关系 变大了)
.addItem(new BottomNavigationItem(R.drawable.bottom_1, "first"/*选中的图片样式以及文字*/).setInactiveIconResource(R.drawable.ic_launcher_background)/*未选中时样式*/)
.addItem(new BottomNavigationItem(R.drawable.bottom_2, "second").setInactiveIconResource(R.drawable.ic_launcher_background))
.addItem(new BottomNavigationItem(R.drawable.bottom_3, "third").setInactiveIconResource(R.drawable.ic_launcher_background))
.setFirstSelectedPosition(0)//初始化之后第一个选中的位置
.initialise();
//当对BottomNavigationBar进行操作时,通过下列函数监听。
bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
@Override
public void onTabSelected(int position) {
//被选中时,改变viewPager中的位置进而得到fragment的数据,即改变fragment。
viewPager.setCurrentItem(position);
}
@Override
public void onTabUnselected(int position) {
}
@Override
public void onTabReselected(int position) {
}
});
}
}