TabLayout和CoordinatorLayout相结合的库的全面详解及修改

今天看到一个把TabLayout和CoordinatorLayout整合到一起的一个库,确实方便了开发,下面我们来说下这个库的详细使用以及如何根据我们的需求定制化开发.
首先,先来看效果图.

github链接:
https://github.com/hugeterry/CoordinatorTabLayout

CoordinatorTabLayout的使用

第一步,添加依赖
compile 'cn.hugeterry.coordinatortablayout:coordinatortablayout:1.1.0'
第二步,在布局中引用

<cn.hugeterry.coordinatortablayout.CoordinatorTabLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/coordinatortablayout"
    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"
    tools:context="com.example.ma1.toolbardemo.coorlayout.CoordinatorTabLayoutActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</cn.hugeterry.coordinatortablayout.CoordinatorTabLayout>

布局标签中要嵌套ViewPager.

第三步,代码中初始化设置.
首先,需要初始化Fragment和ViewPager,这里就不多说,随便写下(fragment就写了一个textview,显示的和标题一样)

public class CoorFragment extends Fragment {

    private static final String ARG_PARAM = "param";
    private String mTitle;

    public static CoorFragment newInstance(String title) {
        CoorFragment fragment = new CoorFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM, title);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mTitle = getArguments().getString(ARG_PARAM);
        }
    }

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

        initView(v);
        return v;
    }

    private void initView(View v) {
        TextView tv_fragment = (TextView) v.findViewById(R.id.tv_fragment);

        if(mTitle != null && mTitle.length() != 0) {
            tv_fragment.setText(mTitle);
        }
    }

}

下面是ViewPager的Adapter.

public class MyPagerAdapter extends FragmentPagerAdapter {

    private List<CoorFragment> mFragments;
    private String[] mTitles;

    public MyPagerAdapter(FragmentManager fm, List<CoorFragment> fragments , String[] titles) {
        super(fm);
        mFragments = fragments;
        mTitles = titles;
    }

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


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

    /**
     * ViewPager的tab显示(如果不重写此方法,tab上不会显示自己绑定的标题数组,也就是说tab上边什么也不会显示)
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}

下面来看activity中的代码:

public class CoordinatorTabLayoutActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private CoordinatorTabLayout mCoordinatortablayout;
    private List<CoorFragment> mFragment;
    private final String[] mTitles = {"Android", "iOS", "Web","other"};//tab标题
    private int[] mImageArray = new int[]{R.mipmap.bg_android,R.mipmap.bg_ios,R.mipmap.bg_js,R.mipmap.bg_js};//tab上边的图片数组
    private int[] mColorArray = new int[]{R.color.red,R.color.yellow,R.color.blue,R.color.blue};//tab上边图片滑上去后tab的颜色数组

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

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.vp);
        mCoordinatortablayout = (CoordinatorTabLayout) findViewById(R.id.coordinatortablayout);
        //初始化fragment
        initFragment();
        //初始化ViewPager
        initViewPager();
        //设置CoordinatorTabLayout
        mCoordinatortablayout.setTransulcentStatusBar(this) //4.4以上设置标题栏透明
                .setTitle("CoordinatorTabLayout练习")  //设置toolbar的标题
                .setBackEnable(true)//设置toolbar返回键可用
                .setImageArray(mImageArray,mColorArray)//绑定tab上边的图片和颜色,颜色可以不设置.(如果颜色不设置,默认为白色)
                .setupWithViewPager(mViewPager);//绑定ViewPager
    }

    private void initViewPager() {
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager(),mFragment,mTitles);
        mViewPager.setOffscreenPageLimit(3);
        mViewPager.setAdapter(adapter);
    }

    private void initFragment() {
        mFragment = new ArrayList<>();
        //绑定几个fragment
        for (String title : mTitles) {
            mFragment.add(CoorFragment.newInstance(title));
        }
    }
}

如果要加载网络图片:

mCoordinatortablayout.setLoadHeaderImagesListener(new LoadHeaderImagesListener() {//网络加载图片
                    @Override
                    public void loadHeaderImages(ImageView imageView, TabLayout.Tab tab) {
                        switch (tab.getPosition()) {
                            case 0 :
                                //图片加载 glide....
                                break;
                            case 1:

                                break;
                        }
                    }
                })

这都挺简单的,就不多说了,下面需要根据我们的需求动手改变各种样式.

源码修改

首先,源码中的toolbar的返回键的点击事件没有实现,这很影响用户体验,我们需要加上点击事件.
找到CoordinatorTabLayout中的setBackEnable()方法,修改如下:

public CoordinatorTabLayout setBackEnable(Boolean canBack) {
        if (canBack && mActionbar != null) {
            mActionbar.setDisplayHomeAsUpEnabled(true);
            mActionbar.setHomeAsUpIndicator(R.drawable.ic_arrow_white_24dp);
            //点击返回箭头退出
            mToolbar.setNavigationOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    ((Activity)mContext).finish();
                }
            });
        }
        return this;
    }

我们可以在源码中添加修改tab选中和未选中时颜色的方法:

 /**
     * 设置tab的颜色,选中时的颜色,下划线(指示器)颜色
     * (参数color的格式为 0xFFFF0000)
     *
     * @param color          tab未选中时颜色
     * @param selectedColor  tab选中时颜色
     * @param indicatorColor 指示器颜色
     * @return
     */
    public CoordinatorTabLayout setTabColor(int color, int selectedColor, int indicatorColor) {
        mTabLayout.setTabTextColors(color, selectedColor);
        mTabLayout.setSelectedTabIndicatorColor(indicatorColor);
        return this;
    }

添加设置指示器高度的方法:

 /**
     * 设置指示器的高度
     *
     * @param height
     * @return
     */
    public CoordinatorTabLayout setTabIndicatorHeight(int height) {
        mTabLayout.setSelectedTabIndicatorHeight(height);
        return this;
    }

添加设置tab模式的方法:

/**
     * @param tabMode  tab的模式
     * @param tabGravity tabGravity的模式
     *
     * 设置tab的模式,tab有两种模式:
     *      MODE_FIXED  表示宽度始终是tablayout控件指定的宽度，如果标签过多，那么就无限挤压控件
     *      MODE_SCROLLABLE  表示每个标签都保持自身宽度，一旦标签过多，给标题栏提供支持横向滑动的功能
     *
     *      如果为 MODE_FIXED ,可以设置tabGravity.
     *              TabGravity有两个可选参数：
     *              GRAVITY_FILL    让每个标签平分TabLayout的全部宽度
     *              GRAVITY_CENTER  让每个标签显示自身宽度，然后所有标签居中显示
     *
     */
    public CoordinatorLayout setTabMode(int tabMode,int tabGravity) {
        mTabLayout.setTabMode(tabMode);
        if(tabMode == MODE_FIXED) {
            mTabLayout.setTabGravity(tabGravity);
        }
        return this;
    }

效果如图:

其他的改变字体大小等的设置,需要直接在依赖库中的xml布局中修改,只需修改TabLayout的属性即可,下面给个TabLayout属性修改的链接,挺全面的:
http://www.jianshu.com/p/2b2bb6be83a8

最后,把本文修改的依赖库及demo的链接留下:
http://download.csdn.net/download/huchengzhiqiang/9995908