一篇文章學(xué)會Coordinatorlayout+AppbarLayout

現(xiàn)如今，折疊式布局在App中相當(dāng)常見，給人一種科技感，充滿良好的用戶體驗。Coordinatorlayout+AppbarLayout+CollapsingToolbarLayout這三個臭皮匠聯(lián)合起來用千變?nèi)f化，啊，我重來沒有見過如此超凡脫俗之效果。
網(wǎng)上大多來不來就將這仨揉在一起，布局也是直接全部嵌套完成搬上來，但是你真的理解它們之間的協(xié)作關(guān)系嗎？相互聯(lián)動的原理是什么呢？一個個控件都沒整明白寫出這個功能也沒有意義呀。那我就一個一個拆開來講，分別來個功能，再一個接一個拼接。接下來，讓我們一起走進(jìn)它們的內(nèi)心世界。

github代碼直通車: https://github.com/18380438200/CoordinatorlayoutFull
先上效果圖：

giphy的副本.gif

博客講解demo地址：https://github.com/18380438200/MDView

ToolBar（因為涉及到，也一并講解）

從Android3.0后出現(xiàn)ActionBar，但是這效果，誰用誰知道啊。顏色不好看不說，布局也是無法訂制，都不如自定義ActionBar的好?？梢娢业牧硪黄远x[Actionbar] http://m.itdecent.cn/p/43b51e1062f1。
使用方式：
1.首先在Activity主題里面將默認(rèn)Actionbar改為NoActionbar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

2.綁定toolbar ，setSupportActionBar(toolbar) 設(shè)置toolbar為標(biāo)題欄
3.設(shè)置常用屬性：

    toolbar.setNavigationIcon(int resId);
    toolbar.setLogo(int resId);
    toolbar.setTitle("");
    toolbar.setSubtitle("");
    toolbar.setOnMenuItemClickListener(Toolbar.OnMenuItemClickListener listener);

4.引用菜單

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //引入options菜單
        getMenuInflater().inflate(R.menu.menu,menu);
        return true;
    }

5.在menu文件夾中設(shè)置菜單

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/menu_1"
          android:title="菜單1"
          android:icon="@mipmap/make_music_voice_changer_female"
          app:showAsAction="collapseActionView"/>

    <item android:id="@+id/menu_2"
        android:title="菜單2"
        android:icon="@mipmap/make_music_voice_changer_female"
        app:showAsAction="collapseActionView"/>

    <item android:id="@+id/menu_3"
        android:title="菜單3"
        android:icon="@mipmap/make_music_voice_changer_female"
        app:showAsAction="collapseActionView"/>

    <item android:id="@+id/menu_4"
        android:title="菜單4"
        android:icon="@mipmap/make_music_voice_changer_female"
        app:showAsAction="collapseActionView"/>
</menu>

或者直接在布局中添加子view使用

            <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.Light" >

                <TextView
                    android:id="@+id/tv1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="返回"
                    android:textSize="13sp"
                    android:textColor="@android:color/white" />

                <TextView
                    android:id="@+id/tv2"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_gravity="right"
                    android:layout_centerHorizontal="true"
                    android:layout_marginRight="6dp"
                    android:gravity="center"
                    android:padding="4dp"
                    android:textColor="#fff"
                    android:textSize="14sp"
                    android:text="菜單"/>
            </android.support.v7.widget.Toolbar>
showAsAction屬性
  1. ifRoom 會顯示在Item中，空間不足會將后面item收起來，如果已經(jīng)有4個或者4個以上的Item時會隱藏在溢出列表中。
  2. never 永遠(yuǎn)不會顯示。只會在藏出列表中顯示，而且只顯示標(biāo)題，所以在定義item的時候，最好把標(biāo)題都帶上。
  3. always 無論是否超出空間，總會顯示。
  4. withText withText值示意Action bar要顯示文本標(biāo)題。Action bar會盡可能的顯示這個標(biāo)題，但是，如果圖標(biāo)有效并且受到Action bar空間的限制，文本標(biāo)題有可能顯示不全。

  5. collapseActionView 聲明了這個操作視窗應(yīng)該被折疊到一個按鈕中，當(dāng)用戶選擇這個按鈕時，這個操作視窗展開。否則，這個操作視窗在默認(rèn)的情況下是可見的，并且即便在用于不適用的時候，也要占據(jù)操作欄的有效空間。
    例如效果：


    ifroom的效果

    collapseActionView的效果

Coordinatorlayout :

定義：is a super-powered Framelayout
是一個超級有力量的爸爸，官方給的定義就足以證明它的強(qiáng)大。
作用：協(xié)調(diào)子view的相互關(guān)系，比如位置、大小，就像有幾個調(diào)皮孩子的爸爸，要管管孩子的行為。

Behavior：


Behavior的來源

打開Coordinatorlayout看，Behavior是CoordinatorLayout的一個泛型抽象內(nèi)部類（這么長累不累呀），所以給子view添加layout_behavior屬性是來自于它。

我寫了一個例子來理解CoordinatorLayout的工作原理：


這是一個大叔跟隨女孩的故事
<android.support.design.widget.CoordinatorLayout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/coordinatorLayout"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.md.mdview.CoordinatorLayoutActivity">

    <View
        android:id="@+id/view_girl"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_marginLeft="200dp"
        android:background="@mipmap/make_music_voice_changer_female" />

    <View
        android:id="@+id/view_uncle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@mipmap/make_music_voice_changer_uncle"
        app:layout_behavior="com.example.md.mdview.RunBehavior"/>
</android.support.design.widget.CoordinatorLayout>

布局：兩個子view，操作viewgirl，viewuncle也會相應(yīng)跟著走，這就要寫一個聯(lián)動關(guān)系，用自定義Behavior實(shí)現(xiàn)

public class RunBehavior extends CoordinatorLayout.Behavior<View>{

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

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        int top = dependency.getTop();
        int left = dependency.getLeft();

        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) child.getLayoutParams();
        params.topMargin = top - 400;
        params.leftMargin = left;
        child.setLayoutParams(params);
        return true;
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return true;
    }
}

public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) 方法：
根據(jù)條件過濾判斷返回值，返回true聯(lián)動，返回flase不聯(lián)動，即behavior不生效

public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)
當(dāng) dependency這個哥哥發(fā)生變化時， 另一個child弟弟也要跟著去玩
一個view根據(jù)另一個view的變化而變化， dependency被 child監(jiān)聽
功能是child的y值永遠(yuǎn)比dependency大400像素（廢話，還用說嗎）

app:layout_behavior="com.example.md.mdview.RunBehavior"

這里一定要寫上帶參數(shù)的構(gòu)造方法，因為coordinatorlayout是根據(jù)反射（所以是包名.類名路徑）獲取這個behavior，是從這個構(gòu)造方法獲得對象的，否則會報


image.png
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                params.leftMargin = (int) (event.getX() - viewGirl.getMeasuredWidth() / 2);
                params.topMargin = (int) (event.getY() - viewGirl.getMeasuredHeight() / 2);
                viewGirl.setLayoutParams(params);
                break;
            case MotionEvent.ACTION_MOVE:
                params.leftMargin = (int) (event.getX() - viewGirl.getMeasuredWidth() / 2);
                params.topMargin = (int) (event.getY() - viewGirl.getMeasuredHeight() / 2);
                viewGirl.setLayoutParams(params);
                break;
        }
        return true;
    }

最后是在界面監(jiān)聽手指的位置，給viewGirl設(shè)置手指的位置，viewgril變化了，viewuncle也就隨之變化了。

好，在會了Coordinatorlayout的用法，最外層父布局有了，該添加兩個子view了。這里里面分別加入AppbarLayout和NestedScrollView作子view，給NestedScrollView加上behavior,就可以讓AppbarLayout跟隨NestedScrollView的Behavior聯(lián)動。Android已經(jīng)自帶了app:layout_behavior="@string/appbar_scrolling_view_behavior"，只要滾動發(fā)生，就會給自己的子view（if
instance of Appbarlayout）添加滾動事件。不明白這倆控件緊接著看后面講解。

當(dāng)前布局變?yōu)椋?/p> 

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#0e932e"
                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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textColor="#000"
            android:padding="10dp"
            android:text=""/>
    </android.support.v4.widget.NestedScrollView>

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

NestedScrollView （viewgirl的角色）

NestedScrolling機(jī)制能夠讓父View和子View在滾動式進(jìn)行配合，其基本流程如下：

當(dāng)子view開始滾動之前，可以通知父View，讓其先于自己進(jìn)行滾動；
子View自己進(jìn)行滾動；子view滾動之后，還可以通知父view繼續(xù)滾動。
而要實(shí)現(xiàn)這樣的交互機(jī)制，首先父view要實(shí)現(xiàn)NestedScrollingParent接口，而子View需要實(shí)現(xiàn)NestedScrollingChild接口，在這套機(jī)制中子View是發(fā)起者，父view是接受回調(diào)并做出響應(yīng)的。
以下是幾個關(guān)鍵的類和接口

/**
 * NestedScrollView is just like {@link android.widget.ScrollView}, but it supports acting
 * as both a nested scrolling parent and child on both new and old versions of Android.
 * Nested scrolling is enabled by default.
 */
public class NestedScrollView extends FrameLayout implements NestedScrollingParent,
        NestedScrollingChild, ScrollingView {
    static final int ANIMATED_SCROLL_GAP = 250;

    static final float MAX_SCROLL_FACTOR = 0.5f;

    private static final String TAG = "NestedScrollView";

    /**
     * Interface definition for a callback to be invoked when the scroll
     * X or Y positions of a view change.
     *
     * <p>This version of the interface works on all versions of Android, back to API v4.</p>
     *
     * @see #setOnScrollChangeListener(OnScrollChangeListener)
     */
    public interface OnScrollChangeListener {
        /**
         * Called when the scroll position of a view changes.
         *
         * @param v The view whose scroll position has changed.
         * @param scrollX Current horizontal scroll origin.
         * @param scrollY Current vertical scroll origin.
         * @param oldScrollX Previous horizontal scroll origin.
         * @param oldScrollY Previous vertical scroll origin.
         */
        void onScrollChange(NestedScrollView v, int scrollX, int scrollY,
                int oldScrollX, int oldScrollY);
    }

    private long mLastScroll;

    private final Rect mTempRect = new Rect();
    private OverScroller mScroller;
    private EdgeEffect mEdgeGlowTop;
    private EdgeEffect mEdgeGlowBottom;
    ······

//主要接口
NestedScrollingChild
NestedScrollingParent
//幫助類
NestedScrollingChildHelper
NestedScrollingParentHelper

AppbarLayout （viewuncle的角色）

繼承自Linearlayout，且方向是vertical，它可以讓你定制當(dāng)某個可滾動View的滾動手勢發(fā)生變化時，其內(nèi)部的子View實(shí)現(xiàn)何種動作。

AppBarLayout子View的動作

內(nèi)部的子View通過在布局中加app:layout_scrollFlags設(shè)置執(zhí)行的動作

·scroll :子view會跟隨滾動事件一起滾動，相當(dāng)于添加到scrollview頭部

·enterAlways :只要屏幕下滑，view就會立即拉下出來。

·snap ：這個屬性讓控件變得有彈性,如果控件下拉了75%的高度，就會自動展開，如果只有25%顯示，就會反彈回去關(guān)閉。（去試試支付寶首頁吧，就是加了彈性這個效果）

·exitUntilCollapsed ：當(dāng)scrollview滑到訂部，再將子view折疊起來

·enterAlwaysCollapsed ：當(dāng)scrollview滑到底，再將子view展開

可以給ViewPager設(shè)置行為，就不需要使用NestedScrollView的滑動，實(shí)現(xiàn)與AppBarLayout聯(lián)動。
app:layout_behavior="@string/appbar_scrolling_view_behavior"

setExpande(boolean ) 設(shè)置展開和關(guān)閉狀態(tài)，默認(rèn)有開關(guān)動畫

使用示例：


app:layout_scrollFlags="scroll"
app:layout_scrollFlags="scroll|enterAlways"

CollapsingToolbarLayout

CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar，它繼承自FrameLayout。
CollapsingToolbarLayout屬性 含義
app:title 設(shè)置標(biāo)題
app:collapsedTitleGravity="center" 設(shè)置標(biāo)題位置
app:contentScrim 設(shè)置折疊時toolbar的顏色，默認(rèn)是colorPrimary的色值
app:statusBarScrim 設(shè)置折疊時狀態(tài)欄的顏色 ，默認(rèn)是colorPrimaryDark的色值
app:layout_collapseParallaxMultiplier 設(shè)置視差
app:layout_collapseMode="parallax" 視差模式，在折疊的時候會有個視差折疊的效果
app:layout_collapseMode="pin" 固定模式，在折疊的時候最后固定在頂端

使用示例：讓圖片折疊，讓toolbar固定

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@mipmap/bg"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="50dp"
                android:background="#000"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>
圖片折疊，固定toolbar

添加flags可以設(shè)置系統(tǒng)狀態(tài)欄為透明，如果最頂上是背景這樣用效果更佳

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
setContentView(R.layout.activity_main);

實(shí)現(xiàn)toolbar漸變顏色：AppbarLayout提供了滑動偏移監(jiān)聽，偏移量除以appbar總高度可以得到當(dāng)前滑動百分比。注意：這個verticalOffset是0或者負(fù)數(shù)，需要轉(zhuǎn)絕對值。

        appbarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                //verticalOffset始終為0以下的負(fù)數(shù)
                float percent = (Math.abs(verticalOffset * 1.0f)/appBarLayout.getTotalScrollRange());
            }
        });

這Matial Design的設(shè)計真好，但是這名取得，一個個兒的也忒長了吧，google什么時候把名字精簡了啊？
好了，以后會持續(xù)更新的，喜歡我就點(diǎn)我吧！

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • CoordinatorLayout與滾動的處理 CoordinatorLayout實(shí)現(xiàn)了多種Material De...
    cxm11閱讀 6,838評論 1贊 15
  • 用兩張圖告訴你，為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料？ 從這篇文章中你...
    hw1212閱讀 14,110評論 2贊 59
  • 本文轉(zhuǎn)自：泡在網(wǎng)上的日子 http://www.jcodecraeer.com/a/anzhuokaifa/and...
    JCboy閱讀 1,680評論 0贊 1
  • 5CoordinatorLayout與AppBarLayout--嵌套滑動 上文我們說了AppBarLayout的...
    chefish閱讀 6,259評論 4贊 19
  • 突然想發(fā)個微博，但又不知道說些啥。2012年的十一月份來杭州的，到現(xiàn)在差不多整整四年了，四年時間別人可以用來讀完大...
    邰風(fēng)先生閱讀 320評論 0贊 1

友情鏈接更多精彩內(nèi)容