千呼万唤始出来的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;
}

最后一步是在Coo rdinatorLayout引入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

秒客网

千呼万唤始出来的CoordinatorLayout

遇见 COORDINATORLAYOUT（ANDROID）

VIEWS 学会如何 BEHAVE

相关文章