CoordinatorLayout使用笔记_移动开发

您所在的位置：程序员俱乐部 > 编程开发 > 移动开发 > CoordinatorLayout使用笔记

CoordinatorLayout使用笔记

2017/2/7 5:33:30 服从诉程序员俱乐部我要评论(0)

摘要：CoordinatorLayout的使用笔记首先第一个子控件是AppBarLayout存放首部控件，里面放了一个CollapsingToolbarLayout。代码如下：<android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android
标签：笔记使用

CoordinatorLayout的使用笔记

class="prettyprint">has-numbering">首先第一个子控件是AppBarLayout存放首部控件，里面放了一个CollapsingToolbarLayout。代码如下：

 <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#b06ee2"//折叠后的颜色
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"//设置滚动动画
app:title="标题"
>

        <ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/fengzheng"
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"//滚动后固定在顶部
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
/>

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

CollapsingToolbarLayout有两个Children.ImageView用来显示大图.而Toolbar就是折叠后看到的顶栏Toolbar.

app:contentScrim="?attr/colorPrimary" ,CollapsingToolbarLayout这个属性是设置折叠后Toolbar的颜色.

1. Collapsing title：ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。
2. Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
3. Status bar scrim：状态栏的背景，调用方法setStatusBarScrim(Drawable)。还没研究明白，不过这个只能在Android5.0以上系统有效果。
4. Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0]，值越大视察越大。
5. CollapseMode ：子视图的折叠模式，在子视图设置，有两种“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

layout_scrollFlags的属性

1) Scroll, 表示向下滚动列表时候,CollapsingToolbarLayout会滚出屏幕并且消失(原文解释:this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen)

2) exitUntilCollapsed, 表示这个layout会一直滚动离开屏幕范围,直到它收折成它的最小高度.(原文解释:this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting)

app:layout_collapseMode="parallax", 这是控制滚出屏幕范围的效果的

1) parallax, 表示滚动过程中,会一直保持可见区域在正中间.

2) pin, 表示不会被滚出屏幕范围.

CoordinatorLayout 还提供了一个 layout_anchor 的属性，连同 layout_anchorGravity 一起，可以用来放置与其他视图关联在一起的悬浮视图（如 FloatingActionButton）。本例中使用FloatingActionButton。

<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:backgroundTint="#f58585"//设置按钮的颜色
app:layout_anchor="@id/appbar"//关联appbarlayout
app:layout_anchorGravity="center|bottom"//设置布局相对位置
app:rippleColor="#64a8ec"/>//点击后的颜色

然后在其中添加一个滚动控件。效果如下：

滚动后：

文章写得简陋，自我做的一个笔记，见谅。

<android.support.design.widget.CoordinatorLayout
xmlns: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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.doopol.coordinatorlayouttest.MainActivity">

    <android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#b06ee2"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="标题"
>

            <ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/fengzheng"
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"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
/>

        </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="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">

            <android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">

                <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

                    <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="CardView"
android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

                    <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="qwertyuiopasdfghjklzxcvbnmjsjjsjsjjsjjjjjjjjjjjjjjjjjjjjjjjjsjsjsjsjj"/>
                </LinearLayout>

            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">

                <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

                    <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="CardView"
android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

                    <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="qwertyuiopasdfghjklzxcvbnmjsjjsjsjjsjjjjjjjjjjjjjjjjjjjjjjjjsjsjsjsjj"/>
                </LinearLayout>
            </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:clickable="true"
app:backgroundTint="#f58585"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="center|bottom"
app:rippleColor="#64a8ec"/>


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