安卓 - ActivityOptionsCompat - 自定义展开动画

Question

我正在尝试找出如何制作自定义展开动画，并且使用ActivityOptionsCompat似乎是最好的方法；然而，我不太确定如何编写自定义过渡动画来实现我想要的效果。

我在列表顶部有一个名为“打开”的按钮，按下该按钮将使其下方的ListView向下移动，展开并显示带有选项的屏幕。我希望这张图片能解释我的目标。

我想要做的是：

• 将顶部的“打开”栏设置为第二个屏幕中名为“FILTERS”的顶部栏“标题”
• 将直接位于“打开”栏下方的0像素高的视图设置为扩展选项列表称为“FRAME”
• 将ViewPager设置为扩展选项下面的0像素高视图，称为“LIST”

但是列表不会被推开，新屏幕只是覆盖在其上。

ViewCompat.setTransitionName( filters, "FILTERS" );
ViewCompat.setTransitionName( frame, "FRAME" );
ViewCompat.setTransitionName( viewPager, "LIST" );

ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
            getActivity(), new Pair<>( filters, "FILTERS" ), new Pair<>( frame, "FRAME" ), new Pair<>( (View)viewPager, "LIST" ) );


ActivityCompat.startActivity( getActivity(), new Intent( getActivity(), Filters.class ),
            options.toBundle() );

有人知道如何实现这种过渡动画的样式吗？

感谢你的时间和帮助。

- advice

---

你正在测试哪个API级别？它只能在API 21或更高版本上运行。 - GPack

我正在尝试针对15岁及以上的目标。 - advice

Answer 1

如果不需要另一个活动，您可以使用我过去也用过的这个很好的库，由umano提供。

要使用它，您需要将其包含在gradle依赖项中：

compile 'com.sothree.slidinguppanel:library:3.2.0'

然后你可以像这样使用它：

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:umanoPanelHeight="68dp"
    sothree:umanoShadowHeight="4dp"
    sothree:umanoParallaxOffset="100dp"
    sothree:umanoDragView="@+id/dragView"
    sothree:umanoOverlay="true"
    sothree:umanoScrollableView="@+id/list">

    <!-- MAIN CONTENT -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            xmlns:sothree="http://schemas.android.com/apk/res-auto"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/main_toolbar"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            sothree:theme="@style/ActionBar"
            android:layout_width="match_parent"/>
        <TextView
            android:id="@+id/main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="?attr/actionBarSize"
            android:gravity="center"
            android:text="Main Content"
            android:clickable="true"
            android:focusable="false"
            android:focusableInTouchMode="true"
            android:textSize="16sp" />
    </FrameLayout>

    <!-- SLIDING LAYOUT -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:orientation="vertical"
        android:clickable="true"
        android:focusable="false"
        android:id="@+id/dragView">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="68dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/name"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="14sp"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"/>

            <Button
                android:id="@+id/follow"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:textSize="14sp"
                android:gravity="center_vertical|right"
                android:paddingRight="10dp"
                android:paddingLeft="10dp"/>

        </LinearLayout>

        <ListView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
        </ListView>
    </LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

- Niko Adrianus Yuwono

---

我不认为那正是我要找的。我希望它看起来像是将视图从0像素拉伸到填充屏幕，更像是一个覆盖层。 - advice

Answer 2

ActivityOptionsCompat.makeSceneTransitionAnimation() 只在 API 21+ 设备上有效。 要查看动画，需要在样式级别启用转换

<!-- enable window content transitions -->
<item name="android:windowContentTransitions">true</item>

需要为调用和被调用的目标布局视图设置相同的TransitionName。

无论如何，过渡效果将类似于缩放进入/缩放退出，而不是滚动。

- GPack