Android开发--折叠式标题

要实现可折叠式的标题栏可以借助CollapsingToolbarLayout来实现。CollapsingToolbarLayout是不能单独存在的，只能作为AppBarLayout的直接子布局来使用，而AppBarLayout又必须是CoordinatorLayout的子布局。

在正文部分，也就是点击进入到文章正文。我们这里做成折叠式的模式，搜先我们需要定义正文的头部和正文的内容

头部如下操作

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="website.dengta.drawerlayout.FruitActivity">    <android.support.design.widget.AppBarLayout    android:id="@+id/appBar"    android:layout_width="match_parent"    android:layout_height="250dp">        <android.support.design.widget.CollapsingToolbarLayout        android:id="@+id/collapsing_toolbar"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        app:contentScrim="?attr/colorPrimary"        app:layout_scrollFlags="scroll|exitUntilCollapsed"            <ImageView                android:layout_width="match_parent"                android:layout_height="match_parent"                 android:id="@+id/fruit_image_view"                android:scaleType="centerCrop"                app:layout_collapseMode="parallax"                />             <android.support.v7.widget.Toolbar                    android:layout_width="match_parent"                    android:layout_height="?attr/actionBarSize"                    app:layout_collapseMode="pin">                </android.support.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout></android.support.design.widget.CoordinatorLayout>

app:contentScrim 属性用于指定CollapsingToolbarLayout 在趋于折叠状态以及折叠之后的背泉色，其实CollapsingToolbarLayout在折叠之后就是一个普通的Toolbar, 那么背景色肯定应该是colorPrimary 了，具体的效果我们待会儿就能看到。app:layout— scrol lFlags 属性我们也是见过的，只不过之前是给Toolbar 指定的，现在也移到外面来了。其中， scroll 表示CollapsingToolbarLayout 会随着水果内容详情的滚动一起滚动， exitUntilCol lapsed 表示当CollapsingToolbarLayout 随着滚动完成折叠之后就保留在界面上，不再移出屏幕。

效果如图所示

这里定义的大多数属性我们都是见过的，就不再解释了，只有一个app:layout_collapseMode 比较陌生。它用于指定当前控件在CollapsingToolbarLayout 折叠过程中的折叠模式，其中Toolbar 指定成pin, 表示在折叠的过程中位置始终保持不变， ImageView 指定成parallax, 表示会在折叠的过程中产生一定的错位偏移，这种模式的视觉效果会非常好。

---

内容部分操作如下

继续操作上面的xml布局文件

 <!--正文内容部分--><android.support.v4.widget.NestedScrollView    android:layout_width="match_parent"    android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior"    >    <LinearLayout        android:orientation="vertical"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <android.support.v7.widget.CardView            android:layout_marginBottom="15dp"            android:layout_marginLeft="15dp"            android:layout_marginRight="15dp"            android:layout_marginTop="35dp"            app:cardCornerRadius="4dp"            android:layout_width="match_parent"            android:layout_height="wrap_content">            <TextView                android:id="@+id/fruit_content_text"                android:layout_margin="10dp"                android:layout_width="wrap_content"                android:layout_height="wrap_content" />        </android.support.v7.widget.CardView>    </LinearLayout></android.support.v4.widget.NestedScrollView>

NestedScrollView 在此基础之上还增加了嵌套响应滚动事件的功能。由于CoordinatorLayout 本身已经可以响应滚动事件了，因此我们在它的内部就需要使用NestedScrollView 或RecyclerView这样的布局。另外，这里还通过app:layout—behavior 属性指定了一个布局行为，这和之前在Recycler View 中的用法是一模一样的。

---

在文章正文中加入一个悬浮的评论按钮

<!--悬浮的评论按钮--><android.support.design.widget.FloatingActionButton   android:layout_margin="16dp"    android:src="@drawable/comments"    app:layout_anchor="@id/appBar"    app:layout_anchorGravity="bottom|end"    android:layout_width="wrap_content"    android:layout_height="wrap_content" />

FloatingActionButton 中使用app:layout_anchor 属性指定了一个描点，我们将描点
设置为AppBarLayout, 这样悬浮按钮就会出现在水果标题栏的区域内，接着又使用app:layout_anchorGravity 属性将悬浮按钮定位在标题栏区域的右下角。

效果如图所示

---

代码如下
FruitActivity.java

package website.dengta.drawerlayout;import android.content.Intent;import android.support.design.widget.CollapsingToolbarLayout;import android.support.v7.app.ActionBar;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import android.widget.ImageView;import android.widget.TextView;import com.bumptech.glide.Glide;public class FruitActivity extends AppCompatActivity {public static final String FRUIT_NAME = "fruit_name";public static final String FRUIT_IMAGE_ID = "fruit_image_id";@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_fruit);Intent intent = getIntent();String fruitName = intent.getStringExtra(FRUIT_NAME);int fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID,0);Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);ImageView fruitImageView = (ImageView) findViewById(R.id.fruit_image_view);TextView fruitContentText = (TextView) findViewById(R.id.fruit_content_text);setSupportActionBar(toolbar);ActionBar actionBar = getSupportActionBar();if (actionBar != null) {actionBar.setDisplayHomeAsUpEnabled(true);}collapsingToolbar.setTitle(fruitName);Glide.with(this).load(fruitImageId).into(fruitImageView);String fruitContent = generateFruitContent(fruitName);fruitContentText.setText(fruitContent);}private String generateFruitContent(String fruitName) {StringBuilder fruitContent = new StringBuilder();for (int i = 0; i < 500; i++) {fruitContent.append(fruitName);}return fruitContent.toString();}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {    switch (item.getItemId()) {        case android.R.id.home:        finish();        return true;        }    return super.onOptionsItemSelected(item);}}

通过Intent 获取到传入的水果名和水果图片的资源id, 然后通过findViewByid() 方法拿到刚才在布局文件中定义的各个控件的实例。接着就是使用了Toolbar 的标准用法，将它作为ActionBar 显示，并启用HomeAsUp 按钮。由于HomeAsUp 按钮的默认图标就是一个返回箭头，这正是我们所期望的，因此就不用再额外设置别的图标了。

调用CollapsingToolbarLayout 的setTitle() 方法将水果名设置成当前界面的标题，然后使用Glide 加载传入的水果图片，并设置到标题栏的ImageView 上面。接着需要填充水果的内容详情，由于这只是一个示例程序，并不需要什么真实的数据，所以我使用了一个enerateFruitContent ()方法将水果名循环拼接500 次，从而生成了一个比较长的字符串，将它设置到了TextView 上面。

在onOptionsitemSelected() 方法中处理了HomeAsUp 按钮的点击事件，当点击了这个按钮时，就调用finish ()方法关闭当前的活动，从而返回上一个活动。

---

处理Recycler View的点击事件，让其可以进入到FruitActivity的布局中

 @Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {    if (mContext==null){        mContext = parent.getContext();    }    View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item,parent,false);    //处理点击事件    final ViewHolder holder = new ViewHolder(view);    holder.cardView.setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {            int position = holder.getAdapterPosition();            Fruit fruit = mFruitList.get(position);            Intent intent = new Intent(mContext,FruitActivity.class);            intent.putExtra(FruitActivity.FRUIT_NAME,fruit.getName());            intent.putExtra(FruitActivity.FRUIT_IMAGE_ID,fruit.getImageId());            mContext.startActivity(intent);        }    });    return new ViewHolder(view);}

---

充分利用系统状态栏空间

想要让背景图能够和系统状态栏融合，需要借助android:fitsSystemWindows 这个属性来实现。在CoordinatorLayout 、AppBarLayout 、CollapsingToolbarLayout 这种嵌套结构的布局中，将控件的android:fitsSystemWindows 属性指定成true, 就表示该控件会出现在系统状态栏里。对应到我们的程序，那就是水果标题栏中的ImageView 应该设置这个属性了。不过只给Image View 设置这个属性是没有用的，我们必须将ImageView 布局结构中的所有父布局都设置上这个属性才可以。

将android:fitsSystemWindows 属性都设置好了还是没有用的，因为还必须在程序的主题中将状态栏颜色指定成透明色才行。指定成透明色的方法很简单，在主题中将
android:statusBarColor 属性的值指定成@android:color/transparent 就可以了。