1 CollapsingToolbarLayout 布局
CollapsingToolbarLayout 是基于 Toolbar 的布局。它可以让 Toolbar 的效果变得更加华丽。
注意：CollapsingToolbarLayout 只能作为 AppBarLayout 的直接子布局。
现在我们创建一个空活动来显示猫的详情：
然后在 activity_cat.xml 中编写界面布局，主要分为两个部分，一个是标题栏，另一个是内容：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:material="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--标题栏布局-->
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
material:contentScrim="?attr/colorPrimary"
material:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/cat_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
material:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
material:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--内容布局-->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
material:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="35dp"
material:cardCornerRadius="4dp">
<TextView
android:id="@+id/cat_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp" />
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<!--用于评论的悬浮按钮-->
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/comment"
material:layout_anchor="@id/app_bar_layout"
material:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
- 整体布局使用 CoordinatorLayout。
- 定义了
xmlns:material="http://schemas.android.com/apk/res-auto"命名空间。
标题栏布局：
- 标题栏布局使用 AppBarLayout，内层嵌套了 CollapsingToolbarLayout。
- CollapsingToolbarLayout 中的 contentScrim 可指定当标题栏趋于折叠以及折叠之后的背景色；而 layout_scrollFlags 中的 scroll 表示 CollapsingToolbarLayout 会随着内容的滚动而滚动； layout_scrollFlags 中的 exitUntilCollapsed 表示折叠后会保留在界面中（不会被移出屏幕）。
- 在 CollapsingToolbarLayout 中，定义了 ImageView 与 Toolbar。即这个标题栏是由普通标题栏加图片组合而成的。其中有一个 layout_collapseMode 属性，它用于设置折叠模式。pin 表示在折叠过程中使用保持，就像被大头针定住了一样；parallax 表示在折叠过程中会产生视差。
内容布局：
- 外层使用 NestedScrollView，它不仅支持使用滚动的方式来查看屏幕外的数据，还能嵌套响应滚动事件。我们还通过 layout_behavior 来指定布局行为。
- 因为 NestedScrollView 内部只允许存在一个直接的子布局，所以我们可以先嵌套一个 LinearLayout，然后再其内部放入更多内容。
- 这里使用 TextView 来显示内容，然后把它放入 CardView （卡片式布局）中。
- 我们为 CardView 设置了外边距，还设置了圆角。这些工作都是为了让页面变得更好看。
最后我们还加了一个悬浮按钮（FloatingActionButton）：
- 首先把按钮图片 png ，放在 drawable 文件夹下。
- 通过 layout_anchor 来设置锚点，让悬浮按钮出现在标题栏区域内。
- 通过 layout_anchorGravity 让按钮出现在标题栏区域的右下角。
2 活动类
public class CatActivity extends AppCompatActivity {
/**
* 猫名
*/
public static final String CAT_NAME = "cat_name";
/**
* 猫图片 ID
*/
public static final String CAT_IMAGE_ID = "cat_image_id";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_cat);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {//启用 HomeAsUp 按钮（返回箭头）
actionBar.setDisplayHomeAsUpEnabled(true);
}
Intent intent = getIntent();
//设置标题
CollapsingToolbarLayout layout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
String catName = intent.getStringExtra(CAT_NAME);
layout.setTitle(catName);
//设置图片
int catImageId = intent.getIntExtra(CAT_IMAGE_ID, 0);
ImageView imageView = (ImageView) findViewById(R.id.cat_image_view);
Glide.with(this).load(catImageId).into(imageView);//加载图片
//设置内容
TextView contentView = (TextView) findViewById(R.id.cat_text_view);
contentView.setText(generateContent(catName));
}
/**
* 生成内容
*
* @param catName 猫名
* @return
*/
private String generateContent(String catName) {
//实践中，会根据参数名称，返回对应的内容
return "俄罗斯蓝猫（Russian Blue），历史上曾被称做阿契安吉蓝猫，曾有过三种不同的名字。最初是阿契安吉蓝猫，直到20世纪40年代才有现在的名字，另外有段时间它则叫做马耳他猫。证据显示，这种猫确实原产于俄罗斯，因为已在俄罗斯寒带地区发现了同种的猫。俄罗斯蓝猫体型细长，大而直立的尖耳朵，脚掌小而圆，走路像是用脚尖在走。身上披着银蓝色光泽的短被毛，配上修长苗条的体型和轻盈的步态，尽显一派猫中的贵族风度。";
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home://点击 HomeAsUp 按钮时
finish();//关闭当前活动（即返回上一个活动）
return true;
}
return super.onOptionsItemSelected(item);
}
}
- 我们在标题栏启用 HomeAsUp 按钮（返回箭头），用于关闭当前活动。
- 将 CollapsingToolbarLayout 传递过来的猫类型，作为标题。
- 接着使用 Glide 来加载图片。
- 然后设置内容。
- 最后在 onOptionsItemSelected 中处理 HomeAsUp 按钮的点击事件。
现在我们要处理首页活动 RecyclerView 的点击事件，当点击某只猫时，打开它的详情活动页：
public class CatAdapter extends RecyclerView.Adapter<CatAdapter.ViewHolder> {
private Context context;
private List<Cat> cats = new ArrayList<>();
public CatAdapter(List<Cat> cats) {
this.cats = cats;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (context == null) {//设置上下文环境
context = parent.getContext();
}
View view = LayoutInflater.from(context).inflate(R.layout.cat_item, parent, false);
//处理 RecyclerView 点击事件
final ViewHolder holder = new ViewHolder(view);
holder.cardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getAdapterPosition();
Cat cat = cats.get(position);
Intent intent = new Intent(context, CatActivity.class);
intent.putExtra(CatActivity.CAT_NAME, cat.getType());
intent.putExtra(CatActivity.CAT_IMAGE_ID, cat.getImgId());
context.startActivity(intent);
}
});
return holder;
}
...
}
运行效果：
3 融合系统顶部状态栏
利用 fitsSystemWindows 属性我们可以将标题栏中的图片与系统顶部状态栏融合起来。
注意： 因为我们这里的 ImageView 嵌套的很深，所以必须把它以及它的祖先布局中的 fitsSystemWindows 都设置为 true，才能真正生效：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:material="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<!--标题栏布局-->
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
material:contentScrim="?attr/colorPrimary"
material:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
>
<ImageView
android:id="@+id/cat_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
material:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
/>
...
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>
接着把状态栏的颜色设置为透明，即
<item name="android:statusBarColor">@android:color/transparent</item>
因为这个属性从 API21 （Android 5.0 +）才出现，所以我们必须做差异化实现。
在 res 目录下新建一个 values-v21 目录，然后再新建一个 styles.xml：
<resources>
<!--Android 5.0+-->
<style name="catActivityTheme" parent="AppTheme">
<!--状态栏颜色指定为透明-->
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>
这样设计是因为只有 Android 5.0+ 才会去读取该文件。
我们还需要在 values/styles.xml 中新建一个不包含实际内容的 catActivityTheme，确保 Android 5.0 之前的版本不会抛错：
<!--小于 Android 5.0-->
<style name="catActivityTheme" parent="AppTheme">
</style>
最后在 AndroidManifest.xml 中的 CatActivity 活动，设置刚刚定义的主题：
<activity android:name=".CatActivity"
android:theme="@style/catActivityTheme"
></activity>
运行效果：
就算是现在的刘海屏，也可以适配的很好哦O(∩_∩)O~
