一步步走进Android MaterialDesign 之 ToolBar动画效果(2)

今天就学一个控件CollapsingToolbarLayout

依然看效果图
这里写图片描述

这效果看上去还是有点帅的吧,实现起来也是很简单的,我们仅仅在上一篇代码基础上进行修改,修改AppBarLayout部分

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="400dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbarlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/detail_pic"
                app:layout_collapseMode="parallax"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:layout_collapseMode="pin">

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

依然讲解重点部分

  • CollapsingToolbarLayout 其实我不知道应该怎么描述比较合适,从表面看这玩意就是把Toolbar包裹在里面做个折叠动画

  • app:contentScrim 这个就是折叠后ToolBar的背景,我们这里要是不设置的话,就会把ImageView取最后一部分作为背景

  • app:layout_scrollFlags 这个没什么好说的,就是滚滚滚。exitUntilCollapsed就是向下滚动的时候也不会滚出来,除非自己一直在向下滚

  • app:layout_collapseMode 这个是比较重要的地方,当属性是pin的时候,在折叠后他就固定在顶部,一般情况下它是处于被放大的状态;parallax的时候,就会由一个差值因子来造成滚动差

  • 请注意这边不是用ToolBar来设置标题的,而是CollapsingToolbarLayout

collapsingtoolbarlayout= (CollapsingToolbarLayout) findViewById(R.id.collapsingtoolbarlayout);
collapsingtoolbarlayout.setTitle("NestedScrollView");
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页