Android学习第六篇——布局动画

上一篇我们学习了四种基本的动画以及混合动画，这一篇我将要学习一下布局动画，这种动画会影响到布局的所有子对象。

一、LinearLayoutAnimation

这是一种简单的布局动画，我们可以先在界面上放置六个Button，我们直接看一下布局文件就可以了！、

<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"
    tools:context="com.example.linearlayoutanimation.MainActivity$PlaceholderFragment" >

    <Button
        android:id="@+id/Button05"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/Button04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/Button03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/Button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/Button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

我们已经看过布局了以后，接下来我们来看看MainActivity中是怎么调用的吧！！

这里不具体解释了，在代码中多做解释了！

public static class PlaceholderFragment extends Fragment {

		public PlaceholderFragment() {
		}

		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container,
				Bundle savedInstanceState) {
			LinearLayout rootView = (LinearLayout) inflater.inflate(R.layout.fragment_main, container,
					false);
			
			ScaleAnimation sa = new ScaleAnimation(0, 1, 0, 1);
			sa.setDuration(5000);
			
			/*
			 * LayoutAnimationController(Animation animation, float delay)
			 * Animation 表示某种动画
			 * delay 表示延迟，设置了该值后，可以使控件一个接一个的出来，是一个float值
			 */
			LayoutAnimationController lac = new LayoutAnimationController(sa, 0);
			/*
			 * setOrder有三中出现模式
			 * 1、LayoutAnimationController.ORDER_NORMAL	为默认情况下，从上往下出现
			 * 2、LayoutAnimationController.ORDER_RANDOM 随机出现
			 * 3、LayoutAnimationController.ORDER_REVERSE 从下往上出现
			 */
			lac.setOrder(LayoutAnimationController.ORDER_REVERSE);
			
			rootView.setLayoutAnimation(lac);
			
			return rootView;
		}
	}

这时候直接就可以在模拟器中看到效果了，效果就是按钮会从下往上一个个慢慢出现。

二、LayoutChangeAnimation布局改变动画

我们在布局文件上没有上面控件，但是需要注意的一点就是。我们需要在布局文件中添加该属性

android:animateLayoutChanges="true"

使得布局改变的时候可以触发动画。

虽然我们没在布局文件里做什么改变，但是我们需要在menu/main.xml文件中做修改，我们需要添加一个按钮，用于之后做布局改变的时候的触发按钮。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.example.laychangeanimation.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"/>

</menu>

效果就是在标题栏上面出现了一个绿色的“+”

虽然我们在菜单文件中已经修改了，但是我们还需要在MainActivity中修改一下才可以显示成上面的效果

@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		switch (item.getItemId()) {
		case R.id.action_settings:
			return true;
		case R.id.action_add:
			addButton();
			break;
		default:
			break;
		}
		return super.onOptionsItemSelected(item);
	}

这样我们就完成了我们需要的布局效果。

接下来我们来实现一下具体的功能。

//定义的参数，获取布局文件
	private LinearLayout rootView;
	
	//为后面添加的按钮设置监听事件，同样是变量
	private OnClickListener btn_OnClickListener = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			rootView.removeView(v);
		}
	};

在onCreate中获取布局文件赋值给rootView

//R.id.rootView是布局文件的id
rootView = (LinearLayout) findViewById(R.id.rootView);

接下来就是开始改变布局的样子了

private void addButton(){
		Button btn = new Button(this);
		btn.setText("Remove");
		rootView.addView(btn);
		
		
		/*
		 * 自定义效果
		 * LayoutTransition类定义了如下几种布局容器动画类型。
		 * APPEARING 当view出现或者添加的时候，view出现的动画
		 *  DISAPPEARING 当view消失或者隐藏的时候，view消失的动画 
		 *  CHANGE_APPEARING 当添加view导致布局容器改变的时候，整个布局容器的动画 
		 *  CHANGE_DISAPPEARING 当删除或者隐藏view导致布局容器改变的时候，整个布局容器的动画
		 * 你可以自定义这些动画，通过setAnimator() 方法把它们设置进一个 LayoutTransition 对象中去。
		 */
//		LayoutTransition lt = new LayoutTransition();
//		ObjectAnimator oa = new ObjectAnimator().ofFloat(null, "rotationY", 0F, 90F, 0F);
//		lt.setAnimator(LayoutTransition.APPEARING, oa);
//		rootView.setLayoutTransition(lt);
		
		btn.setOnClickListener(btn_OnClickListener);
	}

最终的效果就是，当点击绿色的“+”以后，会在界面上出现一个按钮，而按钮出现的样式就是之前设置的动画，当点击按钮以后，按钮同样会以之前设置的方式消失。

三、ListViewLayoutAnimation列表布局动画

这里同样会讲到两种不同的方式来实现相同的效果

1、直接设置

private ArrayAdapter<String> adapter;
	private LayoutAnimationController lac;
	private ScaleAnimation sa;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//setContentView(R.layout.main);
		adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, new String[]{"hello","world","Felix"});
		
		setListAdapter(adapter);
		
		sa = new ScaleAnimation(0,1,0,1);
		sa.setDuration(1000);
		lac = new LayoutAnimationController(sa, 0.5f);
		
		getListView().setLayoutAnimation(lac);
	}

2、通过XML文件设置

接下来我们要添加两个Xml文件

一个是list中的item的样式，sa.xml这里面我们设置了缩放动画

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

</scale>

然后我们就要让list调用该样式。因此我们就需要再次添加一个list_anim.xml

<?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>

这样以后我们还没结束，我们需要把list_anim.xml给布局文件调用才可以，因此，我们需要个布局文件修改为如下这样：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- 此处的id必须是这样的格式，当然后面的名字可以自己取 -->
    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layoutAnimation="@anim/list_anim" >//这里就是调用list_anim.xml文件
    </ListView>

</LinearLayout>

好了以后，我们需要在MainActivity中添加这句话才可以。

setContentView(R.layout.main);

同时把之前直接调用的代码去掉，最后的代码如下：

private ArrayAdapter<String> adapter;
//	private LayoutAnimationController lac;
//	private ScaleAnimation sa;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, new String[]{"hello","world","Felix"});
		
		setListAdapter(adapter);
		
//		sa = new ScaleAnimation(0,1,0,1);
//		sa.setDuration(1000);
//		lac = new LayoutAnimationController(sa, 0.5f);
//		
//		getListView().setLayoutAnimation(lac);
	}

到此为止，这两种方法就结束了，实现的效果在模拟器中打开后是完全相同的。