CoordinatorLayout 使用綜述系列(一)
阿新 • • 發佈:2019-01-07
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 我們就可以做到定義任想要改變的控制元件移動