Android自定义视图动画（三）

一）布局动画效果

既然一个View可以有动画效果，那么ViewGroup肯定也可以有动画效果，这里我们就以一个LinearLayout为例，来给这个布局创建动画效果。

在代码里和在资源文件里实现的效果是一样的

1）布局文件，很简单的一个布局，添加了一些按钮视图

<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"    android:id="@+id/layout"    tools:context=".MainActivity">    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="New Button"        android:id="@+id/button" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="New Button"        android:id="@+id/button2" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="New Button"        android:id="@+id/button3" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="New Button"        android:id="@+id/button4" /></LinearLayout>

2）在代码里为布局创建动画效果，通过LayoutAnimationController类来实现

public class MainActivity extends ActionBarActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ScaleAnimation sa=new ScaleAnimation(0,1,0,1);//缩放动画效果         sa.setDuration(2000);        LayoutAnimationController lac=new LayoutAnimationController(sa,0.5f);//布局动画效果的参数         lac.setAnimation(sa);        lac.setOrder(LayoutAnimationController.ORDER_NORMAL); //显示的顺序         LinearLayout layout= (LinearLayout) findViewById(R.id.layout);        layout.setLayoutAnimation(lac);//给布局加载上动画效果    }}

最后运行的效果是按钮会连续按照缩放的效果出现，顺序是LayoutAnimationController.ORDER_NORMAL，就是正常从上到下的顺序，此外还可以设置反转和随意的顺序

3）在xml里实现

新建xml文件，类型为Animation,Root Element选择scale,命名为sa

<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android"     android:fromXScale="0"     android:toXScale="1"     android:fromYScale="0"     android:toYScale="1"     android:duration="2000">    </scale>

接着新建xml,还是Aniamtion类型，把标签改成layoutAnimation,命名为layout

<?xml version="1.0" encoding="utf-8"?><layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"    android:animation="@anim/sa"    android:delay="0.5">    </layoutAnimation>

最后在布局文件里添加下面一行

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:layoutAnimation="@anim/layout"//创建布局动画    >....... </LinearLayout>

这样就完成了布局动画效果的创建了。

 

二）布局内容改变动画（animationLayoutChanges)

当我们在布局里进行一些操作时，比如增加按钮或者减掉按钮，会导致布局内容改变，使用这个animationLayoutChanges可以使布局内容改变的时候产生动画效果，改善用户体验。这里以菜单选项里增加按钮为例，可以看到这个动画的效果。

首先给菜单选项增加一个“添加”的选项，我们来新建一个menu类型的xml文件，icon指定了系统自带的一个添加菜单选项的图片

<menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    tools:context="com.example.layoutchangeanimation.MainActivity" >    <item        android:id="@+id/action_settings"        android:orderInCategory="100"        android:showAsAction="never"        android:title="@string/action_settings"/>    <item        android:id="@+id/action_add"        android:showAsAction="always"        android:icon="@android:drawable/ic_input_add"        android:title="@android:drawable/ic_input_add" />    </menu>

然后在代码里写这个添加选项的逻辑事件

public class MainActivity extends Activity {private LinearLayout rootView;private OnClickListener btn_onClickListener=new OnClickListener() {@Overridepublic void onClick(View v) {rootView.removeView(v);}};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);rootView=(LinearLayout)findViewById(R.id.rootView);}private void add() {Button btn=new Button(this);btn.setText("Remove me");rootView.addView(btn);btn.setOnClickListener(btn_onClickListener);}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {switch (item.getItemId()) {case R.id.action_settings:return true;case R.id.action_add:add();break;default:break;}return super.onOptionsItemSelected(item);}}

可以看到，点击添加选项的时候会新建按钮，如果点击这个按钮，会将自身移除

接下来为这个布局设置布局内容改变动画，在布局文件里添加animationLayoutChanges属性为true：

<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"    android:id="@+id/rootView"    android:animateLayoutChanges="true"    tools:context="com.example.layoutchangeanimation.MainActivity" ></LinearLayout>

这样当布局内容改变的时候，就会有这个动画效果。

 三）为列表添加布局动画效果

既然可以给布局创建动画效果，那么给listView添加布局动画效果就是很简单了，而且方法和我们上面第一条的内容几乎是一样的

1）布局文件

<ListView android:id="@android:id/list"    android:layout_width="match_parent"    android:layout_height="match_parent"  </ListView>

2）代码里实现动画效果

public class MainActivity extends ListActivity {private ArrayAdapter<String> adapter;private LayoutAnimationController lac;private ScaleAnimation sa;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);adapter=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, new String[]{"刘家威","祝你一帆风顺","人生得意须尽欢"});setListAdapter(adapter);          sa=new ScaleAnimation(0, 1, 0, 1);  sa.setDuration(2000);  lac=new LayoutAnimationController(sa, 0.5f);  getListView().setLayoutAnimation(lac);//给列表添加动画效果}}

这样就实现动画效果了，如果想用资源文件的方法实现，只要新建好所有的anim.xml后，在布局里添加一行

 android:layoutAnimation="@anim/name"

通过这三节连续的Android自定义视图动画的学习，深入了解了视图动画和布局动画的用法和效果

第一节是学习了四个基础动画，

旋转动画 rotateAnimation

透明动画 alphaAnimation

缩放动画 scaleAniamtion

移动动画 translateAnimation

第二节学习了混合动画效果和自定义动画效果的制作，自定义动画效果和applyTransformation(float interpolatedTime, Transformation t)密不可分，尤其是 interpolatedTime的渐变性是自定义动画的基础。

第三节学习了布局动画的创建和用法，方法都大同小异，可以举一反三来学习。