注册

快速实现TabLayout和CoordinatorLayout:CoordinatorTabLayout

说明:CoordinatorTabLayout是一个自定义组合控件,可快速实现TabLayout与CoordinatorLayout相结合的样式 继承至CoordinatorLayout, 在该组件下面使用了CollapsingToolbarLayout包含TabLayout


该库可以帮你快速实现TabLayout和CoordinatorLayout的组合效果。

效果如下:

d9ddbeb8792b67fb814ef17956859946.gif

用法

Step 1

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

1.dependencies {
2.compile 'cn.hugeterry.coordinatortablayout:coordinatortablayout:1.0.5'
3.}


Step 2

在你自己的XML中使用它:

01.<cn.hugeterry.coordinatortablayout.CoordinatorTabLayout xmlns:android="http://schemas.android.com/apk/res/android"
02.xmlns:app="http://schemas.android.com/apk/res-auto"
03.android:id="@+id/coordinatortablayout"
04.android:layout_width="match_parent"
05.android:layout_height="match_parent">
06. 
07.<android.support.v4.view.ViewPager
08.android:id="@+id/vp"
09.android:layout_width="match_parent"
10.android:layout_height="match_parent"
11.app:layout_behavior="@string/appbar_scrolling_view_behavior" />
12.</cn.hugeterry.coordinatortablayout.CoordinatorTabLayout>

Step 3

在使用它的界面添加以下设置:
1.setTitle(String title):设置Toolbar标题
2.setupWithViewPager(ViewPager viewPager):将写好的viewpager设置到该控件当中
3.setImageArray(int[] imageArray):根据tab数量设置好头部的图片数组,并传到该控件当中

01.//构建写好的fragment加入到viewpager中
02.initFragments();
03.initViewPager();
04.//头部的图片数组
05.mImageArray = new int[]{
06.R.mipmap.bg_android,
07.R.mipmap.bg_ios,
08.R.mipmap.bg_js,
09.R.mipmap.bg_other};
10. 
11.mCoordinatorTabLayout = (CoordinatorTabLayout) findViewById(R.id.coordinatortablayout);
12.mCoordinatorTabLayout.setTitle("Demo")
13..setImageArray(mImageArray)
14..setupWithViewPager(mViewPager);


大功告成,好好享用吧

更多功能

添加折叠后的颜色变化效果

setImageArray(int[] imageArray, int[] colorArray):如果你想要有头部折叠后的颜色变化,可将之前设置好的图片数组以及根据tab数量设置的颜色数组传到该控件当中

1.mColorArray = new int[]{
2.android.R.color.holo_blue_light,
3.android.R.color.holo_red_light,
4.android.R.color.holo_orange_light,
5.android.R.color.holo_green_light};
6.mCoordinatorTabLayout.setImageArray(mImageArray, mColorArray);

添加返回

setBackEnable(Boolean canBack):设置Toolbar的返回按钮

01.@Override
02.protected void onCreate(Bundle savedInstanceState) {
03....
04.mCoordinatorTabLayout.setBackEnable(true);
05....
06.}
07.@Override
08.public boolean onOptionsItemSelected(MenuItem item) {
09.if (item.getItemId() == android.R.id.home) {
10.finish();
11.}
12.return super.onOptionsItemSelected(item);
13.}

获取子控件

getActionBar():获取该组件中的ActionBar getTabLayout():获取该组件中的TabLayout

Github地址:https://github.com/hugeterry/CoordinatorTabLayout

下载地址:CoordinatorTabLayout-master.zip

0 个评论

要回复文章请先登录注册