Android LayoutAnimation使用

一.概述

今天来看看LayoutAnimation的使用，先看效果图

二.实现

新建一个动画文件

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:delay="30%"
    android:animationOrder="random"
    android:animation="@anim/slide_right"
    />

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <translate android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="900"
        />
</set>

然后我们在布局文件的listview中使用

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    >
   <ListView
       android:id="@+id/listview"
       android:layout_width="match_parent"
       android:layoutAnimation="@anim/list_anim_layout"
       android:layout_height="match_parent"
       android:animateLayoutChanges="true"
       android:scrollbars="none"
       >
   </ListView>
</LinearLayout>

最后给出Java代码

public class MainActivity extends Activity {

    private ListView listView;
    private List data = new ArrayList();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = (ListView) findViewById(R.id.listview);
        for (int i = 0;i<20;i++){
           data.add("杨幂"+i);
        }
        listView.setAdapter(new MyAdapter(this,R.layout.item1,R.id.text,data));
    }
    class MyAdapter extends ArrayAdapter<String>{
        public MyAdapter(Context context, int resource, int textViewResourceId, List<String> objects) {
            super(context, resource, textViewResourceId, objects);
        }
    }
}

效果二

我们给GridView添加了一个LayoutAnimation，我们看看如何实现

布局文件

<RelativeLayout 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"
    tools:context="com.example.hecun.myapplication.MainActivity">
    <GridView
        android:id="@+id/gd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="4"
        android:animateLayoutChanges="true"
        android:verticalSpacing="10dp"
        />
</RelativeLayout>

每个item布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    >
    <TextView
        android:id="@+id/tv_item"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@drawable/item_bg"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        />
</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="true"
    android:duration="400"
    >
    <alpha android:fromAlpha="0"
        android:toAlpha="1"
        />
    <scale android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="0"
        android:toXScale="1"
        android:fromYScale="0"
        android:toYScale="1"/>
</set>

代码

public class MainActivity extends AppCompatActivity {

    private GridView gridView;
    private List<String> datas;
    private GridAdapter adapter;
    private LayoutAnimationController controller;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = (GridView) findViewById(R.id.gd);
        initData();
        adapter = new GridAdapter(this,datas);
        gridView.setAdapter(adapter);
        controller = AnimationUtils.loadLayoutAnimation(this, R.anim.gridlayoutanim);
        controller.setDelay(0.5f);
        controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
        gridView.setLayoutAnimation(controller);
    }
    public void initData(){
        datas = new ArrayList<>();
        for(int i = 1;i<9;i++){
            datas.add(String.valueOf(i));
        }
    }
}

扩展

我们知道，LayoutAnimation只有三种方式，顺序，逆序，随机，我们接下来看看如何进行扩展。

public class CustomLayoutController extends LayoutAnimationController {
    public static final int CUSTOM_ORDER = 0;
    private OnIndexListener onIndeListener;

    public void setOnIndexListener(OnIndexListener listener){
        onIndeListener = listener;
    }

    public CustomLayoutController(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public CustomLayoutController(Animation animation) {
        super(animation);
    }

    public CustomLayoutController(Animation animation, float delay) {
        super(animation, delay);
    }

    /**
     * 返回播放动画的顺序
     * @param params
     * @return
     */
    @Override
    protected int getTransformedIndex(AnimationParameters params) {
        if(getOrder() == CUSTOM_ORDER&&onIndeListener!=null){
            return onIndeListener.onIndex(this,params.count,params.index);
        }else{
            return super.getTransformedIndex(params);
        }
    }

    public  interface OnIndexListener{
         int onIndex(CustomLayoutController controller,int count,int index);
    }
}

public class MainActivity extends AppCompatActivity implements CustomLayoutController.OnIndexListener{

    private GridView gridView;
    private List<String> datas;
    private GridAdapter adapter;
    private Animation animation;
    private CustomLayoutController controller;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView = (GridView) findViewById(R.id.gd);
        initData();
        adapter = new GridAdapter(this,datas);
        gridView.setAdapter(adapter);
        animation = AnimationUtils.loadAnimation(this, R.anim.itemanim);
        controller = new CustomLayoutController(animation);
        controller.setDelay(0.5f);
        controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
        gridView.setLayoutAnimation(controller);
        controller.setOnIndexListener(this);
    }
    public void initData(){
        datas = new ArrayList<>();
        for(int i = 1;i<9;i++){
            datas.add(String.valueOf(i));
        }
    }
    //count为item总数，此处为8，index从0-7
    @Override
    public int onIndex(CustomLayoutController controller, int count, int index) {
        switch (index % 4){
            //每一行，右边的比左边的慢，每一列，下面的比上面的慢
            case 0:
                return 0 + index / 4;
            case 1:
                return 1 + index / 4;
            case 2:
                return 2 + index / 4;
            case 3:
                return 3 + index / 4;
        }
        return index;
    }
}

上面的动画效果中，因为gridview为4列，而每一行动画都比上一行延迟一点，但也不是上一行结束时才结束，所以对4整除。