我只用这个问题做了一个github项目。你可以从这里看到它/克隆它/构建它:https://git.io/vMPqb
我试图让共享元素为Fragment转换工作。
项目中有两个FAB - 羽毛和平面。羽毛和飞机是共享元素。单击“羽化”时,将打开“SheetDialog”,“羽化”应为“平面”对话框设置动画。目前它没有这样做,我试图确定原因。
值得注意的是,我在API 24上运行此操作,因此在版本21以下不支持转换的问题不是问题。
任何人都可以告诉我为什么共享元素转换不起作用?
为了回应repo中的内容,有四个重要文件:
主要活动
package test.example.fabpop;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.transition.ChangeBounds;
import android.support.transition.Fade;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
public class MainActivity extends AppCompatActivity {
FloatingActionButton fab_feather;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fab_feather = (FloatingActionButton) findViewById(R.id.initial_fab_feather);
}
public void fabClick(View view) {
SheetDialog dialogFragment = new SheetDialog();
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
// This seemingly has no effect. I am trying to get it to work.
transaction.addSharedElement(fab_feather, "transition_name_plane");
dialogFragment.setSharedElementEnterTransition(new ChangeBounds());
dialogFragment.setSharedElementReturnTransition(new Fade(Fade.OUT));
dialogFragment.show(transaction, "frag_tag");
}
}
activity_main.xml布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="test.example.fabpop.MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:orientation="vertical">
<TextView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="Transition to a BottomSheetDialogFragment that shares this FAB"
android:textAlignment="center"/>
<!-- Feather FAB -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/initial_fab_feather"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_margin="16dp"
android:layout_gravity="center"
android:onClick="fabClick"
android:transitionName="transition_name_feather"
android:src="@drawable/ic_feather"
/>
</LinearLayout>
</RelativeLayout>
SheetDialog
package test.example.fabpop;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SheetDialog extends BottomSheetDialogFragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.dialog_sheet, container, false);
}
}
dialog_sheet.xml布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Plane FAB -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/final_fab_plane"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_margin="16dp"
android:transitionName="transition_name_plane"
android:src="@drawable/ic_plane"
/>
</LinearLayout>
在一个Activity和一个Fragment之间的转换上是否不可能有共享元素?也许只有在Activity to Activity或Fragment to Fragment之间才有可能,但两种类型之间不是这样?也许这就是为什么我不能让它工作?
更新:
我现在尝试将<item name="android:windowContentTransitions">true</item>
添加到应用程序的主题中。
我现在也尝试过,同时确保两个视图上的两个transitionName值都相同。
这些都没有帮助解决这个问题。
让我们首先重点介绍一下有关android框架如何进行神奇共享元素转换的一些观点。
共享元素转换只是android框架的谎言之一。当您进行共享元素转换时,实际上并没有在您的活动之间共享任何视图,例如,每个活动都有一个独立的视图树。
假设您正在尝试将element
识别的element1
从Activity1
转换为element2
中的Activity2
。
该框架的作用是寻找某些信息,例如width
中你的height
的大小(x
,y
)和位置(element1
,Activity1
)。然后它将这些信息传递给Activity2
,将其应用于element2
并通过反向动画你的element2
开始活动过渡,这会产生这种共享元素的错觉。
但是,这需要创建Activity2
,在启动任何动画之前找到对应于view
的element2
。
在使用Fragment
的情况下,调用FragmentTransaction.commit()
将只安排你的片段事务(片段不会立即创建)所以当你的Activity2
被创建时你的element2
丢失了(正如所解释的那样,因为它的包含片段尚未创建) )。
确保在动画开始之前创建了element2
。因此,您必须找到一种方法来告诉框架不要执行常规操作,而是在创建动画之前等待您的信号。
一种方法是将代码更改为与此类似的代码:
class Activity2 extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
// ...
// Tell the framework to wait.
postponeEnterTransition();
}
}
class Fragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View element2 = getView().findViewById(R.id.element);
sharedview.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
// Tell the framework to start.
sharedview.getViewTreeObserver().removeOnPreDrawListener(this);
getActivity().startPostponedEnterTransition();
return true;
}
});
...
}
}
您正在寻找的是这个例子:https://github.com/hujiaweibujidao/FabDialogMorph。请注意,您尝试实现的不是标准的Android转换,您需要根据ChangeBounds
转换创建自己的变形转换。最初,它已经在Plaid中展示,感谢Nick Butcher,所以你可以查看它以获得更多提示和背景。
只是引用Android Docs:
使用共享元素启动活动
- 使用android:transitionName属性为两个布局中的共享元素指定一个公用名。
从我看到,你的两个XML不共享相同的android:transitionName。
尝试将XML布局中的android:transitionName(activity_main.xml和dialog_sheet.xml)更改为相同的字符串,例如:transition_plane_feather
我自己没有测试过代码,但我认为这可能是一个很好的起点。
如果您计划完全实现Material Design而不兼容较低的API级别(pre-Lollipop),我强烈建议您查看由Google UI / UX Designer制作的示例:https://github.com/nickbutcher/plaid
另外,请查看该示例的优秀补充YouTube视频:https://www.youtube.com/watch?v=EjTJIDKT72M
它向您展示了一些可用于完全实现Material Design以及共享元素转换的最佳技巧和实践。