ViewPager+BottomNavigationView+F

1.ViewPager

ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。其与BottomNavigationView和Fragment配合使用可以很好的实现Android底部导航栏及屏幕滑动切换碎片的功能
首先在活动布局里加入ViewPager控件：用法同普通控件一样

  <android.support.v4.view.ViewPager
        android:id="@+id/mViewPager"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="wrap_content"></android.support.v4.view.ViewPager>

接着在MainActivity中使用

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;//

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager=(ViewPager) findViewById(R.id.mViewPager);//获取到ViewPager


        //ViewPager的监听
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                bottomNavigationView.getMenu().getItem(position).setChecked(true);
               //滑动页面后做的事，这里与BottomNavigationView结合，使其与正确page对应
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //底部导航栏有几项就有几个Fragment
        final ArrayList<Fragment> fgLists=new ArrayList<>(3);
        fgLists.add(new ManageFragment());
        fgLists.add(new FindFragment());
        fgLists.add(new MyFragment());


      //设置适配器用于装载Fragment
        FragmentPagerAdapter mPagerAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fgLists.get(position);  //得到Fragment
            }

            @Override
            public int getCount() {
                return fgLists.size();  //得到数量
            }
        };
        mViewPager.setAdapter(mPagerAdapter);   //设置适配器
        mViewPager.setOffscreenPageLimit(2); //预加载剩下两页

        //以上就将Fragment装入了ViewPager
  }

}

2.BottomNavigationView

在 build.gradle 文件中增加依赖：

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

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

在同样的活动布局里加入BottomNavigationView控件，为了美观，可以在ViewPager和BottomNavigationView中间加个View

<View
        android:layout_width="match_parent"
        android:background="#3399cc"   
        android:layout_height="1dp" />

<android.support.design.widget.BottomNavigationView
        android:id="@+id/mBottom"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:menu="@menu/navigation"></android.support.design.widget.BottomNavigationView>

其中有一项 app:menu="@menu/navigation" 用于底部导航栏的具体显示
需要我们建一个menu的xml文件
我们在res/menu下新建一个navigation.xml（没有menu文件夹就新建一个），然后在xml里添加自己想要的目录选项

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:title="管理"     //名字
        android:icon="@drawable/ic_manage"   //显示的图标
        android:id="@+id/manager_item"/>

    <item
        android:id="@+id/find_item"
        android:icon="@drawable/ic_find"
        android:title="发现" />

    <item
        android:icon="@drawable/ic_my"
        android:id="@+id/my_item"
        android:title="我的" />

</menu>

图中底部导航栏上的蓝色条即为刚才加的View

bottom.JPG

在MainActivity中使用

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private BottomNavigationView bottomNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager=(ViewPager) findViewById(R.id.mViewPager);
        bottomNavigationView=(BottomNavigationView) findViewById(R.id.mBottom);

      //设置点击监听
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId())
                {
                    //根据navagatin.xml中item的id进行case
                    case R.id.manager_item:
                        mViewPager.setCurrentItem(0);
                      //跳到对应ViewPager的page
                        break;
                    case R.id.find_item:
                        mViewPager.setCurrentItem(1);
                     
                        break;
                    case R.id.my_item:
                        mViewPager.setCurrentItem(2);
                     
                        break;
                }
                return false;
            }
        });

      //ViewPager的一系列设置
      .................
      ...................  
  }
}
            

以上ViewPager和BottomNavigationView的结合就使用完成

3.Fragment

碎片（fragment）里面就是我们具体要呈现给大家的东西，fragment的用法需要一个类和一个布局文件，我们新建一个类继承自Fragment

public class MyFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //R.layout.fragment_my为该fragment的布局
        View view=inflater.inflate(R.layout.fragment_my,container,false);
        return view;
    }

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

为该fragment新建一个布局文件,该布局很简单，就加入了一个TextView，可以自行拓展加入各种控件等

<?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">
    <TextView
        android:text="my"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

剩余两个fragment同上一样

结尾

以上三者结合即可实现基本的底部导航栏UI布局设计