CoordinatorLayout

2016-10-06  本文已影响0人  qianxL

CoordinatorLayout

CollapsingToolbarLayout

应用此布局呢,就可以实现toolbar 展开时呢,有一个大背景,而收缩后还是toolbar,此布局需要放入到AppBarLayout 布局中作为其的直接子View。做出折叠的效果。
此布局主要有5个功能:

(1) 折叠Title:当此布局全部显示时呢,title 是最大的,但随着View 渐渐移出屏幕,title会逐渐变小。

(2) 内容纱布 :根据滚动的位置看是否达到要求,来决定是否对View盖上"纱布"。通过setContentScrim(Drawable),来设置图片。

(3) 状态栏纱布 :根据滚动的位置是否达到要求,来决定是否对title 盖上"纱布",可通过setStatusBarScrim(Drawable) 。但是只对大于等于LOLLIPOP(棒棒糖)的设备有作用。

(4) 视差滚动子View 。就是将View 滚动速度减慢造成,折叠的效果,在XML文件中设置app:layout_collapseMode设为parallax 。

(5) 将子View 的位置固定,这对Toolbar 很有用,因为当布局移动时呢,就可将其固定。在XML中通过app:layout_collapseMode 设为pin .

布局:
<?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:layout_width="match_parent"
    android:layout_height="match_parent" >


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="wrap_content"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@drawable/material_img"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:layout_collapseMode="pin"  />

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

    <android.support.v4.widget.NestedScrollView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="50dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/my_txt"
            android:textSize="20sp" />

    </android.support.v4.widget.NestedScrollView>

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

实现的效果:

CollapsingToolbarLayoutCollapsingToolbarLayout
上一篇 下一篇

猜你喜欢

热点阅读