共享元素过渡与嵌套视图

Question

共享元素过渡与嵌套视图

4

我准备了一个简单的样例程序，尝试使用嵌套视图（GitHub上的源代码）进行共享元素转换。在这种情况下，它是CardView内部的ImageView。我得到了以下结果：

如您所见，虽然父视图(CardView)动画效果很棒，但子视图(ImageView)却没有。它看起来像是从CardView未来位置的左上角开始动画。 适配器(Adapter)

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    final View v = mInflater.inflate(R.layout.grid_item, null);

    v.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent i = new Intent(new Intent(mContext, DialogActivity.class));
            ActivityOptions options = ActivityOptions
                    .makeSceneTransitionAnimation((Activity) mContext,
                            Pair.create(v, "background_transition"),
                            Pair.create(v.findViewById(R.id.image), "image_transition"));
            mContext.startActivity(i, options.toBundle());
        }
    });

    return v;
}

原始布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="1.5dp"
    android:transitionName="background_transition"
    card_view:cardBackgroundColor="@android:color/holo_red_dark">

    <com.tlongdev.sharedelementstest.SquareImageLayout
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:transitionName="image_transition"
        android:src="@android:drawable/btn_star_big_on"/>

</android.support.v7.widget.CardView>

目标布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="com.tlongdev.sharedelementstest.DialogActivity">

    <android.support.v7.widget.CardView
        android:id="@+id/card"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@android:color/holo_red_dark"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="10dp"
        android:transitionName="background_transition">

        <com.tlongdev.sharedelementstest.SquareImageLayout
            android:layout_margin="25dp"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@android:drawable/btn_star_big_on"
            android:transitionName="image_transition" />

    </android.support.v7.widget.CardView>

</RelativeLayout>

希望能得到任何帮助。

更新 16/11/15：看起来这个问题已经在Marshmallow上解决了，但至少在Lollipop（模拟器上）仍然存在。

- Longi

看一下 transition group，该属性允许您在转换中将 ViewGroup 作为单个实体进行动画处理。 - Nikola Despotoski

@Nikola Despotoski 谢谢，我会看一下，并在有时间时回复。 - Longi

@NikolaDespotoski，我似乎找不到它，你能指点我一下吗？ - Longi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Xjasz · Answer 1

如果CardView是唯一的子项，请删除RelativeLayout。
如果这样可行，请告识我。 目标布局

<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:transitionName="background_transition"
    card_view:cardBackgroundColor="@android:color/holo_red_dark"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="10dp"
    tools:context="com.tlongdev.sharedelementstest.DialogActivity">

    <com.tlongdev.sharedelementstest.SquareImageLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_margin="25dp"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:src="@android:drawable/btn_star_big_on" />
</android.support.v7.widget.CardView>

如果淡入淡出效果看起来很奇怪，那么使用这个。 适配器

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    final View v = mInflater.inflate(R.layout.grid_item, null);

    v.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
                Intent i = new Intent(new Intent(mContext, DialogActivity.class));
                ActivityOptions options = ActivityOptions
                    .makeSceneTransitionAnimation((Activity) mContext,
                            Pair.create(v, "background_transition"));
                mContext.startActivity(i, options.toBundle());
            }
        });

    return v;
}