BottomNavigationBar+Viewpager+Fragment遇到的坑

BottomNavigationBar+Viewpager+Fragment遇到的坑

之前看了Android学习之BottomNavigationBar实现Android特色底部导航栏后觉得这效果很酷，想要实现和他一样的底部效果，但是在最后的效果是不能切换页面作为一名安卓小白只能下载他的DEMO，结果发现他的可以运行出来但是我的就不可以，最后终于知道是要用fragment+viewpager结合才行

我想开始记录一下实习安卓中每天遇到的问题和解决方案，供大家参考

###按照他的代码打后需要改动的地方有

1.添加五个fragment，每一个fragment都是独立的（我设置成第一，第二，第三，第四，第五个fragment）
fragment的代码如下

public class SecondFragment extends Fragment {


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view= inflater.inflate(R.layout.second_fragment_layout,container,false);

        return view;
    }


}

每一个fragment的布局如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#FFFFFF"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView
        android:id="@+id/tv"
        android:text="dongtai"
        android:textColor="@color/deep_black"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        />
</LinearLayout>

都是类似的我就不一一贴出来了
2.修改mainActivity的界面布局，换成是viewpager+BottomNavigationBar

<?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:background="#ececec">
    <android.support.v4.view.ViewPager
       android:id="@+id/vp_main_View"
       android:layout_weight="1"
       android:layout_width="match_parent"
       android:layout_height="0dp">
   </android.support.v4.view.ViewPager>
    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />
</LinearLayout>

3.MainAvtivity中初始化viewpager

private void initViewPager() {
        viewPager = (ViewPager) findViewById(R.id.vp_main_View);

        fragments = new ArrayList<Fragment>();
        fragments.add(new FirstFragment());
        fragments.add(new SecondFragment());
        fragments.add(new ThirdFragment());
        fragments.add(new FourthFragment());
        fragments.add(new FifthFragment());

        viewPager.setAdapter(new SectionsPagerAdapter(getSupportFragmentManager(), fragments));
        viewPager.addOnPageChangeListener(this);
        viewPager.setCurrentItem(0);
    }

4最关键的是

viewPager.addOnPageChangeListener(this);

和bottomNavigationBar.setTabSelectedListener(this);
这就是说bar的点击改变了viewpager的点击事件，然后在viewpager里面改变里面的每一个fragment
我作为小白才突然恍然大悟

而在BAR的三个需要实现的方法中，最重要的是在

  @Override
    public void onTabSelected(int position) {
        viewPager.setCurrentItem(position);
    }

添加viewPager的相对于的改变ITEM

而在viewPager的三个需要实现的方法中，也同样

  public void onPageSelected(int position) {
        bottomNavigationBar.selectTab(position);
    }

需要实现BAR的哪个TAB被点击了

5.最后一步就是要有自己的适配器，因为每一个viewpager要有自己的适配器才能知道哪个选择要做什么改变

class SectionsPagerAdapter extends FragmentPagerAdapter {
        List<Fragment> fragments;

        public SectionsPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
            super(fm);
            this.fragments = fragments;
        }

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

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

最后附上实现效果