4

ネストされたビューで共有要素の遷移を試すための簡単なサンプル アプリをまとめました (ソース コードは 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>

どんな助けでも大歓迎です。

UPDATE 16/11/15:この問題は Marshmallow では解決されているようですが、Lollipop (少なくともエミュレーター) にはまだ存在します。

4

1 に答える 1

0

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;
}
于 2015-11-16T19:56:01.907 に答える