CoordinatorTabLayout

CoordinatorTabLayout是一個自定義組合控件,可快速實現TabLayout與CoordinatorLayout相結合的樣式繼承至CoordinatorLayout, 在該組件下面使用了CollapsingToolbarLayout包含TabLayout

相關文檔介紹:http://hugeterry.cn/dreams/559

用法

Step 1

在gradle文件中加入下面的依賴:

dependencies {
    compile 'cn.hugeterry.coordinatortablayout:coordinatortablayout:1.2.0'
}

Step 2

在你自己的XML中使用它:

<cn.hugeterry.coordinatortablayout.CoordinatorTabLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatortablayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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>

Step 3

在使用它的界面添加以下設置:
1.setTitle(String title):設置Toolbar標題
2.setupWithViewPager(ViewPager viewPager):將寫好的viewpager設置到該控件當中
3.setImageArray(int[] imageArray):根據tab數量設置好頭部的圖片數組，並傳到該控件當中

        //構建寫好的fragment加入到viewpager中
        initFragments();
        initViewPager();
        //頭部的圖片數組
        mImageArray = new int[]{
                R.mipmap.bg_android,
                R.mipmap.bg_ios,
                R.mipmap.bg_js,
                R.mipmap.bg_other};

        mCoordinatorTabLayout = (CoordinatorTabLayout) findViewById(R.id.coordinatortablayout);
        mCoordinatorTabLayout.setTitle("Demo")
                .setImageArray(mImageArray)
                .setupWithViewPager(mViewPager);

大功告成，好好享用吧

更多功能

添加摺疊後的顏色變化效果

setImageArray(int[] imageArray, int[] colorArray):如果你想要有頭部摺疊後的顏色變化，可將之前設置好的圖片數組以及根據tab數量設置的顏色數組傳到該控件當中

        mColorArray = new int[]{
                android.R.color.holo_blue_light,
                android.R.color.holo_red_light,
                android.R.color.holo_orange_light,
                android.R.color.holo_green_light};
        mCoordinatorTabLayout.setImageArray(mImageArray, mColorArray);

設置頭部狀態欄透明

setTranslucentStatusBar(Activity activity):設置頭部狀態欄透明，在android4.4 及以上版本生效

mCoordinatorTabLayout.setTranslucentStatusBar(activity);

設置導航欄透明

setTranslucentNavigationBar(Activity activity):設置導航欄透明，在android4.4 及以上版本生效

mCoordinatorTabLayout.setTranslucentNavigationBar(activity);

添加返回

setBackEnable(Boolean canBack):設置Toolbar的返回按鈕

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        mCoordinatorTabLayout.setBackEnable(true);
        ...
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            finish();
        }
        return super.onOptionsItemSelected(item);
    }

通過網絡加載頭部圖片

選擇用網絡來加載圖片。可實現以下接口:setLoadHeaderImagesListener(LoadHeaderImagesListener loadHeaderImagesListener):設置獲取頭部圖片的操作

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        mCoordinatorTabLayout.setTitle("Demo")
                .setBackEnable(true)
                .setContentScrimColorArray(mColorArray)
                .setLoadHeaderImagesListener(new LoadHeaderImagesListener() {
                    @Override
                    public void loadHeaderImages(ImageView imageView, TabLayout.Tab tab) {
                        switch (tab.getPosition()) {
                            case 0:
                                //加載圖片
                                break;
                            ...
                        }
                    }
                })
                .setupWithViewPager(mViewPager);
    }

你也可以選擇用Glide/Picasso等網絡框架來實現，代碼例子

獲取子控件

getActionBar():獲取該組件中的ActionBar
getTabLayout():獲取該組件中的TabLayout
getImageView():獲取該組件中的ImageView

更多代碼

屬性

• app:contentScrim -> color.默認爲?attr/colorPrimary
• app:tabIndicatorColor -> color.
• app:tabTextColor -> color.