在前面的博文Android开发历程_8(Tween Animation的2种属性设置方法)和博文Android开发历程_9(Frame Animation的使用) 中介绍了Animation的初步使用,但是Tween Animation和Frame Animation的动态效果只适应一个控件,或者说多个控件同时执行一种效果。如果我们需要一个界面中的多个控件按照相同的动画方式但是每个控件完成该动画的时刻不同的话,就可采用本节讲的LayoutAnimationController来方便的完成了。
参考资料为Mars老师的教程,http://www.mars-droid.com/.
首先我们来看看用java代码怎么完成该功能,主要遵循以下步骤:
在anim下新建一个xml文件,该文件里面设置了控件的动态效果,所以根标签为set。
在java代码中新建一个Animation对象,采用AnimationUtils.loadAnimation()的方法获得,该方法有一个输入参数及anim下的xml文件id。
新建一个LayoutAnimationController对象,输入参数为上一步新建的Animation对象。
设置改LayoutAnimationController对象的属性,比如控件出场的顺序(该顺序主要有随机,从头到尾,反向3种),控件出现的间隔时间等。
在布局文件中加载该LayoutAnimationController对象。
本次实验是采用了一个线性布局,里面放了一个GridView,GridView里面依次放了7个image图标和文字。
其界面显示如下:
运行的时候,这7个图标和文字时随机出现的,且间隔时间设置为0.5s,每个图标的动作执行时间为0.8s,下一个图标出现之前并不需要上一个图标动画完全完成,所以这2个时间值是不冲突的,也就是说只是控件起始的时刻间隔了0.5s而已。
实验主要部分代码和注释(附录有工程code下载链接):
MainActivity.java:
package com.example.anim_4; import java.util.ArrayList; import java.util.HashMap; import android.app.Activity; import android.os.Bundle; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.view.animation.LayoutAnimationController; import android.widget.GridView; import android.widget.SimpleAdapter; public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); GridView gridview = (GridView) findViewById(R.id.gridview); ArrayList<HashMap<String,Object>> gridList = new ArrayList<HashMap<String, Object>>(); HashMap<String,Object> item = new HashMap<String,Object>(); item.put("img",R.drawable.icon1); item.put("str", "One"); gridList.add(item); item = new HashMap<String,Object>(); item.put("img", R.drawable.icon2); item.put("str", "Two"); gridList.add(item); item = new HashMap<String,Object>(); item.put("img", R.drawable.icon3); item.put("str", "Three"); gridList.add(item); item = new HashMap<String,Object>(); item.put("img", R.drawable.icon4); item.put("str", "Four"); gridList.add(item); item = new HashMap<String,Object>(); item.put("img", R.drawable.icon5); item.put("str", "Five"); gridList.add(item); item = new HashMap<String,Object>(); item.put("img", R.drawable.icon6); item.put("str", "Six"); gridList.add(item); item = new HashMap<String,Object>(); item.put("img", R.drawable.icon7); item.put("str", "Seven"); gridList.add(item); SimpleAdapter gridAdapter = new SimpleAdapter(this, gridList, R.layout.grid_item, new String[]{"img","str"}, new int[]{R.id.itemImage,R.id.itemText}); gridview.setAdapter(gridAdapter); Animation animation = (Animation)AnimationUtils.loadAnimation(MainActivity.this, R.anim.list_anim); LayoutAnimationController lac = new LayoutAnimationController(animation); lac.setOrder(LayoutAnimationController.ORDER_RANDOM); lac.setDelay(0.5f);//注意这个地方是以秒为单位,是浮点型数据,所以要加f gridview.setLayoutAnimation(lac); } }
res/anim/文件夹下的xml文件:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="800" /> </set>
activity_main.xml:
<LinearLayout 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:orientation="vertical" > <GridView android:id="@+id/gridview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:columnWidth="90dp" android:numColumns="2" android:stretchMode="columnWidth" android:gravity="center" /> </LinearLayout>
GridView中每个控件的布局xml文件:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="wrap_content"> <ImageView android:id="@+id/itemImage" android:layout_width="100dip" android:layout_height="80dip" android:layout_centerHorizontal="true" /> <TextView android:layout_width="wrap_content" android:layout_below="@+id/itemImage" android:layout_height="wrap_content" android:text="TextView01" android:layout_centerHorizontal="true" android:id="@+id/itemText" /> </RelativeLayout>
下面来看看如果不用java代码,该怎么完成该LayoutAnimationController功能呢?其实步骤很简单:
首先在res下新建一个animator文件夹,里面新建一个xml文件,该xml文件就是对应的LayoutAnimationController属性设置文件。本次实验该文件的内容如下:
<?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:delay="0.5" android:animationOrder="random" android:animation="@anim/list_anim" />
然后在主布局文件activity_main.xml文件的gridview下加入下面一条语句即可:
android:layoutAnimation="@animator/list_anim_layout" .
当然,java中的如下代码直接删除就行了:
Animation animation = (Animation)AnimationUtils.loadAnimation(MainActivity.this, R.anim.list_anim); LayoutAnimationController lac = new LayoutAnimationController(animation); lac.setOrder(LayoutAnimationController.ORDER_RANDOM); lac.setDelay(0.5f);//注意这个地方是以秒为单位,是浮点型数据,所以要加f gridview.setLayoutAnimation(lac);
总结:本次实验主要是练习了LayoutAnimationController的简单使用方法,完成了一个界面中多个控件的“出场顺序”。
附:实验工程code下载地址。