android - 共享元素转换仅适用于 2/3 案例
问题描述
我正在玩共享元素转换并开发了一个包含 4 个片段的测试应用程序。
在图片中你可以看到，第一个 Fragment 包含一个“现在开始”消息，当它被点击时，我想用中间的 Fragment 替换容器。作为一个眼睛糖果，我想要一个使用共享元素转换的动画。
问题
我的问题是，如果我将第一个 Fragment 留空（没有启动消息），例如我将 OnClickListener 设置为 Icon 本身，那么一切都可以通过漂亮的动画进行。但是，如果第一个 Fragment 中包含该消息，则只有第一个Icon（第二个 Fragment，中间的图片）不再具有动画。它只是替换第一个片段。古玩是，如果我改变我的 OnClickListener 并让它开始第二页（右图）动画再次正常工作。因此，尽管所有方法和 XML 大多是 1:1 相同，但只有第一个/左图标不提供动画。
由于我无法开发出更好的解决方案，因此每个“工具栏”都是在 Fragment 本身中设计的。
主要活动
public class FirstStartupActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_firststartup);
doFragmentTransaction(new MainFragment(), "TAG", false, null);
}
public void doFragmentTransaction(Fragment fragment, String tag, boolean addToBackStack, List<View> sharedElements){
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.ActivityFirstStartup_fragmentContainer, fragment, tag);
if(addToBackStack){
transaction.addToBackStack(tag);
}
if( sharedElements != null && !sharedElements.isEmpty()){
for(int i = 0; i < sharedElements.size(); i++){
View view = sharedElements.get(i);
transaction.addSharedElement(view, view.getTransitionName());
}
}
transaction.commit();
}}
第一个带有消息的片段
public class MainFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_firststartup_home, container, false);
View view = v.findViewById(R.id.relLayoutPageOne);
final List<View> listview = new ArrayList<>();
listview.add(view);
View view2 = v.findViewById(R.id.relLayoutPageTwo);
final List<View> listview2 = new ArrayList<>();
listview2.add(view2);
Button button = v.findViewById(R.id.buttonStart);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
((FirstStartupActivity)getActivity()).doFragmentTransaction(new UsernameFragment(), "test", true, listview);
//((FirstStartupActivity)getActivity()).doFragmentTransaction(new CameraFragment(), "TEST2", true, listview2);
}
});
RelativeLayout rel2 = v.findViewById(R.id.relLayoutPageTwo);
rel2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
((FirstStartupActivity)getActivity()).doFragmentTransaction(new CameraFragment(), "TEST2", true, listview2);
}
});
return v;
}}
第二个片段没有动画
public class UsernameFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_firststartup_pgone, container, false);
postponeEnterTransition();
return v;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
}
}}
第三片段工作
public class CameraFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_firststartup_pgtwo, container, false);
return v;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
}
}}
第二个片段（中图）更换时无动画）
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="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.support.constraint.ConstraintLayout
android:id="@+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@drawable/draw_login_edittext">
</android.support.constraint.ConstraintLayout>
<RelativeLayout
android:id="@+id/relLayoutPageTwo"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="4dp"
android:background="@drawable/draw_login_edittext_rounded"
android:transitionName="ProfileCam"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:transitionName="ProfileCam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="@mipmap/testtwo" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/relLayoutPageThree"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="@drawable/draw_login_edittext_rounded"
android:transitionName="ProfileGender"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="@mipmap/testthree" />
</RelativeLayout>
<RelativeLayout
android:transitionName="ProfilePic"
android:layout_width="273dp"
android:layout_height="210dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="@drawable/draw_login_edittext_rounded"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/constraintLayout2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="@mipmap/test" />
</RelativeLayout>
第一个片段（左图）
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="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.support.constraint.ConstraintLayout
android:id="@+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#a8655c">
</android.support.constraint.ConstraintLayout>
<RelativeLayout
android:transitionName="ProfilePic"
android:id="@+id/relLayoutPageOne"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="@drawable/draw_login_edittext_rounded"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.049"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="@mipmap/test" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/relLayoutPageTwo"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="@drawable/draw_login_edittext_rounded"
android:transitionName="ProfileCam"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="@mipmap/testtwo" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/relLayoutPageThree"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="@drawable/draw_login_edittext_rounded"
android:transitionName="ProfileGender"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="@mipmap/testthree" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:forceHasOverlappingRendering="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="@drawable/draw_login_edittext_rounded"
android:padding="25dp"
android:transitionName="ProfilePic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/constraintLayout2">
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Bevor du loslegen könnst benötigen wir noch kurz ein paar Informationen über dich! :)"
android:textAlignment="center"
android:textColor="#BFFFFFFF" />
<Button
android:id="@+id/buttonStart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/text"
android:layout_centerHorizontal="true"
android:layout_marginHorizontal="15dp"
android:layout_marginTop="15dp"
android:background="@drawable/draw_rounded_edittext_dark"
android:text="Start now"
android:textColor="#BFFFFFFF" />
</RelativeLayout>
第三个片段（右图）替换时的动画
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="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.support.constraint.ConstraintLayout
android:id="@+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@drawable/draw_login_edittext">
</android.support.constraint.ConstraintLayout>
<RelativeLayout
android:id="@+id/relLayoutPageOne"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="@drawable/draw_login_edittext_rounded"
android:transitionName="ProfilePic"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.049"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="@mipmap/test" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/relLayoutPageThree"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="@drawable/draw_login_edittext_rounded"
android:transitionName="ProfileGender"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="@mipmap/testthree" />
</RelativeLayout>
<RelativeLayout
android:layout_width="273dp"
android:layout_height="210dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#c8c8c8"
android:transitionName="ProfileCam"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/constraintLayout2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="@mipmap/testtwo" />
</RelativeLayout>
视觉描述
第一个图标不起作用，但第二个像魅力一样工作出于某种原因，第一个 GIF 太快了，它正常弹出唯一的问题是缺少动画
解决方案
好吧，我试图改变一些事情，但我让一切变得更糟。然后我“修复”了它，现在它可以工作了，不幸的是我无法向你展示解决方案。我尝试再次处理代码
编辑： @LieForBanana 有解决方案，但我理解错了，确实我的第一个片段也有它的转换名称（3x TransitionName ProfilePic）。我很惭愧，这只是一个愚蠢的错误
推荐阅读
- pytorch - Pytorch 和批处理
- javascript - 旧数据未被 vue 组件中的新用户输入覆盖
- ios - Flutter 如何查看文档和数据以及删除导入的包是否会减小大小？
- python - groupby 保留所有以前的字段
- html - 具有设置像素值的最大高度 - 它是 Hacky 还是必要的？
- sql - 在 SQL 链接中创建 URL
- perl - 从 LWP::UserAgent 到 Mojo::UserAgent 的匹配方法
- excel - 使用 shell 在 VBA 中运行 .exe
- jquery - 带有输入警报的基础范围滑块？
- python - 如何在 Python 中按另一个列表的索引号对列表进行排序？