快速实现TabLayout和CoordinatorLayout:CoordinatorTabLayout
说明:CoordinatorTabLayout是一个自定义组合控件,可快速实现TabLayout与CoordinatorLayout相结合的样式 继承至CoordinatorLayout, 在该组件下面使用了CollapsingToolbarLayout包含TabLayout
该库可以帮你快速实现TabLayout和CoordinatorLayout的组合效果。
效果如下:
用法
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