作者:李旺成
时间:2016年5月11日
这个 Hack 将介绍如何为 ViewGroup 的子视图添加动画效果。
默认情况下,添加到 ViewGroup 中的子视图是直接显示出来的。有一个简单的方法可以为这个过程增加动画效果。
LayoutAnimationController 类简介
LayoutAnimationController 可以为 ViewGroup 的子视图添加动画效果。需要注意的是,并不能为每个子视图分别指定不同的动画效果(也就是说每个子视图都会有相同的动画效果),但是 LayoutAnimationController 可以决定各个子视图显示动画效果的时间。
先看下官方的介绍:
文档上介绍了 ”XML Attributes“,那说明可以在 xml 中使用,也就是说有两种使用方式:直接在 Java 代码中用和在 xml 中定义。在稍微看一下提供了哪些方法:
有几个方法简单解释下:
- setInterpolator)(Interpolator interpolator):设置两个子视图之间延迟时间的插值器,注意添加的动画也是可以设置单独设置插值器的
- setOrder)(int order):设置控件显示的顺序
- willOverlap)():返回两个子视图的动画是否会出现重叠
LayoutAnimationController 简单使用
上面介绍 LayoutAnimationController 的时候提过,该类应该有两种使用方式,下面将分别介绍这两种方式。
先看下效果:
直接在 Java 代码中使用
1、创建动画1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18AnimationSet set = new AnimationSet(false); // 传入 false 表示组成动画集中的动画使用不同的 Interpolator
Animation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
alphaAnimation.setDuration(700);
alphaAnimation.setInterpolator(new FastOutSlowInInterpolator());
set.addAnimation(alphaAnimation);
Animation translateAnimation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF,
0.0f,
Animation.RELATIVE_TO_SELF,
0.0f,
Animation.RELATIVE_TO_SELF,
-1.0f,
Animation.RELATIVE_TO_SELF,
0.0f);
translateAnimation.setDuration(1000);
translateAnimation.setInterpolator(new LinearOutSlowInInterpolator());
set.addAnimation(translateAnimation);
这里使用透明度动画和位移动画组合创建一个动画集,并且分别为这两个动画设置了不同的 Interpolator 以及 持续时间。
注意:直接使用某一种动画是完全一样的,这里使用动画集仅仅是为了演示。
2、代码创建 LayoutAnimationController1
2
3LayoutAnimationController lac = new LayoutAnimationController(
set,
1f);
3、设置子视图显示的顺序1
lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
order 可有如下取值:
- ORDER_NORMAL:顺序
- ORDER_REVERSE:相反
- ORDER_RANDOM:随机
4、为 ViewGroup 设置 LayoutAnimationController1
mContentLV.setLayoutAnimation(lac);
5、为 ViewGroup 添加子视图
这里的 ViewGroup 是 ListView,所以要为其设置 Adapter:1
2
3
4mContentLV.setAdapter(new ArrayAdapter<String>(
this,
android.R.layout.simple_list_item_1,
Countries.COUNTRIES));
使用很简单,就这么几步即可。
在 xml 中定义 LayoutAnimationController
其实与在 Java 代码中使用是一样的,只是定义方式的区别。
1、创建 layoutAnimation 的 xml 文件
在 res/anim 文件夹下面创建名为 list_item_anim_layout.xml 的文件,内容如下:1
2
3
4
5<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="1"
android:animationOrder="reverse"
android:animation="@anim/list_animation"/>
在这里可以直接设置子视图的顺序,延迟时间(注意:单位是”秒“),以及要显示的动画。
2、在布局中为 ViewGroup 设置 layoutAnimation 属性1
2
3
4
5<ListView
android:id="@+id/lv_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutAnimation="@anim/list_item_anim_layout"/>
3、为 ListView 设置 Adapter
为 ListView 设置好 Adapter 应该就可以看到效果了。这里就不演示了,代码在演示项目中都有,感兴趣的可以自己下去尝试。
注意事项
只在第一次设置时有效?
示例中使用了 LinearLayout,通过点击按钮往 LinearLayout 中添加和删除子视图。你会发现在给 LinearLayout 设置好 LayoutAnimationController 后调用添加方法(也就是在 oncreate() 方法中执行的那段代码),会有动画效果。但是,当你再次点击”添加“或”删除“按钮,并没有出现动画效果。
这里没有深入研究了,只是在添加和删除子视图之前又调用了一下 ViewGroup 的 setLayoutAnimation() 方法,但是效果很诡异,所有的子视图都会执行动画。
项目地址
项目示例代码:
VGChildrenAnimActivity.java
Countries.java
activity_vgchildrenanim.xml
list_item_anim_layout.xml