Android共享元素转场动画Part2——Fragment to Fragment

继续Part1部分–Activity to Activity,这个部分我们简单介绍下Fragment to Fragment的共享动画实现;

Fragment to Fragment

首先我们需要创建一个Activity容器来加载Fragment:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Fragment fragment = getSupportFragmentManager().findFragmentByTag(FragmentA.class.getName());
if (fragment == null) {
fragment = FragmentA.newInstance();
getSupportFragmentManager().beginTransaction().add(R.id.activity_main,
fragment,
FragmentA.class.getName())
.commit();
}
}
}

按照代码所示,我们现在Activity中加载FragmentA 然后由FragmentA跳转到FragmentB,并且实现共享动画。

下面实现FragmentA:

FragmentA中的xml代码实现,一个ImageView 和一个Button ,其中ImageView为FragmentA的共享元素,并且为他设置属性android:transitionName="simple transition name"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?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”
tools:context= “io.github.hexiangyuan.sharedelementtransitionsdemo.MainActivity”>
<ImageView
android:id= “@+id/imageView”
android:layout_width= “64dp”
android:layout_height= “64dp”
android:scaleType= “centerCrop”
android:transitionName= “simple transition name”
android:src= “@drawable/image” />
<Button
android:id= “@+id/btn_click”
android:layout_width= “wrap_content”
android:layout_height= “wrap_content”
android:text= “Click Me”
android:textSize= “16sp”
android:layout_below= “@+id/imageView” />
</RelativeLayout>

FragmentA的java代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public class FragmentA extends Fragment {
public static final String TAG = FragmentA.class.getSimpleName();
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_a, container, false);
}
public static FragmentA newInstance() {
return new FragmentA();
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
final ImageView imageView = (ImageView) getView().findViewById(R.id.imageView);
getActivity().findViewById(R.id.btn_click).setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View view) {
Fragment fragmentB = getFragmentManager().findFragmentByTag(TAG);
if (fragmentB == null) fragmentB = FragmentB.newInstance();
getFragmentManager()
.beginTransaction()
.addSharedElement(imageView,
ViewCompat.getTransitionName(imageView))
.addToBackStack(TAG)
.replace(R.id.activity_main, fragmentB)
.commit();
}
});
}
}

值得注意的是在addShareElement()这个方法以及addToBackStack()这个方法;

  • addShareElement:设置了作为共享元素的控件以及transitionName;
  • addToBackStack:为了让fragment回栈,如果不设置这个回栈,当跳转到fragmentB的时候,BackClick就会直接退出Activity;

那么在FragmentB就比较容易实现了:

FragmentB:

1
2
3
4
5
6
7
<ImageView
android:id= “@+id/imageView”
android:layout_width= “match_parent”
android:layout_height= “184dp”
android:scaleType= “centerCrop”
android:transitionName= “simple transition name”
android:src= “@drawable/image” />
1
2
3
4
5
6
7
8
9
@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));
}
}

只需要在FragmentB的

  • xml 的共享控件里面设置android:transitionName="simple transition name"
  • onCreate里面设置动画为android.R.transition.move

加载网络图片的元素共享(以Picasso为例)

一般在App中,我们的ImageView都是在网络URL获取的资源,那么网络加载的ImageView也是可以实现共享元素转换的,下面我们就以Picasso为例:

添加依赖

1
compile ‘com.squareup.picasso:picasso:2.5.2’

FragmentA中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Picasso.with(getActivity())
.load( “https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg”)
.fit()
.centerCrop()
.into(imageView);
getActivity().findViewById(R.id.btn_click).setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View view) {
Fragment fragmentB = getFragmentManager().findFragmentByTag(TAG);
if (fragmentB == null) fragmentB = FragmentB.newInstance();
getFragmentManager()
.beginTransaction()
.addSharedElement(imageView,
ViewCompat.getTransitionName(imageView))
.addToBackStack(TAG)
.replace(R.id.activity_main, fragmentB)
.commit();
}
});

FragmentB中添加加载图片的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
ImageView imageView = (ImageView) getView().findViewById(R.id.imageView);
Picasso.with(getContext())
.load( “https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg”)
.fit()
.centerCrop()
.noFade()
.into(imageView, new Callback() {
@Override
public void onSuccess() {
startPostponedEnterTransition();
}
@Override
public void onError() {
}
});
}
  • 添加noFade禁用渐隐的效果促使动画更加的流畅。
  • 在CallBack的onSuccess()中设置startPostponedEnterTransition()

github banch

Blog

非常感谢,你能耐心读完;

共享元素转场动画Part1————Activity to Activity

Share Element Transition(共享元素变换)这一概念是在android 5.0 Material Design中提出的新的页面转场的方式。
那么本文将教你一步一步的做出炫酷的MD Style的转场动画。

什么是共享元素变换?

元素共享变换的定义:共享的View元素从一个Activity/Fragment到另一个Activity/Fragment的切换中是如何变化的;
在Google Play,Google Music 等众多Google嫡系APP中就得到了很多的运用。例如下图是Google Music的变化效果:

Google Music

上图中的Activity A 中Grid列表的CardView中ImageView和Acitivty B 的ImageView拥有共享的元素图片,于是就形成了
无缝的动画切换效果。

开始准备工作

首先,我们要开启windowContentTransitions.
如果你的targetSdk < 21,那么你需要在你的res文件夹下创建一个value-v21的资源文件夹,添加以下一行代码

1
2
3
4
5
6
<!– Base application theme. –>
<style name=“AppTheme” parent=“Theme.AppCompat.Light.DarkActionBar”>
<!– Customize your theme here. –>
//add this line to open transitions
<item name=“android:windowContentTransitions”>true </item>
</style>

Activity to Activity

然后,我们搭建两个Activity ActivityA 和ActivityB,如下图 ActivityA中有一个图片ImageView和一个按钮Button,ActivityB中有一个大图ImageView和一个描述的TextView。

ActivityA
ActivityB

ActivityA layout 布局文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?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= “io.github.hexiangyuan.sharedelementtransitionsdemo.ActivityA”>
<ImageView
android:id= “@+id/imageView”
android:layout_width= “148dp”
android:layout_height= “148dp”
android:scaleType= “centerCrop”
android:transitionName= “@string/transitions_name”
android:src= “@drawable/image” />
<Button
android:id= “@+id/button”
android:layout_width= “wrap_content”
android:layout_height= “wrap_content”
android:layout_alignParentLeft= “true”
android:layout_alignParentStart= “true”
android:layout_below= “@+id/imageView”
android:onClick= “imageClick”
android:text= “Click Me” />
</RelativeLayout>

特别注意的是android:transitionName="@string/transitions_name这一个属性,需要加在共享元素的View下,细心的朋友会发现Android Studio会变黄的tips提醒

This check finds attributes set in XML files that were introduced in a version newer than the oldest version targeted by your application (with the minSdkVersion attribute).
This is not an error;
the application will simply ignore the attribute. However, if the attribute is important to the appearance of functionality of your application, you should consider finding an alternative way to achieve the same result with only available attributes, and then you can optionally create a copy of > > the layout in a layout-vNN folder which will be used on API NN or higher where you can take advantage of the newer attribute.

意思是:这不是个错误,当你的target < 21时,你会收到lint的警告,你可以忽略或者设置不提醒。

AcitivityA java代码文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class ActivityA extends AppCompatActivity {
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.acitivit_a);
imageView = (ImageView) findViewById(R.id.imageView);
}
public void imageClick(View v) {
Intent intent = new Intent( this, SimpleActivityB.class);
ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(
this, imageView,
getString(R.string.transitions_name)
);
startActivity(intent, optionsCompat.toBundle());
}
}

需要留意的是

1
2
3
4
5
6
Intent intent = new Intent( this, SimpleActivityB.class);
ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(
this, imageView,
getString(R.string.transitions_name)
);
startActivity(intent, optionsCompat.toBundle());

通过这个ActivityOptionsCompat.makeSceneTransitionAnimation方法,传入(context,view,transitionName)这些参数,然后跳转时候会将optiont通过bundle的方式传递过去;

然后,在ActivityB中:

layout布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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”
tools:context= “io.github.hexiangyuan.sharedelementtransitionsdemo.ActivityA”>
<ImageView
android:id= “@+id/imageView”
android:layout_width= “match_parent”
android:layout_height= “184dp”
android:scaleType= “centerCrop”
android:transitionName= “@string/transitions_name”
android:src= “@drawable/image” />
<TextView
android:id= “@+id/textView”
android:layout_width= “match_parent”
android:layout_height= “wrap_content”
android:layout_alignParentEnd= “true”
android:layout_alignParentRight= “true”
android:layout_below= “@+id/imageView”
android:layout_marginEnd= “16dp”
android:layout_marginRight= “16dp”
android:text= “这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容”
android:textSize= “16sp” />
</RelativeLayout>

java

1
2
3
4
5
6
7
8
public class ActivityB extends AppCompatActivity{
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_b);
}
}

在ActivityB中就只需要在共享元素上添加一个属性
android:transitionName="@string/transitions_name"就OK了;

那么,Acitity to Activity 的共享动画就完成了,赶快Run 一下看看成果吧,是不是很简单?So easy!

finished

未完待续…….