千呼萬喚始出來的CoordinatorLayout

CoordinatorLayout，千呼萬喚始出來。

親可記得我之前轉載的INTRODUCTION TO COORDINATOR LAYOUT ON ANDROID，今天將它翻譯一遍，以饗讀者。

在這一年的I/O開發者大會上，Google引入了一個新的Android設計支持庫來幫助開發者們在他們的APP中使用material design，這裏麪包含了一些爲API7及以上設計的很重要的material design building blocks。如果你不小心錯過了他，可以點擊這裏http://android-developers.blogspot.com/2015/05/android-design-support-library.html.

遇見 COORDINATORLAYOUT（ANDROID）

相比較其他layout而言新的超有力的FrameLayout（CoordinatorLayout）十分有趣。從他的名字中你也可以猜出來這個超級layout有能力協調所有獨立的子views。

你要做的只是將所有view寫在CoordinatorLayout中，是時候寫一波代碼了，這個Demo十分簡單，它包含一個用於觸發Snackbar的Floating Action Button。

首先，在gradle中添加支持庫：

compile 'com.android.support:design:22.2.0'

現在爲我們的Activity寫一個簡單的佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    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>

然後是MainActivity：

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, "Hello Snackbar", Snackbar.LENGTH_LONG).show();
      }
    });
  }
}

完成後：

很酷~

但是，如果你想實現不同效果的Floating Action Button怎麼辦？

支持庫裏的Floating Action Button實現沒有菜單選項（原文menu options），

所以我們可以試試Base的開發者開發的開源Floating Action Button庫：

compile 'com.getbase:floatingactionbutton:1.9.1'

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

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        app:fab_icon="@drawable/ic_done" />

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

CoordinatorLayout這次沒有生效，這是因爲我們的View沒有默認的CoordinatorLayout.Behavior實現。

解決方案？我們也等着別人來解決它···

或者，我們可以爲自己項目中的View寫定製化的Behavior實現。

VIEWS 學會如何 BEHAVE

這纔是這套框架真正的力量，你沒有必要訪問這個View的類來設置你的behavior，你還可以改變任何View的默認behavior。

首先我們需要實現Behavior類：

public class FloatingActionButtonBehavior extends CoordinatorLayout.Behavior<FloatingActionButton>

爲了使這個類能解析XML我們需要爲其添加帶有Context和AttributeSet參數的構造方法。

public FloatingActionButtonBehavior(Context context, AttributeSet attrs) {}

下一步是重寫layoutDependsOn()，如果我們想監聽它的變化就應該返回true。

在這個例子中我們想監聽Snackbar對象的變化。

現在讓我們實現具體的行爲。

每當CoordinatorLayout裏面的View變化時onDependentViewChanged方法就會被調用。在這個方法裏面我們能讀到Snackbar的狀態，當Snackbar出現時我們讓Floating Action Button上移，爲了做到這一點我們需要將Floating Action Button的Y座標上升（上升高度爲Snackbar的高度），Snackbar上升高度爲其本身的高度，即在Y軸上的偏移量減去其自身高度。（參考View座標系，Y軸垂直向下爲正），根據文檔，當對象改變其在屏幕上的位置時，我們應該返回true。

PS：

//此方法用於獲取View在水平方向的偏移量，以像素爲單位
public float android.view.View.getTranslationX()
//此方法用於獲取View在垂直方向的偏移量，以像素爲單位
public float android.view.View.getTranslationY()
//此方法用於設置View在水平方向的偏移量，以像素爲單位。會引發View重繪
//偏移量爲正數時，表示View從左向右平移。反之則從右向左平移
public void android.view.View.setTranslationX(float translationX)
//此方法用於設置View在水平方向的偏移量，以像素爲單位。會引發View重繪
//偏移量爲正數時，表示View從上向下平移。反之則從下向上平移
public void android.view.View.setTranslationY(float translationY)

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
  float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
  child.setTranslationY(translationY);
  return true;
}

最後一步是在CoordinatorLayout引入Floating Action Button，我們在xml中做如下修改：

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

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        app:layout_behavior="com.getbase.coordinatorlayoutdemo.FloatingActionButtonBehavior"
        app:fab_icon="@drawable/ic_done" />

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

ok，大功告成。

如果你想爲自己的View定義默認的behavior，只需要在你的Behavior中加上DefaultBehavior聲明。

源代碼（github）:

https://github.com/ggajews/coordinatorlayoutwithfabdemo

Happy coding!

https://lab.getbase.com/introduction-to-coordinator-layout-on-android/

翻譯不易，轉載請註明出處哈。

權興權意

代碼可以更優雅~

http://blog.csdn.net/hxqneuq2012/article/details/56481639