从边界外部制作动画视图以显示部分然后完整

Question

我目前正在努力寻找一种以特定方式为某些视图制作动画的好方法。 以下屏幕截图应显示我想要实现的目标：

第一个州（HIDDEN）：

第二州（COLLAPSED）

第三州（EXPANDED）

这些状态之间的变化应该是动画的。 这些观点根本不可拖动或可滑动。 我知道umano有SlidingUpPanel，但我认为那会有点矫枉过正。

目前我实现此行为的方式如下： 我将2个面板（顶部和机器人）包装在一个相对布局中，并使用属性动画制作器来设置相对布局高度的变化。 因此，当状态为COLLAPSED时，相对布局的高度将从0到顶部面板的高度进行动画处理。

这很好但我认为这是一个非常糟糕的方法。 我已经尝试创建一个自定义的ViewGroup，但动画部分还没有工作。

赞赏任何意见。

Answer 1

我会在这里使用FrameLayout，如下所示：

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <FrameLayout
            android:id="@+id/screen"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    <FrameLayout
            android:id="@+id/top_panel"
            android:layout_width="match_parent"
            android:layout_height="@dimen/top_panel_height"
            android:layout_gravity="bottom"/>
    <FrameLayout
            android:id="@+id/bottom_panel"
            android:layout_width="match_parent"
            android:layout_height="@dimen/bottom_panel_height"
            android:layout_gravity="bottom"/>
</FrameLayout>

然后，为状态创建枚举

enum State {
    HIDDEN {
        @Override
        public void moveTo(View topPanel, View bottomPanel, long animationDuration) {
            topPanel.animate().translationY(topPanel.getHeight()).setDuration(animationDuration);
            bottomPanel.animate().translationY(topPanel.getHeight() + bottomPanel.getHeight()).setDuration(animationDuration);
        }
    },
    COLLAPSED {
        @Override
        public void moveTo(View topPanel, View bottomPanel, long animationDuration) {
            topPanel.animate().translationY(0).setDuration(animationDuration);
            bottomPanel.animate().translationY(bottomPanel.getHeight()).setDuration(animationDuration);
        }
    },
    EXPANDED {
        @Override
        public void moveTo(View topPanel, View bottomPanel, long animationDuration) {
            topPanel.animate().translationY(-bottomPanel.getHeight()).setDuration(animationDuration);
            bottomPanel.animate().translationY(0).setDuration(animationDuration);
        }
    };

    public abstract void moveTo(View topPanel, View bottomPanel, long animationDuration);
}

使用方法如下：

State newState = State.EXPANDED;
newState.moveTo(topPanel, bottomPanel, 200);