一个炫酷的 TabLayout 与 CoordinatorLayout 相结合的自定义控件

最新推荐文章于 2024-08-15 13:29:08 发布

Wei_Leng

最新推荐文章于 2024-08-15 13:29:08 发布

阅读量1.4k

点赞数

分类专栏： Android 不错文章转载文章标签： android

Android 不错文章转载专栏收录该内容

1078 篇文章 15 订阅

订阅专栏

CoordinatorTabLayout

项目地址： hugeterry/CoordinatorTabLayout

简介：一个炫酷的 TabLayout 与 CoordinatorLayout 相结合的自定义控件

更多：作者提 Bug 示例 APK

标签：

自定义控件- TabLayout- CoordinatorLayout-

中文版文档

CoordinatorTabLayout is a custom composite control that quickly implements the combination of TabLayout and CoordinatorLayout. Inherited to the CoordinatorLayout, in the following components used CollapsingToolbarLayout contains TabLayout.

show

Usage

Step 1

Add the following to your build.gradle:

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

Step 2

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

show
Use it in your own code:
1.setTitle(String title):Set the CoordinatorTabLayout's title.
2.setupWithViewPager(ViewPager viewPager):To link the two together.
3.setImageArray(int[] imageArray):Set the image array of the header according to the number of tabs and pass it to the control.

        //Add the fragment to the viewpager
        initFragments();
        initViewPager();
        //Image array
        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);

Finish, enjoy it.

Set the content scrim

show

setImageArray(int[] imageArray, int[] colorArray):Set the color array to use for the content scrim for each 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);

Set translucent status bar

show

setTransulcentStatusBar(Activity activity):Set translucent status bar,Support android4.4 and above.

mCoordinatorTabLayout.setTransulcentStatusBar(activity);

Set back enable

setBackEnable(Boolean canBack):To enable the Up button for an activity that has a parent activity.

    @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);
    }

Load header images from network

setLoadHeaderImagesListener(LoadHeaderImagesListener loadHeaderImagesListener):Set the listener that gets the header images.

    @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:
                                //load header images
                                break;
                            ...
                        }
                    }
                })
                .setupWithViewPager(mViewPager);
    }

You also can load header images using glide/picasso，Sample