仿知乎首頁學習 CoordinateLayout

IAM四十二發表於2016-12-22

前言

第一次接觸CoordinateLayout的時候深深的被其炫酷的特效所吸引；想著什麼時候在實際專案中可以使用一下，無奈實際專案因行業特點，並不需要使用到CoordinateLayout這麼高階的互動體驗；所以本著學習的態度，便用CoordinateLayout模仿了一下知乎首頁效果，這也是現在掘金APP首頁的效果；這種效果其實很友好，能讓使用者最大限度的使用到手機螢幕。

好了，廢話不多說，先看看模仿效果。

這裡用到的icon 大部分來源於iconfont。

使用模擬器擷取gif貌似永遠都是這樣模糊不清，有興趣的同學可以點github檢視原始碼，實際執行在手機上效果會比這裡好一些。

綜述

CoordinateLayout是Android Design Support Library提供的一種佈局方式。

檢視原始碼我們可以看到 CoordinateLayout繼承自ViewGroup，是一個“超級強大”的FrameLayout，FrameLayout 相信大家都很熟悉，使用也很簡單，FrameLayout可以說是讓Android佈局中有了“層”的概念，那麼這個CoordinateLayout又有什麼神奇之處呢，下面我們就學習一下。

Coordinate 按照字面意思理解，就是協調。它可以方便的實現佈局內view協調

那麼究竟是怎麼個調節法呢，我們來看一下。

CoordinateLayout 使用

結合Snackbar

關於CoordinateLayout最經典的例子就是其結合Snackbar的使用了。

<?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>複製程式碼

@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) {

                            }
                        })
                        .show();
            }
        });
    }複製程式碼

上面這份程式碼應該是很多人對CoordinateLayout的第一印象，這也是關於CoordinateLayout最直觀的解釋。

這裡實現的效果就是如上面第三幅動圖message中那樣，底部彈出一個SnackBar，FloatingActionButton自動上移；這就是所謂的協調，協調FloatingActionButton上移，不被頂部彈出的SnackBar所遮擋。

這裡如果沒有使用CoordinateLayout作為根佈局，而是使用LinearLayout或RelativeLayout等，如果FloatingActionButton距離底部太近，那麼它將會被底部彈出的Snackbar所遮擋。

結合AppBarLayout使用

說到CoordinateLayout就不得不提這個AppBarLayout，他們倆簡直就是天生一對，二者結合使用，那畫面真是太美了，想想都覺得刺激。

這裡看一下我們模仿首頁頂部搜尋欄的程式碼：

<?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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragments.IndexFragment">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/index_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">

            <ImageView
                android:id="@+id/live"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="5dp"
                android:src="@drawable/live_button" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_toLeftOf="@id/live"
                android:background="@color/searchmenu">

                <ImageView
                    android:id="@+id/search"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="10dp"
                    android:src="@drawable/ic_search" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="10dp"
                    android:layout_toRightOf="@id/search"
                    android:text="搜尋話題、問題或人"
                    android:textSize="16sp" />

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

        .......

</android.support.design.widget.CoordinatorLayout>複製程式碼

這裡我們在AppBarLayout內部巢狀了一個RelativeLayout，在這個RelativeLayout中我們模仿了頂部的搜尋欄的佈局效果，這個很簡單。這裡最核心的東西就是

app:layout_scrollFlags="scroll|enterAlways"複製程式碼

這行程式碼。什麼意思呢？這個app:layout_scrollFlags有下面幾個值：

scroll: 所有想滾動出螢幕的view都需要設定這個flag，沒有設定這個flag的view將被固定在螢幕頂部。
enterAlways: 設定這個flag時，向下的滾動都會導致該view變為可見。
enterAlwaysCollapsed: 當你的檢視已經設定minHeight屬性又使用此標誌時，你的檢視只能已最小高度進入，只有當滾動檢視到達頂部時才擴大到完整高度。
exitUntilCollapsed: 滾動退出螢幕，最後摺疊在頂端。
snap: 檢視在滾動時會有一種“就近原則”，怎麼說呢，就是當檢視展開時，如果滑動中展開的內容超過檢視的75%,那麼檢視依舊會保持展開；當檢視處於關閉時，如果滑動中展開的部分小於檢視的25%，那麼檢視會保持關閉。總的來說，就是會讓動畫有一種彈性的視覺效果。

這裡我們使用了scroll 和 enterAlways ，就很容易的實現了向下滑動時頂部隱藏，向下滑動時頂部出現的效果。

結合TabLayout使用

注意，這裡所說的TabLayout是android.support.design.widget.TabLayout，不是很久以前的那個TabLayout。

使用這個TabLayout可以產生一種滑動時tab 懸停的效果，這裡我們模仿的時候，用於種種原因沒能使用TabLayout的動態效果，只是簡單的結合ViewPager使用了一下，第二個頁面discovery就是使用TabLayout作為頂部的Indicator使用；這個很簡單，就不展開說了；具體實現看檢視原始碼。

結合CollapsingToolbarLayout使用

個人感覺，這是整個CoordinateLayout中最拉風的動畫特效，主要是實現一種“摺疊”的動畫效果。我們在模仿個人中心的時候就是用到了這個功能：

看一下個人中心的佈局檔案：

<?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:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/user_bg"
                app:layout_collapseMode="parallax">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:layout_width="68dp"
                    android:layout_height="68dp"
                    android:layout_centerInParent="true"
                    android:src="@drawable/profile" />

            </RelativeLayout>

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

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingTop="10dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitStart"
                android:src="@drawable/fake" />

        </LinearLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_edit"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end" />

</android.support.design.widget.CoordinatorLayout>複製程式碼

首先，我們在AppBarLayout中巢狀一個CollapsingToolbarLayout，並指定其

app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"複製程式碼

這個屬性前面介紹過了，這裡三種屬性結合就可實現滾動中“摺疊視差”的效果了。

接下來，我們又在CollapsingToolbarLayout放置了一個RelativeLayout。這個RelativeLayout有一個很重要的設定；

app:layout_collapseMode="parallax"複製程式碼

這個layout_collapseMode就是用來設定整個RelativeLayout的摺疊效果的，有兩種取值，“pin”：固定模式，在摺疊的時候最後固定在頂端；“parallax”：視差模式，在摺疊的時候會有個視差摺疊的效果。

最後是Toolbar，可以看到Toolbar的collapseMode設定為pin，這樣向上滑動時，當RelativeLayout的內容完全摺疊後，Toolbar將顯示在頂部；而向下滑動時，Toolbar將消失，而RelativeLayout的內容會動態的摺疊展開，而且由於設定了snap，會有一種輕微的彈性效果。

這裡需要注意，這個時候，我們需要將AppBarLayout的高度設定為固定值

CoordinatorLayout 還提供了一個 layout_anchor 的屬性，連同 layout_anchorGravity 一起，可以用來放置與其他檢視關聯在一起的懸浮檢視（如 FloatingActionButton）。

這裡如果我們將floatingActionButton設定為：

android:layout_gravity="bottom|right|end"複製程式碼

FloatingActionButton將位於整個螢幕的右下角。

使用細節

這裡需要注意的是，使用AppBarLayout時，為了實現其滾動時的效果，在其下面必須有一個可滾動的View，並且需要為其設定app:layout_behavior屬性。

比如我們在結合結合CollapsingToolbarLayout使用時，
在AppBarLayout的下面放置了一個NestedScrollView，並設定其app:layout_behavior="@string/appbar_scrolling_view_behavior"。

而在其他頁面，我們AppBarLayout的下面放置了ViewPager或者是FrameLayout都設定了相應的屬性；具體可參考原始碼。

Behavior

上面我們提到了layout_behavior，這是個什麼意思呢？

這裡就不得不說這個Behavior了，可以說Behavior是整個CoordinateLayout最核心的東西。還記得我們最開始的列子嗎？FloatingActionButton會隨著Snackbar的出現，自動的調節自己的位置，這是怎樣的實現的呢？

我們通過追蹤檢視 Snackbar 的 show() 這個方法，最終會在Snack的原始碼中找到如下實現：

final void showView() {
        if (mView.getParent() == null) {
            final ViewGroup.LayoutParams lp = mView.getLayoutParams();

            if (lp instanceof CoordinatorLayout.LayoutParams) {
                // If our LayoutParams are from a CoordinatorLayout, we'll setup our Behavior
                final CoordinatorLayout.LayoutParams clp = (CoordinatorLayout.LayoutParams) lp;

                final Behavior behavior = new Behavior();
                behavior.setStartAlphaSwipeDistance(0.1f);
                behavior.setEndAlphaSwipeDistance(0.6f);
                behavior.setSwipeDirection(SwipeDismissBehavior.SWIPE_DIRECTION_START_TO_END);
                behavior.setListener(new SwipeDismissBehavior.OnDismissListener() {
                    @Override
                    public void onDismiss(View view) {
                        view.setVisibility(View.GONE);
                        dispatchDismiss(Callback.DISMISS_EVENT_SWIPE);
                    }

                    @Override
                    public void onDragStateChanged(int state) {
                        switch (state) {
                            case SwipeDismissBehavior.STATE_DRAGGING:
                            case SwipeDismissBehavior.STATE_SETTLING:
                                // If the view is being dragged or settling, cancel the timeout
                                SnackbarManager.getInstance().cancelTimeout(mManagerCallback);
                                break;
                            case SwipeDismissBehavior.STATE_IDLE:
                                // If the view has been released and is idle, restore the timeout
                                SnackbarManager.getInstance().restoreTimeout(mManagerCallback);
                                break;
                        }
                    }
                });
                clp.setBehavior(behavior);
                // Also set the inset edge so that views can dodge the snackbar correctly
                clp.insetEdge = Gravity.BOTTOM;
            }

            mTargetParent.addView(mView);
        }


    ......

    }複製程式碼

我們可以看到，當Snack執行show方法的時候，會生成一個Behavior物件，然後將這個物件set給CoordinateLayout，而CoordinateLayout會根據這個Behavior執行動作。這個方法下面省略的程式碼大體上就是一個Translation屬性動畫的實現，這裡就不展開來說了。

回到我們之前所說，我們需要為帶有滾動屬性的view設定layout_behavior這個屬性，我們為其設定的值

app:layout_behavior="@string/appbar_scrolling_view_behavior"複製程式碼

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>複製程式碼

我們可以在AppBarLayout的原始碼中找到這個ScrollingViewBehavior，其最終也是繼承自Behavior實現了特定的效果。

現在或許你有疑問，這個神祕的Behavior到底是個什麼鬼？

Behavior 核心概念

Behavior 就是行為，他定義了View的行為。

CoordinatorLayout的工作原理是搜尋定義了CoordinatorLayout Behavior的子view，不管是通過在xml中使用app:layout_behavior標籤還是通過在程式碼中對view類使用@DefaultBehavior修飾符來新增註解。當滾動發生的時候，CoordinatorLayout會嘗試觸發那些宣告瞭依賴的子view。

Behavior最基礎的兩個方法是：layoutDependsOn() 和onDependentViewChanged()；這兩個方法的說明如下：

 public boolean layoutDependsOn(CoordinatorLayout parent, T child, 
                                            View dependency) {
    boolean result;
    //返回false表示child不依賴dependency，ture表示依賴
    return result;    
}複製程式碼

/**
* 當dependency發生改變時（位置、寬高等），執行這個函式
* 返回true表示child的位置或者是寬高要發生改變，否則就返回false
*/
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, T child, View dependency) {
     //child要執行的具體動作
        return true;
}複製程式碼

FloatingActionButton 的Behavior

我們用Android Studio檢視FloatingActionButton的原始碼，會發現他包含了一個Behavior的註解：

@CoordinatorLayout.DefaultBehavior(FloatingActionButton.Behavior.class)
public class FloatingActionButton extends VisibilityAwareImageButton {
.....
}複製程式碼

這裡我們看一下FloatingActionButton的註解引數FloatingActionButton.Behavior.class 是怎樣實現的。通過原始碼我們發現這個FloatingActionButton的Behavior繼承自CoordinateLayout的Behavior，而且只實現了onDependentViewChanged方法，我們看一下：

public static class Behavior extends CoordinatorLayout.Behavior<FloatingActionButton> {
        private static final boolean AUTO_HIDE_DEFAULT = true;

        private Rect mTmpRect;
        private OnVisibilityChangedListener mInternalAutoHideListener;
        private boolean mAutoHideEnabled;

        public Behavior() {
            super();
            mAutoHideEnabled = AUTO_HIDE_DEFAULT;
        }

        public Behavior(Context context, AttributeSet attrs) {
            super(context, attrs);
            TypedArray a = context.obtainStyledAttributes(attrs,
                    R.styleable.FloatingActionButton_Behavior_Layout);
            mAutoHideEnabled = a.getBoolean(
                    R.styleable.FloatingActionButton_Behavior_Layout_behavior_autoHide,
                    AUTO_HIDE_DEFAULT);
            a.recycle();
        }

        @Override
        public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child,
                View dependency) {
            if (dependency instanceof AppBarLayout) {
                // If we're depending on an AppBarLayout we will show/hide it automatically
                // if the FAB is anchored to the AppBarLayout
                updateFabVisibilityForAppBarLayout(parent, (AppBarLayout) dependency, child);
            } else if (isBottomSheet(dependency)) {
                updateFabVisibilityForBottomSheet(dependency, child);
            }
            return false;
        }


    }複製程式碼

可以看到他在onDependentViewChanged中直接判斷了當前依賴的view。我們在模仿個人中心時，設定的FloatingActionButton的dependency就是AppBarLayout。而在這個方法中，他就會根據此執行特定的操作，也就是updateFabVisibilityForAppBarLayout 這個方法中的內容。

自定義Behavior

好了，說了這麼多，下面我們說一下自定義Behavior。我們在模仿知乎底部用於切換Fragment的Tab時，便使用了一個自定義的Behavior。

BottomViewBehavior

public class BottomViewBehavior extends CoordinatorLayout.Behavior<View> {
    public BottomViewBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        float translationY = Math.abs(dependency.getTop());
        child.setTranslationY(translationY);
        return true;
    }

}複製程式碼

這裡我們的思路很簡單，就是我們的View 要依賴於頂部的AppBarLayout，而用其距離螢幕的距離，作為底部（tab)相對於螢幕的距離，這樣當頂部的AppBarLayout 滑動出螢幕時，底部也將做相應的位移，當然這裡底部tab 的高度是需要做限制的，不能大於頂部AppBarLayout的高度。

<LinearLayout 
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_gravity="bottom"
        android:background="@color/white"
        android:orientation="horizontal"  
      app:layout_behavior="home.smart.fly.zhihuindex.behavior.BottomViewBehavior">

        <RadioGroup
            android:id="@+id/tabs_rg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:paddingLeft="5dp"
            android:paddingRight="5dp">

            <RadioButton
                android:id="@+id/home_tab"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#00000000"
                android:button="@null"
                android:checked="true"
                android:drawableTop="@drawable/home_sel"
                android:gravity="center|bottom"
                android:paddingTop="5dp" />

            <RadioButton
                android:id="@+id/explore_tab"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#00000000"
                android:button="@null"
                android:drawableTop="@drawable/explore_sel"
                android:gravity="center|bottom"
                android:paddingTop="5dp" />

            <RadioButton
                android:id="@+id/notify_tab"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#00000000"
                android:button="@null"
                android:drawableTop="@drawable/notify_sel"
                android:gravity="center|bottom"
                android:paddingTop="5dp" />

            <RadioButton
                android:id="@+id/user_tab"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#00000000"
                android:button="@null"
                android:drawableTop="@drawable/user_sel"
                android:gravity="center|bottom"
                android:paddingTop="5dp" />
        </RadioGroup>

    </LinearLayout>複製程式碼

我們將自定義的Behavior設定為這個bottom的app:layout_behavior就可以實現類似於知乎首頁的那種效果了。

FabBehavior

這裡我們用到的FloatingActionButton也可以自定義Behavior。

public class FabBehavior extends CoordinatorLayout.Behavior<View> {
    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
    /**
     * 控制元件距離coordinatorLayout底部距離
     */
    private float viewDistance;
    private boolean aninmating;

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

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {

        if(child.getVisibility() == View.VISIBLE&& viewDistance ==0){
            //獲取控制元件距離父佈局（coordinatorLayout）底部距離
            viewDistance =coordinatorLayout.getHeight()-child.getY();
        }

        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;//判斷是否豎直滾動
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        //dy大於0是向上滾動 小於0是向下滾動

        if (dy >=0&&!aninmating &&child.getVisibility()==View.VISIBLE) {
            hide(child);
        } else if (dy <0&&!aninmating &&child.getVisibility()==View.GONE) {
            show(child);
        }
    }

    private void hide(final View view) {
        ViewPropertyAnimator animator = view.animate().translationY(viewDistance).setInterpolator(INTERPOLATOR).setDuration(200);

        animator.setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
                aninmating =true;
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                view.setVisibility(View.GONE);
                aninmating =false;
            }

            @Override
            public void onAnimationCancel(Animator animator) {
                show(view);
            }

            @Override
            public void onAnimationRepeat(Animator animator) {
            }
        });
        animator.start();
    }

    private void show(final View view) {
        ViewPropertyAnimator animator = view.animate().translationY(0).setInterpolator(INTERPOLATOR).setDuration(200);
        animator.setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
                view.setVisibility(View.VISIBLE);
                aninmating =true;
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                aninmating =false;
            }

            @Override
            public void onAnimationCancel(Animator animator) {
                hide(view);
            }

            @Override
            public void onAnimationRepeat(Animator animator) {
            }
        });
        animator.start();
    }
}複製程式碼

這裡我們並沒有去實現layoutDependsOn() 和onDependentViewChanged()這兩個方法，前面我們看FloatingActionButton原始碼的時候知道他已經實現了onDependentViewChanged，我們這裡我們從自身需求出發，就其滑動時的特性，做了一個滑動螢幕時FloatingActionButton快速從底部彈出或隱藏的Behavior。結合註釋，程式碼很容易理解。

好了，這就是所有關於CoordinateLayout的東西了，可以看到Behavior是這個控制元件的核心，也是最難理解的東西。自定義Behavior可以讓我們的滑動動畫有無限的可能。

總結

關於這個模仿知乎首頁的實現，最初真的只是想研究一下“首頁”是怎麼實現的。結果隨著Demo的展開，加上輕微強迫症的作祟，便成了現在這個樣子。

到這裡，不得不說一下，個人感覺，真正的知乎首頁應該是沒有使用CoordinateLayout；因為按現在這種Activity+n*Fragment 的套路，使用CoordinateLayout完全是給自己添亂，因為CoordinateLayout是滑動特性是無法巢狀使用的（或者說很複雜，我沒發現），當我在最外層的Activity中使用了CoordinateLayout後，內部的Fragment中再次使用CoordinateLayout時，就會發生意想不到的各種bug，所以你會發現我們模擬的個人中心是有問題的，這裡就是巢狀CoordinateLayout後外部的CoordinateLayout失效了，導致底部的Behavior也失效。

不過在整個模仿的過程，也算是對CoordinateLayout的一次深入瞭解吧，順便也對SwipeRefreshLayout的內容和Tween Animation的使用做了一次鞏固。首頁RecycleView item中仿照Toolbar的彈出選單，真的是耗費了不少時間。

原始碼地址

好了，按照慣例再次給出github地址，歡迎star&fork。

後話

之前學習CoordinateLayout模仿知乎首頁的效果，斷斷續續的大概用了一週時間；現在回過頭來再看，其實關於CoordinateLayout的使用很簡單，甚至有些無聊；因為app:layout_scrollFlags和 app:layout_collapseMode 這兩個屬性的可選值都也就那麼幾個；這其實是一種侷限性，大家在應用中使用這個東西，產生的滑動視差效果幾乎就是相似的，唯一就是顏色及主題風格的差異；這很容易讓使用者產生審美疲勞；唯一變化的就是Behavior，這是我們可以自定義的東西，因此這也是最難掌握的東西。知乎首頁以及掘金首頁的效果比我在這裡實現的要更加柔和舒服，至於其是否使用了CoordinateLayout就不得而知了。

初學CSS仿QQ郵箱首頁介面
2017-07-09
CSS
登陸註冊頁面html程式碼(仿知乎)
2020-12-08
HTML
仿知乎分享介面
2018-02-07
仿知乎日報android
2014-11-20
Android
jQuery Mobile仿360首頁，jQuery Mobile網格佈局,jQuery Mobile網址大全,HTML5仿360首頁
2014-07-03
jQueryHTML
koa2 仿知乎筆記
2020-12-17
筆記
iOS仿淘寶詳情頁，支付寶首頁上滑效果
2017-11-22
iOS
Flutter開發實戰高仿微信（1）首頁
2020-05-15
Flutter
數控開發 · 元件 · 仿微信的首頁面
2020-12-02
元件
仿噹噹App首頁按鈕漸變動畫效果
2016-08-05
APP動畫
Halcon 學習筆記(4):導航首頁
2024-07-11
筆記
Vue3.0+TS仿知乎專欄
2020-12-21
Vue
Android 仿知乎分享控制元件
2017-10-01
Android控制元件
自定義 behavior 完美仿 QQ 瀏覽器首頁，美團商家詳情頁
2019-09-16
瀏覽器
仿知乎拖動廣告的實現iOS
2018-06-06
iOS
仿網易雲和支付寶首頁巢狀滑動
2017-07-06
巢狀
仿UC瀏覽器首頁下拉動畫及實現分析
2016-11-26
瀏覽器動畫
Vue知乎日報的學習筆記
2019-03-21
Vue筆記
wordpress企業網站主題仿製02-wordpress企業網站首頁的仿製
2018-07-08
網站
知乎上高讚的github中文學習資料
2019-03-18
Github
swift實現仿知乎搖一搖彈出框
2019-03-20
Swift
高仿網易新聞客戶端首頁滑動切換頁面框架--LXScrollContentView
2017-03-27
客戶端框架View
學習產品快報8月W2 | 學習首頁改版，小程式技能樹上線！
2022-11-23
Vue3學習（三）之網站首頁佈局開發
2021-10-17
Vue網站
（六）仿QQ首頁drawer/側滑刪除/浮動imgaeView/角標拖拽
2018-11-23
View
搭建網站需要學習什麼（轉自知乎）
2014-04-13
網站
學習產品快報8月W3 | WAP端學習首頁改版，GO技能樹上線
2022-08-19
Go
仿Windows計算器--學習筆記
2011-05-03
Windows筆記
Android 仿知乎創意廣告廣告還能這麼玩？
2017-12-05
Android
Flutter 入門與實戰（五十三）：仿掘金個人主頁，學習 FutureProvider 狀態管理
2021-08-16
FlutterIDE
SqlServer 分頁學習
2024-11-08
SQLServer
iOS 類知乎”分頁”效果的實現?
2019-07-26
iOS
學習盡調，首選渾水
2017-03-26
邏輯學筆記-知乎
2024-09-22
筆記
仿京東、淘寶首頁，通過兩層巢狀的RecyclerView實現tab的吸頂效果
2019-08-23
巢狀View
jquery外掛：仿百度首頁可展開收起的訊息提示控制元件
2013-08-13
jQuery控制元件
JS 網頁列印頁邊距頁首頁尾
2009-07-23
JS網頁
頁表的再學習
2024-05-26