这次来写一下CollapsingToolbarLayout+TabLayout的搭配使用,展开显示图片,设置文字阴影,收起隐藏图片。
添加依赖
compile 'com.android.support:design:25.2.0'
布局
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginStart="20dp"
app:contentScrim="@color/colorPrimary"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
</android.support.design.widget.CollapsingToolbarLayout>
设置CollapsingToolbarLayout收起时显示的颜色。
app:contentScrim="@color/colorPrimary"
CollapsingToolbarLayout默认的title会跟着CollapsingToolbarLayout展开收起,由于这里要固定title,所以需要将CollapsingToolbarLayout的title取消掉,在toolBar里面重新写一个title。
app:titleEnabled="false"
设置CollapsingToolbarLayout的scrollFlags:
app:layout_scrollFlags="scroll|exitUntilCollapsed"
layout_scrollFlags还有另外3个参数,有兴趣的可以自己试试看。
另外CollapsingToolbarLayout需要嵌套在AppBarLayout里,嵌套顺序为CoordinatorLayout —— AppBarLayout —— CollapsingToolbarLayout —— Toolbar。
下面贴上完整的布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ckz.mydemo.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bars"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginStart="20dp"
app:contentScrim="@color/colorPrimary"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.6"
android:background="#fff">
<ImageView
android:id="@+id/user_bg"
android:layout_width="match_parent"
android:layout_height="230dp"
android:scaleType="centerCrop"
android:src="@mipmap/bg" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:orientation="vertical"
android:layout_below="@id/user_bg">
<android.support.design.widget.TabLayout
android:id="@+id/user_tab"
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="#fff"
app:tabIndicatorColor="@color/colorPrimary"
app:tabSelectedTextColor="@color/colorPrimary"
app:tabTextColor="#000">
</android.support.design.widget.TabLayout>
</LinearLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NAME"
android:textSize="19sp"
android:textColor="#fff"
android:gravity="center"
android:layout_centerInParent="true"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="@+id/user_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
PS:一定要记住添加app:layout_behavior,否则viewpager的内容会全屏显示。
监听展开状态,显示文字阴影
布局写好了,CollapsingToolbarLayout的展开收起就有效果了。接下来就需要对展开状态进行监听,来设置文字是否设置阴影。
ps:这里的监听是对AppBarLayout进行监听的!
appbars.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset == 0) {
if (state != CollapsingToolbarLayoutState.EXPANDED) {
userName.setShadowLayer(10,5,5, Color.BLACK);//展开设置阴影
state = CollapsingToolbarLayoutState.EXPANDED;//修改状态标记为展开
}
} else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
if (state != CollapsingToolbarLayoutState.COLLAPSED) {
userName.setShadowLayer(0,0,0,Color.BLACK);//折叠取消阴影
state = CollapsingToolbarLayoutState.COLLAPSED;//修改状态标记为折叠
}
} else {
if (state != CollapsingToolbarLayoutState.INTERNEDIATE) {
if(state == CollapsingToolbarLayoutState.COLLAPSED){
userName.setShadowLayer(0,0,0,Color.BLACK);//中间到展开取消阴影
}else {
userName.setShadowLayer(10,5,5,Color.BLACK);//折叠到中间设置阴影
}
state = CollapsingToolbarLayoutState.INTERNEDIATE;//修改状态标记为中间
}
}
}
});
绑定TabLayout和ViewPager
private void bindPager() {
titleList.add("f1");
titleList.add("f2");
titleList.add("f3");
f1 = new MyFragment();
f2 = new MyFragment();
f3 = new MyFragment();
viewList.add(f1);
viewList.add(f2);
viewList.add(f3);
usertab.setTabMode(TabLayout.MODE_FIXED);
usertab.addTab(usertab.newTab().setText(titleList.get(0)));
usertab.addTab(usertab.newTab().setText(titleList.get(1)));
usertab.addTab(usertab.newTab().setText(titleList.get(2)));
mAdapter = new MyPagerAdapter(getSupportFragmentManager(),viewList,titleList);
usertab.setupWithViewPager(userpager);
userpager.setAdapter(mAdapter);
}
下面贴上完整的代码
MainActivity:
public class MainActivity extends AppCompatActivity {
private ImageView userbg;
private TabLayout usertab;
private Toolbar toolbar;
private AppBarLayout appbars;
private ViewPager userpager;
private TextView userName;
private MyPagerAdapter mAdapter;
private List<String> titleList = new ArrayList<>(); //页卡标题集合
private ArrayList<Fragment> viewList = new ArrayList<>(); //页卡视图集合
private MyFragment f1,f2,f3;
private CollapsingToolbarLayoutState state;
private enum CollapsingToolbarLayoutState {
EXPANDED,
COLLAPSED,
INTERNEDIATE
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
setExpand();
bindPager();
}
private void bindPager() {
titleList.add("f1");
titleList.add("f2");
titleList.add("f3");
f1 = new MyFragment();
f2 = new MyFragment();
f3 = new MyFragment();
viewList.add(f1);
viewList.add(f2);
viewList.add(f3);
usertab.setTabMode(TabLayout.MODE_FIXED);
usertab.addTab(usertab.newTab().setText(titleList.get(0)));
usertab.addTab(usertab.newTab().setText(titleList.get(1)));
usertab.addTab(usertab.newTab().setText(titleList.get(2)));
mAdapter = new MyPagerAdapter(getSupportFragmentManager(),viewList,titleList);
usertab.setupWithViewPager(userpager);
userpager.setAdapter(mAdapter);
}
private void setExpand() {
appbars.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset == 0) {
if (state != CollapsingToolbarLayoutState.EXPANDED) {
userName.setShadowLayer(10,5,5, Color.BLACK);//展开设置阴影
state = CollapsingToolbarLayoutState.EXPANDED;//修改状态标记为展开
}
} else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
if (state != CollapsingToolbarLayoutState.COLLAPSED) {
userName.setShadowLayer(0,0,0,Color.BLACK);//折叠取消阴影
state = CollapsingToolbarLayoutState.COLLAPSED;//修改状态标记为折叠
}
} else {
if (state != CollapsingToolbarLayoutState.INTERNEDIATE) {
if(state == CollapsingToolbarLayoutState.COLLAPSED){
userName.setShadowLayer(0,0,0,Color.BLACK);//中间到展开取消阴影
}else {
userName.setShadowLayer(10,5,5,Color.BLACK);//折叠到中间设置阴影
}
state = CollapsingToolbarLayoutState.INTERNEDIATE;//修改状态标记为中间
}
}
}
});
}
private void initView() {
userpager = (ViewPager) findViewById(R.id.user_pager);
appbars = (AppBarLayout) findViewById(R.id.app_bars);
toolbar = (Toolbar) findViewById(R.id.toolbar);
usertab = (TabLayout) findViewById(R.id.user_tab);
userbg = (ImageView) findViewById(R.id.user_bg);
userName = (TextView) findViewById(R.id.user_name);
}
}