1. 程式人生 > >Android協調佈局CoordinatorLayout 印象筆記

Android協調佈局CoordinatorLayout 印象筆記

1.題記

    本篇文章簡述下常見的協調佈局CoordinatorLayout的內部view之間的關係

2.正文

舉個最常見的佈局例子

<?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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="wrap_content"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@drawable/material_img"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                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"
        android:paddingTop="50dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/my_txt"
            android:textSize="20sp" />

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

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

        一開始看這個佈局是懵的,覺得就一個標題欄你給做的這麼複雜,嵌套了幾層,非常的不合理。我嘗試著一層層去掉它們的外殼執行看下效果(抱歉,萌新的我都是先看效果再去分析具體原因的),跑起來後發現,噫,標題欄是固定的,並不能像之前那樣隨著下面的NestedScrollView協調滾動,眉頭一緊發現事情並不簡單。

  2.1 關於AppBarLayout

        那看看這個AppBarLayout究竟是什麼東東,沒有了它為啥標題欄就不能和下面的NestedScrollView協調滾動了,看了api,知道它繼承至LinearLayout:

@CoordinatorLayout.DefaultBehavior(AppBarLayout.Behavior.class)
public class AppBarLayout extends LinearLayout {
  //...todo
}

        嚯哦,有個很神奇的東西出現了,AppBarLayout通過註解的方式綁定了一個Behavior,Behavior可以說是CoordinatorLayout的非常重要的一個特性了,通過Behavior可以監聽和自定義控制子View的行為,這就是關鍵點,也是為什麼有了AppBarLayout才能協調滾動,沒有AppBarLayout標題欄就固定不動的原因,繼續看Behavior,發現它是AppBarLayout的內部類:

 public static class Behavior extends HeaderBehavior<AppBarLayout> {//TODO...}

        Behavior繼承自HeaderBehavior,HeaderBehavior裡面重寫觸控事件,伴隨監聽器實時變化:

abstract class HeaderBehavior<V extends View> extends ViewOffsetBehavior<V> {
    @Override
    public boolean onTouchEvent(CoordinatorLayout parent, V child, MotionEvent ev) {
        switch (MotionEventCompat.getActionMasked(ev)) {
            case MotionEvent.ACTION_DOWN: {
                final int x = (int) ev.getX();
                final int y = (int) ev.getY();

                if (parent.isPointInChildBounds(child, x, y) && canDragView(child)) {
                    mLastMotionY = y;
                    mActivePointerId = MotionEventCompat.getPointerId(ev, 0);
                    ensureVelocityTracker();
                } else {
                    return false;
                }
                break;
            }

            case MotionEvent.ACTION_MOVE: {
                final int activePointerIndex = MotionEventCompat.findPointerIndex(ev,
                        mActivePointerId);
                if (activePointerIndex == -1) {
                    return false;
                }

                final int y = (int) MotionEventCompat.getY(ev, activePointerIndex);
                int dy = mLastMotionY - y;

                if (!mIsBeingDragged && Math.abs(dy) > mTouchSlop) {
                    mIsBeingDragged = true;
                    if (dy > 0) {
                        dy -= mTouchSlop;
                    } else {
                        dy += mTouchSlop;
                    }
                }

                if (mIsBeingDragged) {
                    mLastMotionY = y;
                    // We're being dragged so scroll the ABL
                    scroll(parent, child, dy, getMaxDragOffset(child), 0);
                }
                break;
            }

            case MotionEvent.ACTION_UP:
                if (mVelocityTracker != null) {
                    mVelocityTracker.addMovement(ev);
                    mVelocityTracker.computeCurrentVelocity(1000);
                    float yvel = VelocityTrackerCompat.getYVelocity(mVelocityTracker,
                            mActivePointerId);
                    fling(parent, child, -getScrollRangeForDragFling(child), 0, yvel);
                }
                // $FALLTHROUGH
            case MotionEvent.ACTION_CANCEL: {
                mIsBeingDragged = false;
                mActivePointerId = INVALID_POINTER;
                if (mVelocityTracker != null) {
                    mVelocityTracker.recycle();
                    mVelocityTracker = null;
                }
                break;
            }
        }

        if (mVelocityTracker != null) {
            mVelocityTracker.addMovement(ev);
        }

        return true;
    }
    private class FlingRunnable implements Runnable {
        private final CoordinatorLayout mParent;
        private final V mLayout;

        FlingRunnable(CoordinatorLayout parent, V layout) {
            mParent = parent;
            mLayout = layout;
        }

        @Override
        public void run() {
            if (mLayout != null && mScroller != null) {
                if (mScroller.computeScrollOffset()) {
                    setHeaderTopBottomOffset(mParent, mLayout, mScroller.getCurrY());
                    // Post ourselves so that we run on the next animation
                    ViewCompat.postOnAnimation(mLayout, this);
                } else {
                    onFlingFinished(mParent, mLayout);
                }
            }
        }
    }
}

        程式碼沒全貼,有興趣的可以看api跟下流程,綜上,這個比較特別的AppBarLayout的特別之處在於它綁定了一個特別的Behavior,這個Behavior重寫OnTouch事件,監聽父佈局(CoordinatorLayout)的變化動態,因而內部可以做出對應變化調整。

2.2  關於CollapsingToolbarLayout

       關於CollapsingToolbarLayout,csdn上有篇文章講得很明白,我在這兒貼個連結:CollapsingToolbarLayout 詳細請摸我

3.總結

以上,村通電沒有多久,寫得感覺挺亂,加油加油。