天天看點

AppBarLayout與CoordinatorLayout實作toobar各種效果

AppBarLayout是一個Bar容器,它把裡面的元件全部作為AppBar。而CoordinatorLayout則是可以協調裡面view行為的一個布局。它們連用可以實作AppBar的各種效果,它們都是design包裡的元件,使用前先導入依賴。 compile 'com.android.support:design:25.3.1'   使用的時候,隻要在布局裡面添加行為就可以了。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.appbarlayout.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/barlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toobar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:layout_scrollFlags="scroll"
            app:title="這是toolbar"
            />

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:id="@+id/text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="這是文字"/>

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

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

app:layout_behavior 這個屬性定義了當定制的滑動控件滑動時,這個view該執行的動作 app:layout_behavior="@string/appbar_scrolling_view_behavior"這行代碼則表示該滑動控件就是被定制的滑動控件。 其中的NestedScrollView是v4包的元件,功能與scrollview基本一樣,隻是它可以與toolbar形成互動

app:layout_behavior 這個屬性有幾個值,soroll: 表示設為

scroll

的View會跟随滾動事件一起發生移動效果如下

AppBarLayout與CoordinatorLayout實作toobar各種效果

enterAlways:設為

enterAlways

的View,當ScrollView往下滾動時,該View會直接往下滾動。而不用考慮ScrollView是否在滾動。如下是 scroll|enterAlways的效果,他跟之前的那個屬性的差別在于,這樣連用,隻要一下拉,toolbar就向下滑動,而之前那個屬性是要下拉到頂toolbar才向下滑動。

AppBarLayout與CoordinatorLayout實作toobar各種效果

exitUntilCollapsed:設為

exitUntilCollapsed

的View,當上滑時,它會先滑動到最小高度,然後滑動控件才開始滑動,下滑時,滑動控件先下滑到頂,該view才開始下滑。它也與scroll連用,用的時候要設定高度和最小高度,下面是設定代碼和效果

<android.support.v7.widget.Toolbar
            android:id="@+id/toobar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:minHeight="?actionBarSize"
            android:gravity="bottom"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="這是toolbar"
            />
           
AppBarLayout與CoordinatorLayout實作toobar各種效果

enterAlwaysCollapsed:是

enterAlways

的附加選項,一般跟

enterAlways

一起使用,也要設定高度和最小高度,方法同上。

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
           

然後連用後的效果是,上滑的時候,設定效果的view優先上滑,上滑隐藏後,滑動控件才開始上滑,下滑時,設定效果的view先下滑至最小高度,然後滑動控件下滑到頂,設定效果的view下滑到最大高度。下面是效果。

AppBarLayout與CoordinatorLayout實作toobar各種效果

snap:這個屬性可以與以上4種連用,形成一種彈性或者說吸附效果,要就是說,隻要你在滑動過程中松開手指,它就會根據你滑動的距離是否過半采取彈性措施,要麼彈回去,變成之前狀态,要麼彈出來,滑動到你要滑動的位置。

注意一點,APPBarLayout一定要是CoordinatorLayout的直接子view,也是必須包涵在coordinatorLayout中,不然沒有任何效果。