CollapsingToolbarLayout-可折叠式标题栏

一、简介

• 我们现在的标题栏基本都是使用 Toolbar 来实现的，但是并没有规定标题栏的样式，我们可以根据自己的喜好来实现不同样式的标题栏。

• CollapsingToolbarLayout 是一个作用于 Toolbar 基础之上的布局，它可以让 Toolbar 的效果变得更加绚丽。本次实现一个可折叠式标题栏

二、可折叠式标题栏的实现

注意： CollapsingToolbarLayout 是不能独立存在的，它只能作为 AppBarLayout 的直接子布局来使用，而 AppBarLayout 必须是 CoordinateLayout 的子布局，所以我们就用 CoordinateLayout 作为最外层布局样式

2.1 页面的布局文件如下所示：

布局分析：

• 最外层是 CooldinatorLayout，其下有三个直接子布局，分别是 AppBarLayout 、NestedScrollView 、 FloatingActionButton

• AppBarLayout 下有一个直接子布局 CollapsingToolbarLayout ，其下有两个控件，ImageView 和 Toolbar

• NestedScrollView 也是要求只能有一个直接子布局，要想放东西多，就在外层加个大布局。

• FloatingActionButton 属性介绍

2.2 对应的 Activity 中的代码：

public class MyRecyclerViewItemDetailActivity extends AppCompatActivity {

    @BindView(R.id.imageview)
    ImageView imageview;
    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.collapsingtoolbarlayout)
    CollapsingToolbarLayout collapsingtoolbarlayout;
    @BindView(R.id.appbarlayout)
    AppBarLayout appbarlayout;
    @BindView(R.id.textview_card)
    TextView textviewCard;
    @BindView(R.id.floating)
    FloatingActionButton floating;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_recycler_view_item_detail);
        ButterKnife.bind(this);
        Intent intent = getIntent();
        String titleName = intent.getStringExtra("titleName");
        //设置透明状态栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            //显示标题栏左侧导航图标
            actionBar.setDisplayHomeAsUpEnabled(true);
        }

        actionBar.setTitle(titleName);
//        imageview.setImageResource(R.drawable.cardview_icon);
        Glide.with(this).load(R.drawable.cardview_icon).into(imageview);
        textviewCard.setText(ContentData(titleName));
    }

    /**
     * 虚构的 TextView 要显示的数据
     * @param titleName
     * @return
     */
    private String ContentData(String titleName) {

        StringBuffer buffer = new StringBuffer();
        for (int i = 0;i < 500;i++){
            buffer.append(titleName);
        }
        return buffer.toString();
    }


}

说明： 设置的逻辑是，一个 RecyclerView 的条目点击事件，通过 Intent 传递数据到这个页面，然后展示对应的条目详情。

2.3 显示效果如下所示：

设备： Android 4.4

image

image

image