android CoordinatorLayout使用

時間 2019-11-10

標籤 android coordinatorlayout 使用欄目 Android 简体版

原文原文鏈接

1、CoordinatorLayout有什麼做用android

CoordinatorLayout做爲「super-powered FrameLayout」基本實現兩個功能：一、做爲頂層佈局二、調度協調子佈局app

CoordinatorLayout使用新的思路經過協調調度子佈局的形式實現觸摸影響佈局的形式產生動畫效果。CoordinatorLayout經過設置子View的 Behaviors來調度子View。系統（Support V7）提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior<V extends View> 等。使用CoordinatorLayout須要在Gradle加入Support Design Library：ide

compile 'com.android.support:design:22.2.1' 1 1 2、CoordinatorLayout與FloatingActionButton佈局

定義佈局文件：字體

<?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">code

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:src="@drawable/ic_done" />

</android.support.design.widget.CoordinatorLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 CoordinatorLayout做爲「super-powered FrameLayout」，設置子視圖的Android:layout_gravity屬性控制位置。xml

Activity:對象

public class MainActivity extends AppCompatActivity {事件

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

            Snackbar.make(view,"FAB",Snackbar.LENGTH_LONG)
                    .setAction("cancel", new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            //這裏的單擊事件表明點擊消除Action後的響應事件

                        }
                    })
                    .show();
        }
    });
}

} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 效果：

FloatingActionButton是最簡單的使用CoordinatorLayout的例子，FloatingActionButton默認使用FloatingActionButton.Behavior。 3、CoordinatorLayout與AppBarLayout

3.1 AppBarLayout嵌套TabLayout

佈局文件代碼：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent">

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways" />

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

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

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_done" />

</android.support.design.widget.CoordinatorLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 效果：

效果顯示，視圖滾動時，Toolbar會隱藏，這個效果是Android Support Library裏面,新增的CoordinatorLayout, AppBarLayout實現的。經過AppBarLayout的子視圖的屬性控制。觀察AppBarLayout的子佈局，Toobar有app:layout_scrollFlags屬性，這就是控制滑動時視圖效果的屬性。app:layout_scrollFlags有四個值： scroll: 全部想滾動出屏幕的view都須要設置這個flag，沒有設置這個flag的view將被固定在屏幕頂部。例如，TabLayout 沒有設置這個值，將會停留在屏幕頂部。 enterAlways: 設置這個flag時，向下的滾動都會致使該view變爲可見，啓用快速「返回模式」。 enterAlwaysCollapsed: 當你的視圖已經設置minHeight屬性又使用此標誌時，你的視圖只能已最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。 exitUntilCollapsed: 滾動退出屏幕，最後摺疊在頂端。爲了ToolBar能夠滾動，CoordinatorLayout裏面,放一個帶有可滾動的View.如上的例子,放的是ViewPager,而ViewPager裏面是放了RecylerView的,便是能夠滾動的View。CoordinatorLayout包含的子視圖中帶有滾動屬性的View須要設置app:layout_behavior屬性。例如，示例中Viewpager設置了此屬性。

app:layout_behavior="@string/appbar_scrolling_view_behavior" 1 1 爲了使得Toolbar有滑動效果，必須作到以下三點:

CoordinatorLayout做爲佈局的父佈局容器。
給須要滑動的組件設置 app:layout_scrollFlags=」scroll|enterAlways」屬性。
給滑動的組件設置app:layout_behavior屬性 3.2 AppBarLayout嵌套CollapsingToolbarLayout

<?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:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true">

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

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

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            android:src="@drawable/header"
            app:layout_collapseMode="parallax"
            />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            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="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
                style="@style/Widget.CardContent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <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="@string/card_string" />

            </LinearLayout>

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

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

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/ic_done"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>

</android.support.design.widget.CoordinatorLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 效果：

這種效果在詳情頁面用的較多，展現個性化內容，圖像有強烈的吸引力。這個效果重點使用了CollapsingToolbarLayout 。 CollapsingToolbarLayout可實現Toolbar的摺疊效果。CollapsingToolbarLayout的子視圖相似與LinearLayout垂直方向排放。

CollapsingToolbarLayout 提供如下屬性和方法是用：

Collapsing title：ToolBar的標題，當CollapsingToolbarLayout全屏沒有摺疊時，title顯示的是大字體，在摺疊的過程當中，title不斷變小到必定大小的效果。你能夠調用setTitle(CharSequence)方法設置title。
Content scrim：ToolBar被摺疊到頂部固定時候的背景，你能夠調用setContentScrim(Drawable)方法改變背景或者在屬性中使用 app:contentScrim=」?attr/colorPrimary」來改變背景。
Status bar scrim：狀態欄的背景，調用方法setStatusBarScrim(Drawable)。還沒研究明白，不過這個只能在Android5.0以上系統有效果。
Parallax scrolling children：CollapsingToolbarLayout滑動時，子視圖的視覺差，能夠經過屬性app:layout_collapseParallaxMultiplier=」0.6」改變。值de的範圍[0.0,1.0]，值越大視察越大。
CollapseMode ：子視圖的摺疊模式，在子視圖設置，有兩種「pin」：固定模式，在摺疊的時候最後固定在頂端；「parallax」：視差模式，在摺疊的時候會有個視差摺疊的效果。咱們能夠在佈局中使用屬性app:layout_collapseMode=」parallax」來改變。

CoordinatorLayout 還提供了一個 layout_anchor 的屬性，連同 layout_anchorGravity 一塊兒，能夠用來放置與其餘視圖關聯在一塊兒的懸浮視圖（如 FloatingActionButton）。本例中使用FloatingActionButton。

經過下面的參數設置了FloatingActionButton的位置，兩個屬性共同做用使得FAB 浮動按鈕也能摺疊消失，展示。

app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|right|end" 1 2 1 2 使用CollapsingToolbarLayout實現摺疊效果，須要注意3點

AppBarLayout的高度固定
CollapsingToolbarLayout的子視圖設置layout_collapseMode屬性
關聯懸浮視圖設置app:layout_anchor，app:layout_anchorGravity屬性 4、自定義behavior

CoordinatorLayout功能如此強大，而他的神奇之處在於Behavior對象，CoordinatorLayout本身並不控制View，全部的控制權都在Behavior。前面寫到了FloatingActionButton.Behavior，AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior。 AppBarLayout中有兩個Behavior，一個是拿來給它本身用的，另外一個是拿來給它的兄弟結點用的。這些Behavior實現了複雜的控制功能。系統的Behavior畢竟有限，咱們能夠經過自定義的方式來實現本身的Behavior。

經過 CoordinatorLayout.Behavior(YourView.Behavior.class) 來定義本身的Behavior，並在layout 文件中設置 app:layout_behavior=」com.example.app.YourView$Behavior」來達到效果。

自定義Behavior 須要重寫兩個方法：

public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency)

public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) 1 2 3 1 2 3 以下面的例子，實現了點擊FloatingActionButton點擊旋轉90度，並適配Snackbar。

public class RotateBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> { private static final String TAG = RotateBehavior.class.getSimpleName();

public RotateBehavior() {
}

public RotateBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
    return dependency instanceof Snackbar.SnackbarLayout;
}

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
    float translationY = getFabTranslationYForSnackbar(parent, child);
    float percentComplete = -translationY / dependency.getHeight();
    child.setRotation(-90 * percentComplete);
    child.setTranslationY(translationY);
    return false;
}

private float getFabTranslationYForSnackbar(CoordinatorLayout parent,
                                            FloatingActionButton fab) {
    float minOffset = 0;
    final List<View> dependencies = parent.getDependencies(fab);
    for (int i = 0, z = dependencies.size(); i < z; i++) {
        final View view = dependencies.get(i);
        if (view instanceof Snackbar.SnackbarLayout && parent.doViewsOverlap(fab, view)) {
            minOffset = Math.min(minOffset,
                    ViewCompat.getTranslationY(view) - view.getHeight());
        }
    }

    return minOffset;
}

} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="@dimen/fab_margin" android:src="@drawable/ic_done" app:layout_behavior="com.meizu.coordinatorlayoutdemo.RotateBehavior"/> </android.support.design.widget.CoordinatorLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 效果：

綜上，基本覆蓋了CoordinatorLayout的使用方式。

頂 39