Android共享元素片段转换

大家好！我有2个片段。在片段中，我有一张卡片中的小图片。在2d片段中，我的布局标题中有相同的图像。我想使该图像的共享单元转变从一个片段到另一个像在本实施例中http://1.bp.blogspot.com/-Vv4SxVSI2DY/VEqQxAf3PWI/AAAAAAAAA7c/mfq7XBrIGgo/s1600/activity_transitions%2B(1).gif Android共享元素片段转换

2D片段：

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/main" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="#f2f4f7"> 
<CustomScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/scroll_view" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:background="#f2f4f7"> 
    <LinearLayout 
     android:id="@+id/content_wrapper" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:divider="@drawable/vertical_divider" 
     android:showDividers="middle"> 
     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 
      <RelativeLayout 
       android:id="@+id/header_wrapper" 
       android:layout_width="match_parent" 
       android:layout_height="166.7dp"> 
       <ImageView 
        android:id="@+id/share_image" 
        android:transitionName="imageTransition" 
        android:layout_width="match_parent" 
        android:layout_height="166.7dp" 
        android:src="@drawable/friday"/>

第一片段：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
android:gravity="center_horizontal" 
android:layout_marginTop="56dp" 
android:background="#ff1e1e23"> 
<ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="25dp" 
    android:src="@drawable/menuicon1g"/> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="25dp" 
    android:gravity="center" 
    android:textColor="#fff" 
    android:textSize="22sp"/> 
<android.support.v7.widget.CardView 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/card_view" 
    android:layout_gravity="center" 
    android:layout_width="200dp" 
    android:layout_height="300dp" 
    android:layout_marginTop="25dp" 
    card_view:cardCornerRadius="4dp" 
    card_view:cardBackgroundColor="#fff" 
    card_view:cardElevation="2dp"> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:gravity="center_horizontal"> 
     <ImageView 
      android:id="@+id/share_image" 
      android:transitionName="imageTransition" 
      android:layout_width="match_parent" 
      android:layout_height="92.5dp" 
      android:src="@drawable/friday"/> 
     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="20dp" 
      android:src="@drawable/demo_calendar"/> 
     <com.zagum.work.virtualfitness.CustomTextView 
      xmlns:com.zagum.work.virtualfitness="http://schemas.android.com/apk/res/com.zagum.work.virtualfitness" 
      android:id="@+id/date" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textSize="18sp" 
      android:layout_marginTop="10dp" 
      com.zagum.work.virtualfitness:typeface="fonts/Roboto-Light.ttf"/> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="15dp" 
      android:layout_marginBottom="40dp" 
      android:gravity="center" 
      android:paddingLeft="40dp" 
      android:paddingRight="40dp" 
      android:textSize="18sp" 
      android:textStyle="bold"/> 
    </LinearLayout> 
</android.support.v7.widget.CardView>

交易：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
       View image = mRootView.findViewById(R.id.share_image); 

       CurrentWorkoutFragment secondFragment = CurrentWorkoutFragment.newInstance(); 
       secondFragment.setSharedElementEnterTransition(TransitionInflater.from(getActivity()).inflateTransition(R.transition.transition_move)); 

       FragmentTransaction trans = getFragmentManager().beginTransaction(); 
       trans.replace(R.id.container, secondFragment); 
       trans.addToBackStack(null); 
       trans.addSharedElement(image, image.getTransitionName()); 
       trans.commit(); 
      }

transition_move.xml

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> 
    <changeImageTransform /> 
    <changeBounds/> 
</transitionSet>

但没有图像的动画时。它出现在左上角的调整大小。

来源

2014-12-02 zagum

该动画有趣的是添加一个<changeTransform/>。我会说，如果你使用一个片段列表，当你点击一个片段开始，动画占据全屏幕。所有额外的视图都已经在片段中，但它们隐藏在某种标志变化中 – VirtualProdigy 2015-08-20 20:56:02

结帐this回答。

因为我2个片段之间共享的观点是在第二个片段另一个视图（RelativeLayout的）的孩子，你需要将 ChangeTransform过渡添加到您的TransitionSet。

基本上你需要的是你的transition_move.xml

来源

2015-09-27 07:48:05 desmondtzq

Android共享元素片段转换

回答

相关问题