自定义控件三部曲之动画篇(十三)——实现ListView Item进入动画

前言：宝剑锋从磨砺出，梅花香自苦寒来
 

相关文章：

《Android自定义控件三部曲文章索引》: http://blog.csdn.net/harvic880925/article/details/50995268

前面两篇我们讲解了使用layoutAnimation和LayoutTransition实现ViewGroup中Item加载动画的方法，但他们都各自存在问题：
layoutAnimation虽然是API 1中就已经引入，但只能在动画初次创建时才能使用指定动画。控件创建以后，再往ViewGroup里加Item就不会再有动画。这显然是不合适的！
LayoutTransition能够实现无论何时往ViewGroup中添加控件都可以给其中控件使用动画。但最大的问题是，它的API等级是11。而且也没有兼容包可供我们使用这个函数。
这样问题就来了，如果我们想在兼容API 8以上的机型，完成ListView中各个Item进入时都添加动画，这要怎么来做呢？
今天我们要完成的效果图如下：

从效果图中可以看到，当每个Item进入的时候，都添加了动画。前面我们说了layoutAnimation和LayoutTransition所存在的问题，那抛开这两个函数，我们要如何实现Item进入动画呢？
别忘了，ListView在得到每个Item时会调用BaseAdapter的getView方法！getView中每一个convertView就是当前要显示的Item所对应的View，所以我们直接对convertView添加动画不就好了。
上面的原理理解起来并不难，下面我们就看看如何实现的吧。

一、搭框架

这部分，我们主要是先搭出来要实现的框架，把ListView填充起来，效果如下：

 

这里实现的效果就是把listview填充起来，总共用了九张图片，listview列表循环显示这九张图片，但我在每个图片上显示了当前item所在的位置。
好了，下面就来看代码吧

1、item布局（item_layout.xml）

我们先来看看listview的Item是怎么布局的：

 

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content">
    <ImageView
            android:id="@+id/img"
            android:layout_width="fill_parent"
            android:layout_height="250dp"
            android:scaleType="centerCrop"
            android:layout_margin="5dp"
            android:layout_gravity="center"/>

    <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:layout_gravity="center"/>

</FrameLayout>

代码很好理解，从效果图中也可以看出，底部一个imageview，中间一个文字来表示当前item所在的位置。

2、ListAdapter

这里就是ListView的Adapter的代码位置了，完整的代码如下，然后再细讲：

public class ListAdapter extends BaseAdapter {
    private List<Drawable> mDrawableList = new ArrayList<>();
    private int mLength = 0;
    private LayoutInflater mInflater;
    private Context mContext;
    private ListView mListView;

    public ListAdapter(Context context, ListView listView, List<Drawable> drawables, int length) {
        mDrawableList.addAll(drawables);
        mLength = length;
        mInflater = LayoutInflater.from(context);
        mContext = context;
        mListView = listView;
    }

    @Override
    public int getCount() {
        return mLength;
    }

    @Override
    public Object getItem(int position) {
        return mDrawableList.get(position % mDrawableList.size());
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;

        if (convertView == null) {

            holder = new ViewHolder();
            convertView = mInflater.inflate(R.layout.item_layout, null);
            holder.mImageView = (ImageView) convertView.findViewById(R.id.img);
            holder.mTextView = (TextView) convertView.findViewById(R.id.text);



        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        convertView.setTag(holder);

        holder.mImageView.setImageDrawable(mDrawableList.get(position % mDrawableList.size()));
        holder.mTextView.setText(position+"");

        return convertView;
    }

    public class ViewHolder {
        public ImageView mImageView;
        public TextView mTextView;
    }
}

首先是构造函数：

 

public ListAdapter(Context context, ListView listView, List<Drawable> drawables, int length) {
    mDrawableList.addAll(drawables);
    mLength = length;
    mInflater = LayoutInflater.from(context);
    mContext = context;
    mListView = listView;
}</