使用“协调器布局”在自定义弹出窗口设置动画时移动浮动操作按钮

时间:2016-07-24 20:56:27

标签: android popup android-coordinatorlayout floating-action-button

长话短说,当自定义视图以与快餐栏相同的方式上下移动时,你可以让floatingActionButton上下移动吗?

我在协调器布局中有一个浮动操作按钮,当快餐栏显示时,它会向上移动。我甚至设法定制了FAB"行为"通过教程使其缩小和增长而不是上下移动。

我还有一个自定义弹出窗口(LinearLayout),当按下按钮时,它会从底部向上和向下再次向下动画,并且当前只会弹出不会移动的浮动动作按钮。两者都在CoordinatorLayout中我希望浮动动作按钮在自定义弹出窗口上下动画时上下移动...就像它对小吃吧一样。

我通过添加自定义弹出窗口作为对FloatingActionButton行为类的layoutDependsOn方法的调用的依赖来设法使其工作。但是我的onDependentViewChanged方法的实现实际上让FAB上下动画只是感觉不对,因为我实际上需要使用协调动画来单独设置floatingActionButton的动画以匹配自定义弹出动画。

有人能指出我如何更好,更轻松地做到这一点吗?

我会尝试提供有意义的代码段....

自定义弹出窗口

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:id="@+id/selected_item_popup_linear_layout"
android:elevation="4dp"
android:visibility="gone"
>

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/selectedItemPopupBackground" android:elevation="4dp"
    android:id="@+id/selected_item_popup_content">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/selected_item_popup_delete_button"
        android:layout_gravity="center"
        android:padding="14dp"
        android:src="@drawable/ic_delete_black_24dp"
        android:background="@color/selectedItemPopupBackground"
        android:tint="@color/selectedItemPopupDeleteTint"
        />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/selected_item_popup_edit_button"
        android:layout_gravity="center"
        android:padding="14dp"
        android:src="@drawable/ic_mode_edit_black_24dp"
        android:background="@color/selectedItemPopupBackground"
        android:tint="@color/selectedItemPopupEditTint"/>

</LinearLayout>

浮动操作按钮:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/floating_action_button_add_item"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add_white_24dp"
    android:visibility="visible"
    android:layout_marginBottom="@dimen/fab_margin_bottom"
    android:layout_marginRight="@dimen/fab_margin_right"
    app:layout_anchor="@id/pager"
    app:layout_anchorGravity="bottom|right|end"
    app:layout_behavior=".FloatingActionButtonBehaviour"
    app:rippleColor="@color/boardItemBackgroundSelected"/>

浮动操作按钮行为:

    public class FloatingActionButtonBehaviour extends CoordinatorLayout.Behavior<FloatingActionButton> {

    private Context mContext;

    public FloatingActionButtonBehaviour(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {

        if (dependency.equals(parent.findViewById(R.id.selected_item_popup_linear_layout))) {
            return true;
        }

        if (dependency instanceof Snackbar.SnackbarLayout) {
            return true;
        }

        return false;
    }


    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, final FloatingActionButton child, View dependency) {

        if(dependency instanceof Snackbar.SnackbarLayout) {

            float translationY = getFabTranslationYForSnackbar(parent, child);
            float percentComplete = -translationY / dependency.getHeight();
            float scaleFactor = 1 - percentComplete;

            child.setScaleX(scaleFactor);
            child.setScaleY(scaleFactor);
        }

        if (dependency.equals(parent.findViewById(R.id.selected_item_popup_linear_layout))) {

            View contentView = dependency.findViewById(R.id.selected_item_popup_content);
            int contentViewHeight = contentView.getHeight();

            if (dependency.getVisibility() == View.VISIBLE) {

                Animation bottomUp = AnimationUtils.loadAnimation(mContext, R.anim.fab_move_up);
                child.startAnimation(bottomUp);
                child.setVisibility(View.VISIBLE);
                float translationY = Math.min(0, dependency.getTranslationY() - contentViewHeight);
                child.setTranslationY(translationY);

            } else {

                Animation bottomDown = AnimationUtils.loadAnimation(mContext, R.anim.fab_move_down);
                child.startAnimation(bottomDown);
                child.setVisibility(View.VISIBLE);
                child.setTranslationY(dependency.getTranslationY());
            }

        }

        return true;

    }

    private float getFabTranslationYForSnackbar(CoordinatorLayout parent, FloatingActionButton fab) {
        float minOffset = 0;
        final List<View> dependencies = parent.getDependencies(fab);
        for (int i = 0, z = dependencies.size(); i < z; i++) {
            final View view = dependencies.get(i);
            if (view instanceof Snackbar.SnackbarLayout && parent.doViewsOverlap(fab, view)) {
                minOffset = Math.min(minOffset, ViewCompat.getTranslationY(view) - view.getHeight());
            }
        }

        return minOffset;
    }
}

为自定义弹出设置设置动画的代码:

        Animation bottomUp = AnimationUtils.loadAnimation(mActivity, R.anim.bottom_up);
    final ViewGroup selectedItemPopupLinearLayout = (ViewGroup)mActivity.findViewById(R.id.selected_item_popup_linear_layout);
    selectedItemPopupLinearLayout.startAnimation(bottomUp);
    selectedItemPopupLinearLayout.setVisibility(View.VISIBLE);

1 个答案:

答案 0 :(得分:1)

我想我在BottomSheets / ModalSheets中找到了答案......

https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout#bottom-sheets

尚未尝试但它看起来像是