Android開源：CoordinatorTabLayout - TabLayout 和 CoordinatorLayout 相結合的折疊控件

sevent 9年前發布 | 16K 次閱讀 安卓開發 Android開發 移動開發

CoordinatorTabLayout

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

用法

Step 1

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

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

Step 2

在你自己的XML中使用它:

<cn.hugeterry.coordinatortablayout.CoordinatorTabLayout xmlns:android="


<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></code></pre> 
  
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);</code></pre> 



大功告成，好好享用吧
 
  
更多功能
 
  
添加折疊后的顏色變化效果
 
  
 
  
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);
 
  
添加返回
 
  
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.
    •  
  
 
  
LICENSE
 
  
Copyright 2017 HugeTerry.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
 
  
 
 
  
 
 本文由用戶 sevent 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！