Android共享視圖轉換與淡入淡出結合

Question

我有一個傳遞共享元素動畫的活動。這是一個基本的ImageView過渡，工作得很好。

現在，對於Activity中的其他元素，我希望有一個淡入淡出的動畫。現在，這適用於所有元素，但與ImageView（共享視圖）在同一視圖組中的視圖。

我的佈局如下。該ImageView的是CollapsingToolbarLayout和AppBarLayout內，我成立的OnCreate這樣淡出過渡：

getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS); 
    super.onCreate(savedInstanceState); 

    Fade fade = new Fade(Fade.IN); 
    fade.setDuration(4000); 

    getWindow().setEnterTransition(fade); 
    setContentView(R.layout.article_details); 

佈局：

<?xml version="1.0" encoding="utf-8"?> 

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appbar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/article_details_collapsing_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:fitsSystemWindows="true" 
     app:contentScrim="?attr/colorPrimary" 
     app:expandedTitleMarginEnd="10dp" 
     app:expandedTitleMarginStart="10dp" 
     app:expandedTitleTextAppearance="@style/title_text_appearence" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

     <ImageView 
      android:id="@+id/article_details_image" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      android:transitionName="imageTrans" 
      app:layout_collapseMode="parallax" 
      app:layout_collapseParallaxMultiplier="0.6" 
      /> 


     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:theme="@style/AppTheme.ToolBar" 
      android:background="#0000" 
      app:layout_collapseMode="pin" 
      /> 

    </android.support.design.widget.CollapsingToolbarLayout> 
</android.support.design.widget.AppBarLayout> 

<android.support.v4.widget.NestedScrollView 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:transitionGroup="true" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

    <WebView 
     android:id="@+id/article_details_webview" 
     android:layout_margin="20dp" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     /> 
</android.support.v4.widget.NestedScrollView> 

<android.support.design.widget.FloatingActionButton 
    app:fabSize="mini" 
    app:layout_anchor="@id/appbar" 
    app:layout_anchorGravity="bottom|right|end" 
    android:src="@drawable/star_white" 
    android:layout_marginRight="16dp" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" /> 

所以，總結。嵌套的滾動佈局及其webview被設置爲淡入，但AppBarLayout中的其他視圖不是。 AppBarLayout中的ImageView的行爲與共享元素應該一樣（從傳遞的Activity移動到位）。另外，只有一半的FloatingActionButton淡入，其餘的在4秒淡入淡出之後彈出。

編輯：實際上，我遇到了同樣的問題，因爲這個傢伙：Content Transitions on Top of Shared Elements in android

Answer 1

我找到了解決這個「問題」。問題是這是預期的行爲。您可以通過調用禁用重疊

getWindow().setSharedElementsUseOverlay(false);` 

但是，更多的情況下會創建工件。最後我做這兩種方式，並取消了對我的活動爲背景，用透明主題：

<style name="Theme.Transparent" parent="@style/AppTheme"> 
    <item name="android:windowIsTranslucent">true</item> 
    <item name="android:windowBackground">@android:color/transparent</item> 
</style> 

因爲我的目標是在CollapsingToolbarLayout文字褪色，我不能做到這一點，因爲ImageView的是佈局的一個孩子。我最終做的是添加另一個ImageView，其圖像與在活動之間進行動畫處理的圖像相同，並在Activity共享元素轉換完成後與CollapsingToolbarLayout一起淡入。由於共享元素圖像已經到位，所以新的ImageView在UI中沒有任何區別。當然這個解決方案並不是最優的，但是對於我的問題來說唯一的解決方案就是考慮API的行爲。退出活動時，我只需隱藏替換的ImageView，用戶就可以將共享元素圖像轉換爲父活動中的位置。