在Android 4.4(KitKat)中,谷歌添加了很多不错的东西。现在我们来看看android.transition框架。
多年来,android不断改进现有的动画工具供开发者使用。在HoneyComb版本中,提供了很多不错的API用于创建丰富、复杂的动画。在此基础上,KitKat的android.transition让我们可以通过一种更直观的方式定义动画效果。
Scene和Transition
先从Scene和Transition概念说起。Scene定义了界面的当前状态信息,而Transition定义了界面之间的切换。
可以从布局文件中载入Scene定义,示例如下:
1 2 |
; html-script: false ] scene = Scene.getSceneForLayout(container, R.layout.example, context); |
其中container
在Scene中是一个包含了所有view的ViewGroup。如果是在fragment中,Scene就是传入onCreateView()
方法的参数。使用Transition的最简单方式就是使用TransitionManager
处理,示例如下:
1 2 |
; html-script: false ] TransitionManager.go(scene); |
如果在TransitionManager
中不明确需要指定哪个Transition,就会默认使用AutoTransition
,这个我们会后面介绍。也可以用inflater
载入现有的view来创建Scene,示例如下:
1 2 3 |
; html-script: false ] View view = inflater.inflate(R.layout.example, container, false); Scene scene = new Scene(container, (ViewGroup)view); |
Andorid.Transition实践
我们来看一个更详细的示例,首先从项目主页下载示例代码AndroidTransitionExample。这已经是一个已完成的项目了,所以也可以用git checkout
检出代码(以下是详细解释)。
首先新建只包含一个Fragment的项目,这样可以更容易记录一些信息。我们为TransitionFragment
新建一个xml布局文件,叫做fragment_transition_scene_1.xml。接着往里面添加一个TextView
,然后在TextView
下面再添加一个Button,如下:
fragment_transition_scene_1.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
; html-script: false ] <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/scene" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textView" android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/goButton" android:text="@string/button_go" android:layout_below="@id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> |
你一定猜得到,我们接下来还要新建另一个xml布局文件,fragment_transition_scene_2.xml。它和上一个布局文件基本一样,只是把Button移到布局底部。示例如下:
1 2 3 4 5 6 7 8 9 10 |
; html-script: false ] ... <Button android:id="@+id/goButton" android:text="@string/button_go" android:layout_below="@id/textView" android:layout_alignParentBottom="true" android:layout_width="wrap_content" android:layout_height="wrap_content" /> ... |
这是两个布局的屏幕截图:
为了看Transition的效果,我们从第二个布局文件中创建Scene。点击goButton的时候展示Transition的效果。我们先修改一下TransitionFragment.onCreateView()
方法的代码,如下: