如何将 Activity 过渡动画中的元素恢复到不同的位置?
How to restore element in Activity Transition Animation to different position?
我在具有多个 ImageView 的垂直 ScrollView 中使用了 LinearLayout,当我单击一个图像视图时,我会执行从 (Activity 1) 到全屏画廊 (Activity 2) 的过渡动画,画廊有视图寻呼机,用户可以在其中向右/向左滑动..现在当用户滑动到画廊中的不同图像并按下时,(Activity 2)中的当前可见图像被恢复(再次使用过渡动画) 到 Activity 1 中的起始位置,问题是图像恢复到原来的位置然后消失并显示出不同的图像(因为这已经太复杂了,无法讨论)我附上一张图片。
Activity1 布局:
<LinearLayout>
<ImageView />
<ImageView />
<ImageView />
<ImageView />
<ImageView />
<ImageView />
</LinearLayout>
Acivity2(图库)布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v7.widget.AppCompatImageView
android:id="@+id/animation_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transparent"
android:scaleType="fitCenter"
android:src="@drawable/placeholder"
android:transitionName="@string/transition_article_image_gallery"
android:layout_centerInParent="true"
/>
<ViewPager
android:id="@+id/gallery_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
点击来自 Activity 1:
的任何图片
public void openGallery(int position, ArrayList<String> images, View view)
{
Intent intent = new Intent(getActivity(), GalleryActivity.class);
intent.putStringArrayListExtra(GalleryActivity.EXTRA_GALLERY_IMAGES, images);
intent.putExtra(GalleryActivity.EXTRA_POSITION, position);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
getActivity(),
new Pair<>(view, TARGET_ELEMENT_TRANSITION_NAME_ATTRIB_VALUE)
);
ActivityCompat.startActivity(getActivity(), intent, options.toBundle());
} else {
getActivity().startActivity(intent);
}
}
更新
George Mount 的代码有效,但有一个技巧,主要是这个回调在转换开始时和返回途中被调用 2 次,因此重置位置并在返回途中检查它很重要,如下所示:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getDetailsActivity().setExitSharedElementCallback(new SharedElementCallback()
{
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public void onMapSharedElements(List<String> names, Map<String, View> sharedElements)
{
if (position != -1) { sharedElements.put(getString(R.string.transition_article_image_gallery), articleImagesHolder.getChildAt(position));
}
}
});
}
和
public void openGallery(int pos, ArrayList<String> images, View view)
{
// reset the return position
position = -1;
}
以及我的片段中的以下内容:
public void onActivityReenter(int resultCode, Intent data)
{
if (resultCode == Activity.RESULT_OK) {
int pos = data.getIntExtra(EXTRA_IMAGE_POSITION, -1);
if (pos != -1) {
position = pos;
}
}
}
以及我的 (Activity1) 中的以下内容:
@Override
public void onActivityReenter(int resultCode, Intent data)
{
ArticleDetailsFragment fragment = (ArticleDetailsFragment) getSupportFragmentManager().findFragmentByTag(ArticleDetailsFragment.class.getSimpleName());
if (fragment != null) {
fragment.onActivityReenter(resultCode, data);
}
}
更新 2
George 似乎已经写了一些关于 Transitions 的文章,但它们并不受欢迎,也没有出现在 Google 搜索结果中,所以我认为在这里分享它们会很有用:
https://halfthought.wordpress.com/2014/12/
首先,您在调用中使用了错误的转换名称。 ActivityOptions.makeSceneTransitionAnimation
中的名称是 Activity 2 中视图的名称。您可以在 Activity 1 中使用任何您想要的名称,框架将映射这些名称。这样你就可以做一个多对一的映射。例如,如果您有图像的列表视图并单击其中一个,它应该能够在 Activity 2 中转换为单个图像。在您的情况下:
<LinearLayout>
<ImageView android:transitionName="image1" />
<ImageView android:transitionName="image2" />
<ImageView android:transitionName="image3" />
<ImageView android:transitionName="image4" />
<ImageView android:transitionName="image5" />
<ImageView android:transitionName="image6" />
</LinearLayout>
当您拨打电话时:
ActivityOptionsCompat options =
ActivityOptionsCompat.makeSceneTransitionAnimation(
getActivity(), view, Activity2.IMAGE_VIEW_NAME);
并且在您的 Activity 2 中,您应该有一个 ImageView 的 transitionName 为 Activity2.IMAGE_VIEW_NAME。
但这不是你问的。
因为您在返回的路上共享不同的元素,所以您将不得不覆盖共享元素映射。您可以根据自己的情况通过多种方式执行此操作。最好的方法要求您更改 Activity 1.
中共享元素的映射
在Activity1中,设置一个SharedElementCallback:
setExitSharedElementCallback(new SharedElementCallback() {
@Override
public void onMapSharedElements(List<String> names,
Map<String, View> sharedElements) {
sharedElements.put(Activity2.IMAGE_VIEW_NAME, newSharedElement);
}
}
那么,您怎么知道它应该 return 到哪个视图?您应该使用 startActivityForResult 以便被调用的 Activity 可以 return 为您提供正确的视图。在这里,我假设您在使用 Intent 调用 setResult 时使用相同的 EXTRA_POSITION 字段。然后您可以重写 onActivityReenter
来执行您需要的操作:
@Override
public void onActivityReenter(int resultCode, Intent data) {
int position = data.getIntExtra(GalleryActivity.EXTRA_POSITION, -1);
if (position != -1) {
// I'm assuming child index is the same as position here.
newSharedElement = mLinearLayout.getChildAt(position);
}
}
此时您可以做的另一件事是将视图滚动到可见的位置。如果您使用的是 ListView 或 RecyclerView 等回收容器,则需要使用 postponeEnterTransition
和 startPostponedEnterTransition
来确保在开始转换之前布局视图。
我在具有多个 ImageView 的垂直 ScrollView 中使用了 LinearLayout,当我单击一个图像视图时,我会执行从 (Activity 1) 到全屏画廊 (Activity 2) 的过渡动画,画廊有视图寻呼机,用户可以在其中向右/向左滑动..现在当用户滑动到画廊中的不同图像并按下时,(Activity 2)中的当前可见图像被恢复(再次使用过渡动画) 到 Activity 1 中的起始位置,问题是图像恢复到原来的位置然后消失并显示出不同的图像(因为这已经太复杂了,无法讨论)我附上一张图片。
Activity1 布局:
<LinearLayout>
<ImageView />
<ImageView />
<ImageView />
<ImageView />
<ImageView />
<ImageView />
</LinearLayout>
Acivity2(图库)布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v7.widget.AppCompatImageView
android:id="@+id/animation_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transparent"
android:scaleType="fitCenter"
android:src="@drawable/placeholder"
android:transitionName="@string/transition_article_image_gallery"
android:layout_centerInParent="true"
/>
<ViewPager
android:id="@+id/gallery_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
点击来自 Activity 1:
的任何图片public void openGallery(int position, ArrayList<String> images, View view)
{
Intent intent = new Intent(getActivity(), GalleryActivity.class);
intent.putStringArrayListExtra(GalleryActivity.EXTRA_GALLERY_IMAGES, images);
intent.putExtra(GalleryActivity.EXTRA_POSITION, position);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
getActivity(),
new Pair<>(view, TARGET_ELEMENT_TRANSITION_NAME_ATTRIB_VALUE)
);
ActivityCompat.startActivity(getActivity(), intent, options.toBundle());
} else {
getActivity().startActivity(intent);
}
}
更新 George Mount 的代码有效,但有一个技巧,主要是这个回调在转换开始时和返回途中被调用 2 次,因此重置位置并在返回途中检查它很重要,如下所示:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getDetailsActivity().setExitSharedElementCallback(new SharedElementCallback()
{
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public void onMapSharedElements(List<String> names, Map<String, View> sharedElements)
{
if (position != -1) { sharedElements.put(getString(R.string.transition_article_image_gallery), articleImagesHolder.getChildAt(position));
}
}
});
}
和
public void openGallery(int pos, ArrayList<String> images, View view)
{
// reset the return position
position = -1;
}
以及我的片段中的以下内容:
public void onActivityReenter(int resultCode, Intent data)
{
if (resultCode == Activity.RESULT_OK) {
int pos = data.getIntExtra(EXTRA_IMAGE_POSITION, -1);
if (pos != -1) {
position = pos;
}
}
}
以及我的 (Activity1) 中的以下内容:
@Override
public void onActivityReenter(int resultCode, Intent data)
{
ArticleDetailsFragment fragment = (ArticleDetailsFragment) getSupportFragmentManager().findFragmentByTag(ArticleDetailsFragment.class.getSimpleName());
if (fragment != null) {
fragment.onActivityReenter(resultCode, data);
}
}
更新 2 George 似乎已经写了一些关于 Transitions 的文章,但它们并不受欢迎,也没有出现在 Google 搜索结果中,所以我认为在这里分享它们会很有用:
https://halfthought.wordpress.com/2014/12/
首先,您在调用中使用了错误的转换名称。 ActivityOptions.makeSceneTransitionAnimation
中的名称是 Activity 2 中视图的名称。您可以在 Activity 1 中使用任何您想要的名称,框架将映射这些名称。这样你就可以做一个多对一的映射。例如,如果您有图像的列表视图并单击其中一个,它应该能够在 Activity 2 中转换为单个图像。在您的情况下:
<LinearLayout>
<ImageView android:transitionName="image1" />
<ImageView android:transitionName="image2" />
<ImageView android:transitionName="image3" />
<ImageView android:transitionName="image4" />
<ImageView android:transitionName="image5" />
<ImageView android:transitionName="image6" />
</LinearLayout>
当您拨打电话时:
ActivityOptionsCompat options =
ActivityOptionsCompat.makeSceneTransitionAnimation(
getActivity(), view, Activity2.IMAGE_VIEW_NAME);
并且在您的 Activity 2 中,您应该有一个 ImageView 的 transitionName 为 Activity2.IMAGE_VIEW_NAME。
但这不是你问的。
因为您在返回的路上共享不同的元素,所以您将不得不覆盖共享元素映射。您可以根据自己的情况通过多种方式执行此操作。最好的方法要求您更改 Activity 1.
中共享元素的映射在Activity1中,设置一个SharedElementCallback:
setExitSharedElementCallback(new SharedElementCallback() {
@Override
public void onMapSharedElements(List<String> names,
Map<String, View> sharedElements) {
sharedElements.put(Activity2.IMAGE_VIEW_NAME, newSharedElement);
}
}
那么,您怎么知道它应该 return 到哪个视图?您应该使用 startActivityForResult 以便被调用的 Activity 可以 return 为您提供正确的视图。在这里,我假设您在使用 Intent 调用 setResult 时使用相同的 EXTRA_POSITION 字段。然后您可以重写 onActivityReenter
来执行您需要的操作:
@Override
public void onActivityReenter(int resultCode, Intent data) {
int position = data.getIntExtra(GalleryActivity.EXTRA_POSITION, -1);
if (position != -1) {
// I'm assuming child index is the same as position here.
newSharedElement = mLinearLayout.getChildAt(position);
}
}
此时您可以做的另一件事是将视图滚动到可见的位置。如果您使用的是 ListView 或 RecyclerView 等回收容器,则需要使用 postponeEnterTransition
和 startPostponedEnterTransition
来确保在开始转换之前布局视图。