読者です 読者をやめる 読者になる 読者になる

うさがにっき

読書感想文とプログラムのこと書いてきます

独自Behaviorにより、CoordinatorLayout指定時のアニメーションを指定

概要

Design Support LibraryのCoordinatorLayoutを使ってみる_1 - うさがにっき
の続き
独自Behaviorを指定して、CoordinatorLayout指定時のanimationを独自に作成する
Floating Action Buttonを下方向にスクロールしたら消えるようにanimationを作成する

詳細

FloatingActionButtonのBehaviorを継承して独自animationを作成する

onStartNestedScrollで縦方向のスクロールだけイベントを拾うようにする

public class MyFabBehavior extends FloatingActionButton.Behavior {
    boolean mIsAnimating = false;

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

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
    }

onNestedScrollでy方向で下にスクロールしたらFloatingActionButtonを隠す、上にスクロールしたら表示するようにする

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        if(!mIsAnimating) {
            if (dyConsumed > 0) {
                animateHide(child);
            } else {
                animateShow(child);
            }
        }
    }

全体

public class MyFabBehavior extends FloatingActionButton.Behavior {
    boolean mIsAnimating = false;

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

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        if(!mIsAnimating) {
            if (dyConsumed > 0) {
                animateHide(child);
            } else {
                animateShow(child);
            }
        }
    }

    private void animateShow(FloatingActionButton child) {
        ViewCompat.animate(child).scaleX(1.0F).scaleY(1.0F).alpha(1.0F)
                .setInterpolator(new FastOutSlowInInterpolator());
    }

    private void animateHide(FloatingActionButton child) {
        ViewCompat.animate(child).scaleX(0.0F).scaleY(0.0F).alpha(0.0F)
                .setInterpolator(new FastOutSlowInInterpolator())
                .setListener(new ViewPropertyAnimatorListener() {
                    @Override
                    public void onAnimationStart(View view) {
                        mIsAnimating = true;
                    }

                    @Override
                    public void onAnimationEnd(View view) {
                        mIsAnimating = false;
                    }

                    @Override
                    public void onAnimationCancel(View view) {
                        mIsAnimating = false;
                    }
                });
    }
}

一応レイアウト
CoordinatorLayoutの直下にFloatingActionButtonを配置し、behaviorを指定する

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivityFragment"
    tools:showIn="@layout/activity_main">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="100dp"
            android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"/>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        android:layout_gravity="bottom|right"
        app:layout_behavior="com.personal.floatingactionbuttonbehavior.MyFabBehavior"/>

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