关于CommonTabLayout实现首页菜单栏滑动点击切换

• 前几天在网上看到FlycoTabLayout这个库，功能非常强大，里面也有三个控件，有兴趣的小伙伴可以看看Github的开源库FlycoTabLayout地址，这里只介绍CommonTabLayout这种，替换传统TabLayout + ViewPager + Fragment ，不需要太复杂的繁琐设置，也无需创建Drawable文件，所以这里还是有必要记录一下，这里为大家分享首页菜单栏切换，CommonTabLayout+ViewPager可实现滑动点击切换页面效果下面贴依赖出来

implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.0.2@aar'

CommonTabLayout + ViewPger滑动切换

• 首先MainActivity的布局文件，很简单只有一个ViewPager + CommonTabLayout，如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

    </android.support.v4.view.ViewPager>


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

    <com.flyco.tablayout.CommonTabLayout
        android:id="@+id/m_layout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tl_iconGravity="TOP"
        app:tl_iconMargin="4dp"
        app:tl_iconVisible="true"
        app:tl_textSelectColor="#383838"
        app:tl_textUnselectColor="#929292"
        app:tl_textsize="18sp"
        >

    </com.flyco.tablayout.CommonTabLayout>

</LinearLayout>

• 接着MainActivity的Java文件，如下：

public class MainActivity extends AppCompatActivity {

    private ArrayList<Integer> selectedIconRes = new ArrayList<>();         //tab选中图标集合
    private ArrayList<Integer> unselectedIconRes = new ArrayList<>();       //tab未选中图标集合
    private ArrayList<String> titleRes = new ArrayList<>();                 //tab标题集合
    private ArrayList<Fragment> fsRes = new ArrayList<>();                  //fragment集合
    private List<CustomTabEntity> data = new ArrayList<>();                 //CommonTabLayout 所需数据集合
    private CommonTabLayout mLayout;
    private ViewPager mPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
        initListener();
    }

    /**
     * 初始化控件
     */
    private void initView() {
        mLayout = findViewById(R.id.m_layout);
        mPager = findViewById(R.id.m_pager);
    }

    /**
     * 初始化数据
     */
    private void initData() {
        //图片选中资源
        selectedIconRes.add(R.mipmap.home_red);
        selectedIconRes.add(R.mipmap.msg_red);
        selectedIconRes.add(R.mipmap.my_red);
        //图片未选中资源
        unselectedIconRes.add(R.mipmap.home_gray);
        unselectedIconRes.add(R.mipmap.msg_gray);
        unselectedIconRes.add(R.mipmap.my_gray);
        //标题资源
        titleRes.add("首页");
        titleRes.add("消息");
        titleRes.add("我的");
        //fragment数据
        fsRes.add(new HomeFragment());
        fsRes.add(new MsgFragment());
        fsRes.add(new MyFragment());
        //设置数据
        for (int i = 0; i < titleRes.size(); i++) {
            final int index = i;
            data.add(new CustomTabEntity() {
                @Override
                public String getTabTitle() {
                    return titleRes.get(index);
                }

                @Override
                public int getTabSelectedIcon() {
                    return selectedIconRes.get(index);
                }

                @Override
                public int getTabUnselectedIcon() {
                    return unselectedIconRes.get(index);
                }
            });
        }
        //设置数据
        mLayout.setTabData((ArrayList<CustomTabEntity>) data);
        mPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(),fsRes));
    }

    /**
     * 初始化监听
     */
    private void initListener() {
        //TabLayout监听
        mLayout.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelect(int position) {
                //显示相应的item界面
                mPager.setCurrentItem(position);
            }

            @Override
            public void onTabReselect(int position) {

            }
        });
        //ViewPager监听
        mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                //设置相应选中图标和颜色
                mLayout.setCurrentTab(i);
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
        //设置默认第0个
        mPager.setCurrentItem(0);
    }
}

• ViewPager适配器如下：

public class MyPagerAdapter extends FragmentPagerAdapter {

    private ArrayList<Fragment> fs;

    public MyPagerAdapter(FragmentManager fm,ArrayList<Fragment> fs) {
        super(fm);
        this.fs = fs;
    }

    @Override
    public Fragment getItem(int i) {
        return fs.get(i);
    }

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

• 哦对了，CommonTabLayout还自带红点数字显示功能，更加方便了我们使用，这里就给大家分享到这里了，FlycoTabLayout里面还有其他的控件，有兴趣的话也可以去Github上看看~~~