1. 程式人生 > >CoordinatorLayout 使用綜述系列(一)

CoordinatorLayout 使用綜述系列(一)

CoordinatorLayout 使用綜述系列(一)

在 gradle 檔案中引入 meterial design 庫:

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

CoordinatorLayout 實現了多種Material Design中提到的滾動效果

1 CoordinatorLayout 與 FloatingActionButton 結合使用

<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="@mipmap/ic_launcher" /> </android.support.design.widget.CoordinatorLayout>

activity 中

findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
    @Override
    public void
onClick(View view)
{ Snackbar.make(view, "Hello Snackbar", Snackbar.LENGTH_LONG).show(); } });

2 CoordinatorLayout 與 其他控制元件(例如 Button) 結合使用

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

    <Button
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:text="click"/>

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

彈出的Snackbar會將Button覆蓋,也就是CoordinatorLayout 不能正常工作。這是因為 View 沒有預設的CoordinatorLayout.Behavior 的實現,
那麼我們的解決方案就是自定義一個CoordinatorLayout.Behavior來控制Button的響應

import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Button;

/**
 * class infation
 */
public class FloatingActionButtonBehavior extends CoordinatorLayout.Behavior<Button> {
    public FloatingActionButtonBehavior() {
    }

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


    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, Button child, View dependency) {
        //如果我們想監聽改變,就讓方法返回 true。在例子中,我們只想監聽 Snackbar 物件的改變
        return dependency instanceof Snackbar.SnackbarLayout;
    }
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, Button child, View dependency) {
        /**
         * 當 CoordinatorLayout 中的 view 每次發生變化時,onDependentViewChanged 方法都會被呼叫。
         * 在這個方法中,我們要讀取當前 Snackbar 的狀態。
         * 當Snackbar 顯示的時候,我們想把 Button 也移上來。
         * 要實現這樣的目的,我們需要把 Button 的 Y 座標設定為Snackbar 的高度。要得到正確的轉換值,我們需要從轉化的 Y 值中減去 Snackbar 的高度
         */
        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
    }
}

然後將寫好的 FloatingActionButtonBehavior 設定給我們所要變動的Button 

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

    <Button
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:text="click"/>

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


所有通過上述的自定義Behavior  我們就可以做到定義任想要改變的控制元件移動