CoordinatorLayout 的使用

布局代码如下:


<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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="170dp"
            app:contentScrim="@color/colorAccent"
            app:expandedTitleMarginBottom="100dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="我是collapsebar的标题">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="第一个固定(pin)"
                android:textSize="40sp"
                app:layout_collapseMode="pin" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="不设置,跟随滑动"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="视察效果(parallax)"
                android:textSize="40sp"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:layout_gravity="top"
                android:background="#600f"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="我是toolbar" />
            android.support.v7.widget.Toolbar>

        android.support.design.widget.CollapsingToolbarLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="appbar之内,collap之外"
            android:textColor="#0f0" />

    android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/n_scroll_view"
        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">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text=""
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text=""
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text=""
                android:textColor="#0f0"
                android:textSize="200sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text=""
                android:textColor="#0f0"
                android:textSize="200sp" />
        LinearLayout>
    android.support.v4.widget.NestedScrollView>

android.support.design.widget.CoordinatorLayout>

使用 CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout 结合才能用出比较酷炫的效果。不是单单一个 CoordinatorLayout 就能搞定的。

下面介绍一些主要属性的设置:

1. AppBarLayout的直接子控件可以设置的属性:layout_scrollFlags

1.scroll|exitUntilCollapsed如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局
2.scroll|enterAlways:只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩
3.scroll|enterAlwaysCollapsed:向下滚动NestedScrollView到最底端时该布局才会显示出来
4.如果不设置改属性,则改布局不能滑动

2.CollapsingToolbarLayout,字面意思是折叠的toolbar,它确实是起到折叠作用的,可以把自己的自布局折叠 继承自framLayout,所以它的直接子类可以设置layout_gravity来控制显示的位置,它的直接子布局可以使用的属性:app:layout_collapseMode(折叠模式):可取的值如下:

1.pin:在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开
2.parallax:视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果,不知道什么事视察效果自己看gif图(layout_collapseParallaxMultiplier视差因子 0~1之间取值,当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果)
3.不设置:跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离

如此,当下方的NestedScrollView 滑动的时候,上方的 AppBarLayout 就会折叠起来

你可能感兴趣的:(android,android)