Question

我整理了一个简单的示例应用，尝试使用嵌套视图（source code on github）进行共享元素转换。在这种情况下，它是CardView中的ImageView。我得到了以下结果：

正如您所看到的，虽然父视图（CardView）很好地动画了子视图（ImageView），但它并没有。它看起来像是从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"),
                            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上（至少在模拟器上）。

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;
}

共享元素使用嵌套视图进行转换

1 个答案: