背景
自从google的design出来之后,很多控件效果实现起来已经不需要再像以前那样写自定义控件了,最近有个需求是要到页面头部标题栏的折叠效果,因此,想想用CollapsingToolbarLayout
了解
CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器,对容器中的不同View设置layout_collapseMode折叠模式,来达到不同的折叠效果。通常CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout的搭配使用折叠的效果目前已经很常见了,在网上有很多的例子和文章,小编整理了一下知识点。
属性ScrollFlags
这个标志大家都很熟悉,滚动属性,主要有五个值
- scroll: Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点:第一点,如果使用了其他值,必定要使用这个值才能起作用;第二点:如果在这个child View前面的任何其他Child View没有设置这个值,那么这个Child View的设置将失去作用
- enterAlways:快速返回模式。其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。对比scroll和scroll | enterAlways设置,发生向下滚动事件时,前者优先滚动Scrolling View,后者优先滚动Child View,当优先滚动的一方已经全部滚进屏幕之后,另一方才开始滚动。
- enterAlwaysCollapsed:enterAlways的附加值。这里涉及到Child View的高度和最小高度,向下滚动时,Child View先向下滚动最小高度值,然后Scrolling View开始滚动,到达边界时,Child View再向下滚动,直至显示完全。
- exitUntilCollapsed:这里也涉及到最小高度。发生向上滚动事件时,Child View向上滚动退出直至最小高度,然后Scrolling View开始滚动。也就是,Child View不会完全退出屏幕。
- snap:简单理解,就是Child View滚动比例的一个吸附效果。也就是说,Child View不会存在局部显示的情况,滚动Child View的部分高度,当我们松开手指时,Child View要么向上全部滚出屏幕,要么向下全部滚进屏幕,有点类似ViewPager的左右滑动。
属性contentScrim
- 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
属性expandedTitleMarginStart
- 设置扩张时候(还没有收缩时)title向左填充的距离。
属性scrimAnimationDuration
- 设置控制Toolbar收缩时,颜色变化持续时间
属性 layout_collapseMode
折叠模式,有两个值
- pin:固定模式,在折叠的时候最后固定在顶端。
- parallax:视差模式,在折叠的时候会有个视差折叠的效果。在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用
属性layout_collapseParallaxMultiplier
- 设置视差的系数,介于0.0-1.0之间
属性contentInsetStart
- Toolbar自身的边上文字到左边的距离
实现
- 布局代码
<?xml version="1.0" encoding="utf-8"?>
<com.xxxx.views.ProgressLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/progress_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/ll_bottom_layout">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/base_color"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="@+id/iv_header_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/bg_personal_homepage_head"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<RelativeLayout
android:id="@+id/rl_album_bg_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bg_personal_homepage_head"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7">
<TextView
android:id="@+id/tv_album_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/space_10"
android:layout_marginRight="@dimen/space_10"
android:layout_marginBottom="@dimen/space_10"
android:layout_above="@+id/tv_tag_1"
android:textColor="@color/white"
android:textSize="@dimen/font_size_16"
android:textStyle="bold" />
<TextView
android:id="@+id/tv_tag_1"
android:layout_width="wrap_content"
android:layout_height="@dimen/space_20"
android:layout_alignParentBottom="true"
android:layout_marginBottom="@dimen/space_15"
android:layout_marginLeft="@dimen/space_10"
android:background="@drawable/bg_white_album_tag"
android:gravity="center"
android:textColor="@color/white"
android:textSize="@dimen/font_size_11" />
<TextView
android:id="@+id/tv_tag_2"
android:layout_width="wrap_content"
android:layout_height="@dimen/space_20"
android:layout_alignParentBottom="true"
android:layout_marginBottom="@dimen/space_15"
android:layout_marginLeft="@dimen/space_10"
android:layout_toRightOf="@+id/tv_tag_1"
android:background="@drawable/bg_white_album_tag"
android:gravity="center"
android:textColor="@color/white"
android:textSize="@dimen/font_size_11" />
<TextView
android:id="@+id/tv_tag_3"
android:layout_width="wrap_content"
android:layout_height="@dimen/space_20"
android:layout_alignParentBottom="true"
android:layout_marginBottom="@dimen/space_15"
android:layout_marginLeft="@dimen/space_10"
android:layout_toRightOf="@+id/tv_tag_2"
android:background="@drawable/bg_white_album_tag"
android:gravity="center"
android:textColor="@color/white"
android:textSize="@dimen/font_size_11" />
<TextView
android:id="@+id/tv_browse_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="@dimen/space_20"
android:layout_marginRight="@dimen/space_10"
android:drawableLeft="@drawable/icon_album_detail_browse"
android:drawablePadding="@dimen/space_5"
android:textColor="@color/white"
android:textSize="@dimen/font_size_11" />
</RelativeLayout>
<!-- 这边必须使用ToolBar -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="48dp"
app:contentInsetStart="0dp"
app:contentScrim="@color/base_color"
app:layout_collapseMode="pin"
app:theme="@style/ToolbarTheme">
<com.xxxx.views.TitleBar
android:id="@+id/action_topbar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/transparent" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.xxxx.views.MySwipeRefreshLayout
android:id="@+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<com.xxxx.views.LoadMoreRecyclerView
android:id="@+id/lv_gamelist"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:clipToPadding="false"
android:overScrollMode="never"
android:scrollbars="none" />
</com.xxxx.views.MySwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="@+id/ll_bottom_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:background="@color/white">
<RelativeLayout
android:id="@+id/rl_album_support"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/white_item_selector">
<TextView
android:id="@+id/tv_album_support"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:drawableLeft="@drawable/icon_album_flower"
android:drawablePadding="@dimen/space_8"
android:gravity="center"
android:textColor="@color/font_gray"
android:textSize="@dimen/font_size_11" />
</RelativeLayout>
<View
android:layout_width="1px"
android:layout_height="match_parent"
android:layout_marginBottom="9dp"
android:layout_marginTop="9dp"
android:background="@color/album_line_color" />
<RelativeLayout
android:id="@+id/rl_album_collect"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/white_item_selector">
<TextView
android:id="@+id/tv_album_collect"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:drawableLeft="@drawable/icon_collect_selector"
android:drawablePadding="@dimen/space_8"
android:gravity="center"
android:textColor="@color/font_gray"
android:textSize="@dimen/font_size_11" />
</RelativeLayout>
<View
android:layout_width="1px"
android:layout_height="match_parent"
android:layout_marginBottom="9dp"
android:layout_marginTop="9dp"
android:background="@color/album_line_color" />
<RelativeLayout
android:id="@+id/rl_album_comment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/white_item_selector">
<TextView
android:id="@+id/tv_album_comment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:drawableLeft="@drawable/icon_album_detail_comment"
android:drawablePadding="@dimen/space_8"
android:gravity="center"
android:textColor="@color/font_gray"
android:textSize="@dimen/font_size_11" />
</RelativeLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_alignParentBottom="true"
android:layout_marginBottom="48dp"
android:background="@color/album_detail_line" />
</com.xxxx.views.ProgressLayout>
- 设置折叠收起和展开的监听 通过appBarLayout的OnOffsetChangedListener 的监听
appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
@Override
public void onStateChanged(AppBarLayout appBarLayout, State state) {
if( state == AppBarStateChangeListener.State.EXPANDED ) {
//展开状态
mTopBar.setTitle("");
}else if(state == State.COLLAPSED){
//折叠状态
mTopBar.setTitle(mAlbumName);
}else {
//中间状态
mTopBar.setTitle("");
}
}
});
- 自定义的监听
import android.support.design.widget.AppBarLayout;
public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {
private State mCurrentState = State.IDLE;
@Override
public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (i == 0) {
if (mCurrentState != State.EXPANDED) {
onStateChanged(appBarLayout, State.EXPANDED);
}
mCurrentState = State.EXPANDED;
} else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
if (mCurrentState != State.COLLAPSED) {
onStateChanged(appBarLayout, State.COLLAPSED);
}
mCurrentState = State.COLLAPSED;
} else {
if (mCurrentState != State.IDLE) {
onStateChanged(appBarLayout, State.IDLE);
}
mCurrentState = State.IDLE;
}
}
public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
public static enum State {
EXPANDED,
COLLAPSED,
IDLE
}
}
网友评论