第一行代码笔记 CollapsingToolbarLayout使用，在上一节基础上

效果图

图片数据源是从上一节传过来的

代码示例

第一步：

创建一个activity

public class CollapingActivity extends AppCompatActivity {


    private String name;
    private String pic;
    private Toolbar toolbar;
    private TextView textView;
    private ImageView image;
    private CollapsingToolbarLayout collaps;

    String textShow = "听说白雪公主在逃跑 小红帽在担心大灰狼\n" +
            "听说疯帽喜欢爱丽丝 丑小鸭会变成白天鹅\n" +
            "听说彼得潘总长不大 杰克他有竖琴和魔法\n" +
            "听说森林里有糖果屋 灰姑娘丢了心爱的玻璃鞋\n" +
            "只有睿智的河水知道 白雪是因为贪玩跑出了城堡\n" +
            "小红帽有件抑制自己 变成狼的大红袍\n" +
            "总有一条蜿蜒在童话镇里七彩的河\n" +
            "沾染魔法的乖张气息 却又在爱里曲折\n" +
            "川流不息扬起水花 又卷入一帘时光入水\n" +
            "让全部很久很久以前 都走到幸福结局的时刻\n" +
            "music....\n" +
            "听说睡美人被埋藏 小人鱼在眺望金殿堂\n" +
            "听说阿波罗变成金乌 草原有奔跑的剑齿虎\n" +
            "听说匹诺曹总说着谎 侏儒怪拥有宝石满箱\n" +
            "听说悬崖有颗长生树 红鞋子不知疲倦地在跳舞\n" +
            "只有睿智的河水知道 睡美人逃避了生活的煎熬\n" +
            "小人鱼把阳光抹成眼影 投进泡沫的怀抱\n" +
            "总有一条蜿蜒在童话镇里七彩的河\n" +
            "沾染魔法的乖张气息 却又在爱里曲折\n" +
            "川流不息扬起水花 又卷入一帘时光入水\n" +
            "让全部很久很久以前 都走到幸福结局的时刻\n" +
            "总有一条蜿蜒在童话镇里梦幻的河\n" +
            "分隔了理想分隔现实 又在前方的山口汇合\n" +
            "川流不息扬起水花 又卷入一帘时光入水\n" +
            "让全部很久很久以前 都走到幸福结局的时刻 又陌生\n" +
            "啊~~啊~~啊~~啊~~";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collaping);
        initView();
    }

    private void initView() {
//        从上一个界面获取图片信息和名字
        Intent intent = getIntent();
        name = intent.getStringExtra("name");
        pic = intent.getStringExtra("pic");

//        实例化控件
        toolbar = ((Toolbar) findViewById(R.id.colla_toolbar));
        textView = ((TextView) findViewById(R.id.colla_dscrible));
        image = ((ImageView) findViewById(R.id.colla_image));
        collaps = ((CollapsingToolbarLayout) findViewById(R.id.coolaps));

//        将toolbar设置到界面
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if (null != actionBar){
//            启用homeAsUp控件
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
//        设置控件的参数
        collaps.setTitle("用来测试的界面啦～～");
        Glide.with(this).load(pic).into(image);
        textView.setText(textShow);
    }


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

        }
        return super.onOptionsItemSelected(item);
    }
}

activity布局

<?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:id="@+id/activity_collaping"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <!--CoordinatorLayout布局是加强班的framlayout可以监听所有子控件的各种事件，然后自动帮助我们自己做出最为合理的响应-->
    <!--例如弹出的snackbar遮挡住了fab，但用了CoordinatorLayout后snackbar弹出时，fab会上移。不遮盖住-->
    <!--注意CoordinatorLayout只监听它的子控件，snackbar因为传入的view为fab的view所以也算CoordinatorLayout的子控件（activity中）-->


    <!--AppBarLayout是一个垂直的linerlayout里面做了很多滚动事件的封装-->
    <!--添加了AppBarLayout后，只要在Toolbar加入layout_scrollFlags如下-->
    <!--就可以实现上滑隐藏标题栏，下拉又显示出来-->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">
        
        <!--CollapsingToolbarLayout是一个作用于toolbar基础上的布局，但是他只能作为AppBarLayout的只布局使用，
        AppBarLayout又只能是CoordinatorLayout的子布局，所以只能这么构建-->
        <!--contentScrim用于指定趋于折叠状态以及折叠后的背景色，折叠之后是一个普通的toolbar-->
        <!--layout_scrollFlags的scroll表示随着内容一起滚动，exitUntilCollapsed表示滚动完成折叠后，留在界面不移除屏幕-->
        <!--让系统状态栏和背景图融为一体fitsSystemWindows="true" 但是只有5.0及以上系统能用，适配系统新建value－v21-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/coolaps"
            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">
            <!--定义标题栏中的内容layout_collapseMode表示折叠过程中的折叠模式指定成pin说明折叠过程中位置始终不变
           parallax表示折叠过程中产生一定的错位偏移 -->
            <ImageView
                android:id="@+id/colla_image"
                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/colla_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>


    <!--与AppBarLayout平级，他与ScrollView相比添加了嵌套响应滚动事件的功能，同时都只能嵌套一个直接的子布局-->
    <!--因为CoordinatorLayout可以响应滚动事件，所以里面要用NestedScrollView或recycleview这样的布局-->
    <!--layout_behavior指定的是一个布局行为，可以避免NestedScrollView遮盖住Toolbar-->
    <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_margin="15dp"
                android:layout_marginTop="35dp"
                app:cardCornerRadius="6dp">

                <TextView
                    android:id="@+id/colla_dscrible"
                    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>

    <!--layout_anchor指定AppBarLayout控件为描点，这样她就会出现在标题栏区域-->
    <!--layout_anchorGravity将悬浮按钮定位在标题栏区域右下角-->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@mipmap/ic_comment"
        app:layout_anchor="@id/appBarLayout"
        app:layout_anchorGravity="bottom|end" />

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

第二步：上一篇修改adapter，给按钮添加点击事件

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if ( null == context){
        context = parent.getContext();
    }
    View  view = LayoutInflater.from(context).inflate(R.layout.card_layout,parent,false);
    final ViewHolder viewHolder = new ViewHolder(view);
    viewHolder.cardView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int position = viewHolder.getAdapterPosition();
            TestData testData = dataList.get(position);
            Intent intent = new Intent(context, CollapingActivity.class);
            intent.putExtra("name",testData.getName());
            intent.putExtra("pic",testData.getBit());
            context.startActivity(intent);

        }
    });
    return viewHolder;
}