前边的文章介绍了Toolbar标题栏，相应RecyclerView滚动事件来进行隐藏和显示，Material Design并没有限定标题栏必须长这个样子，我们借助CollapsingToorbarLayout来实现一个可折叠式标题栏的效果。

使用CollapsingToorbarLayout

CollapsingToorbarLayout是一个作用于Toolbar之上的布局，由Design Support提供。

CollapsingToorbarLayout不能独自存在，它只能作为AppBarLayout的直接子布局来使用（AppBarLayout是CoordoinatorLayout的子布局）

新建FruitActivity

这里我们编写布局activity_fruit.xml及逻辑FruitActivity.java

activity_fruit.xml

主要分为两部分，一部分是水果标题栏，一个是水果内容详情，代码的布局如下：

CoordinatorLayout
- AppBarLayout
  - CollapsingToolbarLayout
    - ImageView
    - Toolbar
- NestedScrollView
  - LinearLayout
    - CardView
      - TextView
- FloatingActionButton
在CoordinatorLayout这层里没有特殊的，注意定义xmlns：app命名空间（Material Design经常用到）
- （嵌套1）CoordinatorLayout里嵌套AppBarLayout
- AppBarLayout定义了id
- 高度设置250dp（高度设置250dp比较合适，当然也可以设置其他的尺寸）
  - （嵌套2）AppBarLayout嵌套CollapsingToolbarLayout
  - CollapsingToolbarLayout设置theme为ThemeOverlay.AppCompat.Dark.ActionBar（因为之前的Toolbar也是设置的这个主题）
  - app:contentScrim用于指定CollapsingToolbarLayout在趋于折叠状态及其折叠状态时候的颜色（CollapsingToolbarLayout在折叠后就是一个Toolbar了，所以背景就是colorPrimary了）
  - app:layout_scrollFlags属性（之前是用于指定Toolbar的）
  - scroll表示CollapsingToolbarLayout会随着内容的滚动一起滚动
  - exitUntilCollapsed表示CollapsingToolbarLayout随着滚动完后保留在界面上，不在移出屏幕
    - （嵌套3）CollapsingToolbarLayout里嵌套ImageView和Toolbar
    - ImageView里layout_collapseMode设置为layout_collapseMode表示在折叠的过程中产生一定的位置位移，这样视觉效果比较好
    - Toolbar里layout_collapseMode设置为pin表示在折叠过程中位置不变
- （嵌套1）CoordinatorLayout里嵌套NestedScrollView（NestedScrollView可以联想到ScrollView，它允许滚动的方式来查看屏幕以外的数据）
- （嵌套1）NestedScrollView只允许存在一个直接子布局，我们嵌套一个LinearLayout
  - （嵌套2）LinearLayout放置卡片布局CardView
    - （嵌套3）卡片布局CardView里放置文本框
      - （嵌套4）文本框
- （嵌套1）加入悬浮按钮FloatingActionButton（准备图片ic_comment.png放到drawble-xxhdpi目录里）
- 通过app:layout_anchor指定锚点在appBar，这样悬浮按钮就会出现在标题栏的区域内
- 通过app:layout_anchorGravity设置为end|bottom，将悬浮按钮放在标题栏的右下角

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="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/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/fruit_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app: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"
        app: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"
                app:cardCornerRadius="4dp">

                <TextView
                    android:id="@+id/fruit_content_text"
                    android:layout_width="match_parent"
                    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/ic_comment"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end" />

</android.support.design.widget.CoordinatorLayout>

FruitActivity.java

将Toolbar作为Actionbar显示，并调用setDisplayHomeAsUpEnabled方法，为界面添加返回按钮（并添加返回的逻辑）。

public class FruitActivity extends AppCompatActivity {
    public static final String FRUIT_NAME = "fruit_name";
    public static final String FRUIT_IMAGE_ID = "fruit_image_id";

    @Override
    protected 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();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

重写FruitAdapter，添加RecyclerView的单击事件

这里，点击后，将水果的信息传到FruitActivity里。

@Override
public 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 holder;
}

运行，效果如图

FC 12.7 可折叠式标题栏

使用CollapsingToorbarLayout

新建FruitActivity

activity_fruit.xml

FruitActivity.java

重写FruitAdapter，添加RecyclerView的单击事件

猜你喜欢