android com.android.support:design庫使用

引入

as下

dependencies {
 //...
    compile 'com.android.support:design:25.3.1'
}           

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

即可

android.support.design.widget.CoordinatorLayout

CoordinatorLayout is a super-powered {@link Android.widget.FrameLayout FrameLayout}

CoordinatorLayout作為“super-powered FrameLayout”基本實作兩個功能：

1. 作為頂層布局
2. 排程協調子布局

CoordinatorLayout使用新的思路通過協調排程子布局的形式實作觸摸影響布局的形式産生動畫效果。CoordinatorLayout通過設定子View的 Behaviors來排程子View。系統（Support V7）提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior 等。

一、簡單使用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">


    <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

FloatingActionButton可以使用以下屬性，跟着appbar移動

app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"           

• 1
• 2

• 1
• 2

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

Snackbar類似toast

二、與toobar使用

<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

• 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

效果顯示，視圖滾動時，Toolbar會隐藏，這個效果是android Support Library裡面,新增的CoordinatorLayout, AppBarLayout實作的。

AppBarLayout is a vertical {@link LinearLayout}

通過AppBarLayout的子視圖的屬性控制。觀察AppBarLayout的子布局，Toobar有app:layout_scrollFlags屬性，這就是控制滑動時視圖效果的屬性。app:layout_scrollFlags有四個值：

1. scroll: 所有想滾動出螢幕的view都需要設定這個flag，

沒有設定這個flag的view将被固定在螢幕頂部。例如，TabLayout 沒有設定這個值，将會停留在螢幕頂部。

2. enterAlways: 設定這個flag時，向下的滾動都會導緻該view變為可見，啟用快速“傳回模式”。

3. enterAlwaysCollapsed:

當你的視圖已經設定minHeight屬性又使用此标志時，你的視圖隻能已最小高度進入，隻有當滾動視圖到達頂部時才擴大到完整高度。

4. exitUntilCollapsed: 滾動退出螢幕，最後折疊在頂端。

為了ToolBar可以滾動，CoordinatorLayout裡面,放一個帶有可滾動的View.如上的例子,放的是ViewPager,而ViewPager裡面是放了RecylerView的,即是可以滾動的View。

CoordinatorLayout包含的子視圖中帶有滾動屬性的View需要設定app:layout_behavior屬性。例如，示例中Viewpager設定了此屬性。

app:layout_behavior="@string/appbar_scrolling_view_behavior"           

• 1

• 1

<string 
name="appbar_scrolling_view_behavior" 
translatable="false">
android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>           

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

可以用NestedScrollView 不明白為什麼scrollview不可以，

指向類的全名

為了使得Toolbar有滑動效果，必須做到如下三點:

1. CoordinatorLayout作為布局的父布局容器。

2. 給AppBarLayout需要滑動的元件設定

app:layout_scrollFlags=”scroll|enterAlways” 屬性。

3. 給CoordinatorLayout 中滑動的元件設定 app:layout_behavior屬性

使用toolbar需要将activity的樣式 actionbar隐藏使用

<style name="AppTheme" parent="Theme.AppCompat.Light">
 <item name="windowActionBar">false</item>
 <item name="windowNoTitle">true</item>
 <style>           

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

acitivty

Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);           

• 1
• 2

• 1
• 2

三、嵌套CollapsingToolbarLayout

CollapsingToolbarLayout extends FrameLayout

<?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.andyidea.guidedemo.CoordActivity">

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

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

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/aa"
                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.v7.widget.Toolbar>
        </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="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:background="@color/Gold"
                android:text="dome" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:background="@color/Gold"
                android:text="dome" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</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

• 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

1. app:layout_collapseParallaxMultiplier CollapsingToolbarLayout滑動時，子視圖的視覺差，可以通過屬性app:layout_collapseParallaxMultiplier=”0.6”改變。值de的範圍[0.0,1.0]，值越大視察越大
2. app:contentScrim=”?attr/colorPrimary” ToolBar被折疊到頂部固定時候的背景，你可以調用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。
3. app:layout_collapseMode=”parallax” 子視圖的折疊模式，在子視圖設定，有兩種“pin”：固定模式，在折疊的時候最後固定在頂端；“parallax”：視差模式，在折疊的時候會有個視差折疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來改變。