2015-10-24 31 views
2

我放在一起一個簡單的示例應用程序來嘗試共享元素轉換與嵌套視圖(source code on github)。在這種情況下,它是CardView中的ImageView。我得到了以下結果:共享元素轉換與嵌套視圖

image

正如你所看到的,而父視圖(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> 

不限ħ elp將不勝感激。

更新16/11/15:看起來這個問題已經在棉花糖上解決了,但仍然存在於棒棒糖上(至少在模擬器上)。

+0

看看過渡組,該屬性可以讓你的動畫'ViewGroup'作爲單一實體您轉型。 –

+0

@Nikola Despotoski謝謝,我會看看,並會在我有時間時回報 – Longi

+0

@NikolaDespotoski我似乎無法找到它,你能指出我朝着正確的方向嗎? – Longi

回答

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

這不是我要找的。您更改了佈局以使Cardview更小,並且仍然存在視覺工件。 – Longi

+0

它動畫錯誤嗎?我相信由於動畫沒有同步,可以很容易地添加邊距,所以發生視覺僞影。我會做一些改變。 – Xjasz