Android使用TabLayout+Viewpager+ Fragment实现了底部导航栏的效果

首先TabLayout一般都是配合Viewpager使用的，Viewpager里的Fragment随着顶部的Tab一起联动，这种场景再熟悉不过了。效果如图所示：

效果图00.png

一、 配置build.gradle (添加如下代码)

build.gradle.png

二、values属性文件

1. arrays.xml

    
        首页
        发现
        分类
        购物车
        我的
    

2. colors.xml

    #3F51B5
    #303F9F
    #FF4081
    #f9f9f9

3. strings.xml

    My Application

    
    Hello blank fragment

4. styles.xml

三、drawable图形文件
tab1.xml

其他如图所示：

drawable.png

四、layout布局文件

1. activity_mian.xml

2.建立五个fragment布局文件
如图所示：

fragment_blank_fragment2.xml图.png

五、建立ViewPager适配器(MyFragmentPagerAdapter)

public class MyFragmentPagerAdapter extends FragmentPagerAdapter{


    private ListfragmentList;
    private String[] titles;


    public MyFragmentPagerAdapter(FragmentManager fragmentManager, ListfragmentList, String[] titles){
        super(fragmentManager);
        this.fragmentList = fragmentList;
        this.titles = titles;
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

}

六、生成五个BlankFragment
如图：

BlankFragment2.png

七、最主要的一步
MainActivity

public class MainActivity extends AppCompatActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化各控件
        initView();
    }
    /**
     * 初始化各控件
     */
    private void initView(){

        //获取数据 在values/arrays.xml中进行定义然后调用
        String[] tabTitle = getResources().getStringArray(R.array.tab_titles);
        //将fragment装进列表中
        List fragmentList = new ArrayList<>();
        fragmentList.add(new BlankFragment1());
        fragmentList.add(new BlankFragment2());
        fragmentList.add(new BlankFragment3());
        fragmentList.add(new BlankFragment4());
        fragmentList.add(new BlankFragment5());
        //声明viewPager
        ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
        //viewpager加载adapter
        viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList, tabTitle));
        //viewPager事件
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {


            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //定义TabLayout
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab);
        //TabLayout的事件
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //选中了tab的逻辑
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //未选中tab的逻辑
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //再次选中tab的逻辑
            }
        });
        //TabLayout加载viewpager
        //一行代码和ViewPager联动起来，简单粗暴。
        tabLayout.setupWithViewPager(viewPager);
        Drawable d = null;
        for (int i = 0; i < tabLayout.getTabCount(); i++){
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            switch (i){
                case 0:
                    d = getResources().getDrawable(R.drawable.tab1);
                    break;
                case 1:
                    d = getResources().getDrawable(R.drawable.tab2);
                    break;
                case 2:
                    d = getResources().getDrawable(R.drawable.tab3);
                    break;
                case 3:
                    d = getResources().getDrawable(R.drawable.tab4);
                    break;
                case 4:
                    d = getResources().getDrawable(R.drawable.tab5);
                    //tintManager.setStatusBarTintResource(R.color.colorAccent);
                    break;
            }
            tab.setIcon(d);
        }


    }

}