标签: shared-element-transition

我正在对Android L中的共享元素转换进行一些基本的探索.我设置的简单示例在活动转换期间有一个从屏幕顶部转换到屏幕底部的图像视图,并且我已经延长了转换持续时间所以我可以看到工作正常.到目前为止,我遇到了两个问题,试图了解共享元素转换的工作原理.

1)仅使用Enter/Return转换(Exit/Reenter设置为null).输入转换很好,但是当按下后退按钮时,视图会动画一段时间,停止,然后重新出现在最终位置.似乎与此问题类似,但我已将所有Exist/Reenter过渡设置为null,因此不确定为什么会发生这种情况.

2)仅使用退出/重新转换时(Enter/Return设置为null).没有任何事情发生,视图在屏幕上向下转换,如下面的默认输入转换(300毫秒持续时间),当按下后退时,视图弹回到其原始位置.

如何使用退出/重新转换？

这是我的代码:

activity_main.xml中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@drawable/ic_launcher"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Animate!"
        android:id="@+id/button"
        android:layout_centerVertical="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

activity_second.xml

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView2"
    android:src="@drawable/ic_launcher"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true" />

MainActivity.java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);
        getWindow().setAllowEnterTransitionOverlap(false);
        getWindow().setAllowReturnTransitionOverlap(false);


        getWindow().setSharedElementExitTransition(exitTransition());
        getWindow().setSharedElementReenterTransition(reenterTransition());
        //getWindow().setSharedElementExitTransition(null);
        //getWindow().setSharedElementReenterTransition(null);


        setContentView(R.layout.activity_main);

        final View iView = findViewById(R.id.imageView);
        iView.setTransitionName("image");

        final Button button = (Button)findViewById(R.id.button);
        button.setOnClickListener(new …

我希望你能帮我解决这个问题.我有两个片段,第一个是带有几个图像的recyclerview,第二个片段是这个图像的详细视图.如果用户单击图像,则应用程序执行片段事务并显示详细信息.

我已成功实现片段之间的共享元素转换,如果我单击第一个片段上的小图像,它会变大,并移动到细节视图上的最终位置.

那么,这就是问题,图像的初始位置不是预期的,它开始从原始位置移动几个像素,当我点击图像向右和向下跳跃一点点.

为什么会这样？它很烦人!

转换xml:

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

如果我对Recyclerview以外的按钮执行相同操作,则可以完美运行.这是Recyclerview中的某种错误吗？

我在足球应用程序中有以下情况.
我们希望在所有这些活动之间实现共享元素.

在我的第一个Activity匹配器的视图中,我设置了一个android:transitionName对应于第二个上的相同transitionName Activity.

<!-- item_viewholder (first activity) -->
<CustomViewContainingImageViewAndTextView
     android:id="@+id/item_match_hometeam"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:transitionName="@string/transition_morph_match_header_homeTeam" />

<!-- header (second activity) -->
<CustomViewContainingImageViewAndTextView
     android:id="@+id/item_match_hometeam_header"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:transitionName="@string/transition_morph_match_header_homeTeam" />

我开始第二Activity与

final String awayTeamTransition = activityContext.getString(R.string.transition_morph_match_header_awayTeam);
final String homeTeamTransition = activityContext.getString(R.string.transition_morph_match_header_homeTeam);
final ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(
                   activityContext,
                   Pair.create(homeTeam, homeTeamTransition),
                   Pair.create(awayTeam, awayTeamTransition));
activityContext.startActivity(intent, options.toBundle());

现在这种过渡工作正常,但如果我想要更深入的细节怎么办呢.
显示有关所选团队的统计信息,我也希望在那里进行共享转换？

当我点击新的transitionName时,我尝试以编程方式设置.CustomViewContainingImageViewAndTextViewtransitionName

final String teamViewTransition = activityContext.getString(R.string.transition_morph_teamview_to_detail);
//teamView is the view that was clicked.
ViewCompat.setTransitionName(teamView, teamViewTransition);

final ActivityOptions options …

请查看此视频,其中显示了共享元素活动转换.这是从列表活动到详细活动的过渡.

[视频链接不再有效]

如您所见,imageview被绘制在选项卡前面.

我期望的是在imageview上以字体绘制标签并在整个过渡过程中淡出(这样在动画结束时它们就消失了).

似乎唯一有用的是设置windowSharedElementsUseOverlay为true,但这有其他丑陋的效果,所以这似乎不是一个选项.

最常建议的方法是在转换本身中包含选项卡,但问题是详细信息活动中没有选项卡,因此无法共享它们.

代码:我开始这样的详细活动:

options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, pairs);
ActivityCompat.startActivity(activity, subActivity, options.toBundle());

我的应用程序主屏幕包含图像的网格视图.当用户选择图像时,使用共享元素转换开始细节活动,该共享元素转换将所选择的网格图像动画化为位于细节活动中的CardView中的配对图像.

升级我的详细视图XML布局以包含CoordinatorLayout以及CollapsingToolbarLayout后,共享元素转换将图像视图移动到详细活动中的错误位置("enter"活动).如果在包含目标图像视图的CardView上方没有CollapsingToolBarLayout,框架似乎会将整个AppBarLayout和内部CollapsingToobarLayout的偏移量和动画放大到图像的大致位置.

通过将activityView(带有transitionName)添加到activity_detail.xml中的3个CardView中的任何一个,可以在Chris Banes的cheesesquare示例应用程序中复制该问题:

<ImageView
 android:id="@+id/imageView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@mipmap/ic_launcher"
 android:transitionName="sharedImage" />

然后在CheeseListFragment.java中的onBindViewHolder中设置共享元素转换,如下所示:

@Override
public void onBindViewHolder(final ViewHolder holder, int position) {
        holder.mBoundString = mValues.get(position);
        holder.mTextView.setText(mValues.get(position));

        holder.mView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Context context = v.getContext();
                Intent intent = new Intent(context, CheeseDetailActivity.class);
                intent.putExtra(CheeseDetailActivity.EXTRA_NAME, holder.mBoundString);

                holder.mImageView.setTransitionName("sharedImage");                        
                ActivityOptionsCompat options = ActivityOptionsCompat.
                        makeSceneTransitionAnimation(
                                getActivity(v.getContext()),
                                            holder.mImageView,                     
                                            "sharedImage");
                ActivityCompat.StartActivity((MyActivity) context, intent, options.toBundle());
            }
        });

        Glide.with(holder.mImageView.getContext())
                .load(Cheeses.getRandomCheeseDrawable())
                .fitCenter()
                .into(holder.mImageView);
    }

如果运行应用程序,并单击奶酪列表项,您将了解过渡动画如何将图像移动到目标活动视图中的错误(太高)偏移.动画完成后,图像将"扭曲"到正确的位置.

任何关于可能的解决方法的想法都会非常受欢迎.

我正在开发一个概念验证,我在TableLayout中有一些自定义视图.单击其中一个视图时,我想要为扩展为新活动的视图设置动画.我想要达到的效果类似于这里看到的效果.

从我的研究来看,似乎这样做的方法是使用共享元素Transitions.但是,我无法让它正常工作,我想知道是否因为我使用自己的自定义视图.

具体来说,衰落正在发生,但缩放和翻译动作不是.检查下面的GIF,看看我在哪里.在示例中,我单击左上角的圆圈,我想将其转换为新活动中的整个圆圈.按下后退按钮时也会出现此问题.

我认为这是不正确的,因为必须绘制视图,但有没有办法进一步自定义我的视图以使其工作？我发现的这种转换的所有示例都包含ImageViews,Buttons和TextViews.

以下是相关来源.我的自定义视图很大,不包含任何特殊代码,只是覆盖onDraw()和onMeasure().

MainActivity.java

package com.rscottcarson.circleschedulertest;

import android.app.Activity;
import android.app.ActivityOptions;
import android.content.Intent;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Toast;
public class MainActivity extends Activity {

    private View view1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        view1 = findViewById(R.id.circle1);

        view1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Intent intent = new Intent(MainActivity.this, DetailActivity.class);
                // create the transition animation - the images in the layouts
                // of both activities …

我创建了一个自定义循环显示转换,用作Activity的enter转换的一部分(具体来说,我通过调用将转换设置为窗口的enter转换Window#setEnterTransition()):

public class CircularRevealTransition extends Visibility {
    private final Rect mStartBounds = new Rect();

    /**
     * Use the view's location as the circular reveal's starting position.
     */
    public CircularRevealTransition(View v) {
        int[] loc = new int[2];
        v.getLocationInWindow(loc);
        mStartBounds.set(loc[0], loc[1], loc[0] + v.getWidth(), loc[1] + v.getHeight());
    }

    @Override
    public Animator onAppear(ViewGroup sceneRoot, final View v, TransitionValues startValues, TransitionValues endValues) {
        if (endValues == null) {
            return null;
        }
        int halfWidth = v.getWidth() / 2;
        int halfHeight = v.getHeight() / …

我很好奇Android如何在Google Keep中看到的共享元素转换中处理英雄视图的子项:

在标准共享元素转换中,在输入动画中,调用活动中的英雄视图会立即覆盖目标视图(在起始维度),然后转换动画在目标视图的维度中进行更改以到达其新位置.

但是,在返回动画上,返回活动的视图保留在叠加层的顶部,它们是在动画结束之前显示的视图,此时目标(调用活动的)英雄视图会捕捉到位.

如果两个英雄视图的内容存在任何差异,则会产生非常刺耳的效果 - 例如,线条换行的文本视图或完全不同的子视图.

与此同时,在Google Keep中,共享元素转换似乎在每个方向来回淡化内容视图,因此这种不和谐的效果相当不太明显.因此,填充或换行等方面的差异要小得多.

在我自己的应用程序中实现此功能的最佳方式是什么？

这是一个例子:

我正在尝试实现这一点

就像我之前的其他人一样。

到目前为止我发现了什么：

1. 如何实现 Material Design 规定的“父子到子”导航转换
2. Material Design 父子导航过渡 recyclerview 入口到细节片段
3. 如何创建列表项抬起并成为详细信息屏幕的父子转换
4. 自定义片段过渡父到子导航 setExitTransition 未显示
5. https://medium.com/@bherbst/fragment-transitions-with-shared-elements-7c7d71d31cbb
6. https://medium.com/@jim.zack.hu/android-inbox-material-transitions-for-recyclerview-71fc7326bcb5
7. https://github.com/saket/InboxRecyclerView
8. https://www.youtube.com/watch?v=EjTJIDKT72M

我到目前为止：

父片段

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    initViewModel();
    setupRecyclerView();
    initViewModelSubscriptions();
}

@Override
public void onClick(View v, CustomNavigator.Extras extras) {
    Bundle bundle = new Bundle();
    bundle.putString("transitionName", v.getTransitionName());

    NavController navController = NavHostFragment.findNavController(this);
    navController.navigate(R.id.action_devicemgmt_to_deviceMgmtEditFragment,
            bundle, // Bundle of args
            null, // NavOptions
            extras);
}

细节片段

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Transition t = TransitionInflater.from(getContext()).inflateTransition(R.transition.test).setDuration(1000);
    setSharedElementEnterTransition(t);
}

@Override …

我正在尝试在 2 个片段 BlankFragment 和 BlankFragment2 之间使用共享元素动画。BlankFragment 有一个回收器视图，而 BlankFragment2 是一个详细信息屏幕。他们共享一张图片，而我正在使用新的导航组件。

在 BlankFragment 中，我正在使用共享图像的转换名称构建FragmentNavigator.Extras附加内容并将其传递给我的调用navigate（因为它是一个回收器视图，并且这些需要是唯一的），

在 BlankFragment2 中，我收到此名称，将其设置为我的图像并设置 setSharedElementEnterTransition

结果是进入动画工作正常但退出/返回没有，我试过设置它们而不是设置它们（因为我相信导航组件应该为我处理这个）有人可以帮忙吗？

MainActivity 导航设置

private void setNavigation() {
    navController = Navigation.findNavController(this, R.id.main_fragment);
    NavigationUI.setupActionBarWithNavController(this, navController);
}

处理后退按钮

@Override
public boolean onSupportNavigateUp() {
    return Navigation.findNavController(this, R.id.main_fragment).navigateUp()
        || super.onSupportNavigateUp();
}

空白片段点击

@Override
public void onClick(View view, int position) {

    NavController navController = Navigation.findNavController(recyclerView);

    FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder().addSharedElement(view, view.getTransitionName()).build();

    BlankFragmentDirections.ActionBlankFragmentToBlankFragment2 directions = BlankFragmentDirections.actionBlankFragmentToBlankFragment2(view.getTransitionName());

    navController.navigate(directions,extras);

}

BlankFragment2 onCreate 带有返回/退出转换

@Override
public void onCreate(Bundle savedInstanceState) …