玩Android项目开发------首页（ViewPager+BottomNavigationBar实现导航栏）

进入主界面后，主要分为5个模块：首页、知识体系、公众号、项目、导航，首先先将页面框架搭建起来，使用ViewPager + BottomNavigationBar实现布局。

1、搜集底部导航栏的图片。
在Android项目中，考虑到内存，我们还是尽量避免从外界引入图片，因此推荐使用svg图片。
svg图片的获取，可以从阿里的矢量图库获取，也可以从其他的地方获取。

但是Android不支持svg矢量图，只能转换为Vector图片：

然后选择本地文件，将svg图片转换为vector图片

<vector android:height="24dp" android:viewportHeight="1024"
    android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" 
        android:pathData="M796,924L796,512c0,-19.88 16.12,-36 36,-36h41.09L512,114.91 150.91,476L192,476c19.88,0 36,16.12 36,36v412h158v-86c0,-58.54 47.46,-106 106,-106h40c58.54,0 106,47.46 106,106v86h158zM868,548v412c0,19.88 -16.12,36 -36,36L602,996c-19.88,0 -36,-16.12 -36,-36L566,838c0,-18.78 -15.22,-34 -34,-34h-40c-18.78,0 -34,15.22 -34,34v122c0,19.88 -16.12,36 -36,36L192,996c-19.88,0 -36,-16.12 -36,-36L156,548L64,548c-32.07,0 -48.13,-38.78 -25.46,-61.46l448,-448c14.06,-14.06 36.85,-14.06 50.91,0l448,448C1008.14,509.22 992.07,548 960,548h-92z"/>
</vector>

在对应的Drawable目录下，就可以选择这个vector图片。

2、使用ViewPager+BottomNavigationBar实现底部导航栏

添加BottomNavigationBar的依赖：

com.ashokvarma.android:bottom-navigation-bar:2.0.5

主界面布局：

<androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ></androidx.viewpager.widget.ViewPager>
    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bnb_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:layout_alignParentBottom="true"
        ></com.ashokvarma.bottomnavigation.BottomNavigationBar>

首先将导航栏完成，设置一下BottomNavigationBar：

bnb_main.setMode(BottomNavigationBar.MODE_FIXED)
                .setActiveColor(R.color.colorRed)
                .addItem(new BottomNavigationItem(R.drawable.ic_main,"主页"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tixi,"体系"))
                .addItem(new BottomNavigationItem(R.drawable.ic_icon_wechat,"公众号"))
                .addItem(new BottomNavigationItem(R.drawable.ic_project,"项目"))
                .addItem(new BottomNavigationItem(R.drawable.ic_daohang,"导航"))
                .setFirstSelectedPosition(0)
                .initialise();

简单介绍一下各个参数：
（1）setMode：设置模式，一般都是MODE_FIXED将导航栏填满；
（2）setActiveColor：点击底部Tab，显示的颜色，这里设置为红色；
（3）addItem：添加底部导航栏的各个Tab，一共是5个；
（4）setFirstSelectedPosition：默认第几个Tab选中，这里选第1个默认选中。
（5）initialise：初始化完成。

看下效果：


这个gif图还没学会咋做，只能多列出几个图显示下效果，学会之后再放gif。

接下来，给ViewPager设置适配器，把5个Fragment添加进去。

@Override
    public void getFragmentList(List<Fragment> fragmentList) {
        adapter = new MainViewPagerAdapter(getSupportFragmentManager(),0,fragmentList);
        vp_main.setAdapter(adapter);
    }

Model层代码：

@Override
    public void getFragmentList(ListCallback listCallback) {
        List<Fragment> fragmentList = new ArrayList<>();
        MainFragment mainFragment = new MainFragment();
        fragmentList.add(mainFragment);
        StructureFragment sFragment = new StructureFragment();
        fragmentList.add(sFragment);
        WeChatFragment wFragment = new WeChatFragment();
        fragmentList.add(wFragment);
        ProjectFragment pFragment = new ProjectFragment();
        fragmentList.add(pFragment);
        TourFragment tFragment = new TourFragment();
        fragmentList.add(tFragment);
        listCallback.complete(fragmentList);
    }

ViewPager适配器代码：

public class MainViewPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> fragmentList;

    public MainViewPagerAdapter(@NonNull FragmentManager fm, int behavior, List<Fragment> fragmentList) {
        super(fm, behavior);
        this.fragmentList = fragmentList;
    }

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

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

查看效果：


好了，首页的导航栏和Fragment界面都已经做好了，后续会继续更新各个模块的功能实现。