在Android5.0之后，Android给我们提供了非常丰富关于UI设计的材料设计库，其中就有非常实用的折叠式布局
常见问题：
1. ToolBar中自定义的title不能居中
设置CollapsingToolbarLayout的app:titleEnabled="false"即可
背景图片没有完全沉浸在状态栏里边
设置即可
常见模板布局1：
效果图：
image
image.gif
布局代码：
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="卡片1"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/news_content" />
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_discuss"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"/>
image.gif
常见模板布局2：
效果图：
image
image.gif
布局代码：
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_done" />
image.gif
1.CoordinatorLayout
根布局必须使用CoordinatorLayout，即协调式布局，用来协调AppBarLayout和Scrollview之间的滚动关系
2.AppBarLayout
AppBarLayout必须依赖父控件CoordinatorLayout，AppBarLayout为ChildrenView提供了一个`app:layout_scrollFlags属性来设置ScrollView滚动时Childview的滚动模式`，ScrollFlags共有五种常量值，对应的值为：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed；
2.1 app:layout_scrollFlags="scroll" :往下滚ScrollView优先滚动
`
image
image.gif
`
2.2 app:layout_scrollFlags="scroll|enterAlways" :往下滚ChildView优先滚动
`
image
image.gif
`
2.3 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"：往下滚动ChildView优先滚动，且滚动到指定的最小高度，然后开始滚动ScrollView，直到ScrollView滚动完毕再开始滚动ChildView
`
image
image.gif
`
2.4 app:layout_scrollFlags="scroll|exitUntilCollapsed"：往上滚动ChildView优先滚动，且滚动到指定的最小高度，然后开始滚动ScrollView
`
image
image.gif
`
2.5 app:layout_scrollFlags="scroll|snap"：往下滚ScrollView优先滚动，然后ChildView开始滚动，但是ChildView必须滚动到一定的比例才能继续往下滚，否则ChildView滚动没有到达一定比例，手松了之后就会回弹回去，类似ViewPager左滑右滑的那种效果
`
image
image.gif
`
3.CollapsingToolbarLayout
CollapsingToolbarLayout必须依赖父控件AppBarLayout，其中非常重要的几个属性如下
3.1 title
标题，布局展开时放大显示在图片底部，布局折叠时缩小显示在Toolbar左侧。注意，没有设置这个属性时，默认使用Toolbar的标题；
3.2 statusBarScrim
顶部视图折叠状态下，状态栏的遮罩色。通常这样设置：app:statusBarScrim="?attr/colorPrimaryDark"，即style样式中定义的沉浸式状态栏颜色。这个属性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);(支持API19及以上版本，位于setContentView语句前面)一起使用，使顶部视图展开时图片能够延伸到状态栏位置显示，如效果图中所示；
3.3 contentScrim
内容遮罩，上下滚动时图片上面显示和隐藏的遮罩色，Toolbar位置的的背景色；通常这样设置：app:contentScrim="?attr/colorPrimary"，即显示为Toolbar颜色，应用的主题色；
3.4 layout_collapseMode：ChildView使用
折叠模式，设置其他控件滚动时自身的交互行为，有两种取值：parallax，折叠视差效果，比如上述效果图中的图片；pin，固定别针效果，比如上图中的Toolbar；
3.5 layout_collapseParallaxMultiplier：ChildView使用
不折叠视差系数，配合parallax模式使用，取值有点类似alpha(不透明度)，在0.0 ～ 1.0之间，默认值为0.5。当设置为1.0，滚动列表时图片不会折叠移动；
4.Toolbar
4.1Toolbar初始设置
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbar.setNavigationOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
onBackPressed();
}
});
image.gif
4.2 Activity样式设置：
@mipmap/navbar_icon_return
image.gif
#673AB7
#512DA8
#FF4081
image.gif
问题反馈
在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流
QQ：303704981
email：[email protected]
weibo：@geduo_83
关于作者
var geduo_83 = {
nickName : "geduo_83",
site : "http://www.weibo.com/geduo83"
}
image.gif