ListView添加加载动画

我们总喜欢探索一些新功能，有人问：做这个有什么用呢？我们总不愿我们的工作那么枯燥，给自己调剂一下也好。

不录制效果了(主要电脑不给力…)

ListView添加子项动画无非是在适配器里面动手脚，那么ListView里面添加数据的过程大家是知道的，但是这里我还是要贴出来，方便大家粘贴，下面给出Activity的代码。

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

List<Drawable> drawables = new ArrayList<>();
drawables.add(getResources().getDrawable(R.drawable.pic1));
drawables.add(getResources().getDrawable(R.drawable.pic2));
drawables.add(getResources().getDrawable(R.drawable.pic3));
drawables.add(getResources().getDrawable(R.drawable.pic4));
drawables.add(getResources().getDrawable(R.drawable.pic5));
drawables.add(getResources().getDrawable(R.drawable.pic6));
drawables.add(getResources().getDrawable(R.drawable.pic7));
drawables.add(getResources().getDrawable(R.drawable.pic8));
drawables.add(getResources().getDrawable(R.drawable.pic9));

ListView listView = (ListView) findViewById(R.id.list);
ListAdapter adapter = new ListAdapter(this, listView, drawables, 300);
listView.setAdapter(adapter);
}

}

很简单，添加了几张图片，但是我们看见一个300，这是我设置ListView的条目数，大家再看下适配器代码就能知道了，下面给出适配器代码:

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AbsListView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class ListAdapter extends BaseAdapter {
private List<Drawable> mDrawableList = new ArrayList<>();
private int mLength = 0;
private LayoutInflater mInflater;
private Context mContext;
private ListView mListView;
private Animation animation;
private int mFirstTop, mFirstPosition;
private boolean isScrollDown;

public ListAdapter(Context context, ListView listView, List<Drawable> drawables, int length) {
mDrawableList.addAll(drawables);
mLength = length;
mInflater = LayoutInflater.from(context);
mContext = context;
mListView = listView;
animation = AnimationUtils.loadAnimation(mContext, R.anim.translate);
mListView.setOnScrollListener(mOnScrollListener);
}

AbsListView.OnScrollListener mOnScrollListener = new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {

}

@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
View firstChild = view.getChildAt(0);
if (firstC
4000
hild == null) return;     //如果listview为空，则结束
int top = firstChild.getTop();
/**
* firstVisibleItem > mFirstPosition表示向下滑动一整个Item
* mFirstTop > top表示在当前这个item中滑动
*/
isScrollDown = firstVisibleItem > mFirstPosition || mFirstTop > top;
mFirstTop = top;
mFirstPosition = firstVisibleItem;
}
};

@Override
public int getCount() {
return mLength;    //设置listview的长度
}

@Override
public Object getItem(int position) {
return mDrawableList.get(position % mDrawableList.size());     //这里的设置可以让图片循环，直接用mDrawableList.get(position)数组越界
}

@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();
}

//清除当前显示区域中所有item的动画
for (int i = 0; i < mListView.getChildCount(); i++) {
View view = mListView.getChildAt(i);
view.clearAnimation();
}
//然后给当前item添加上动画
if (isScrollDown) {
convertView.startAnimation(animation);
}
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;
}
}

代码注释也比较详细，需要注意的我们只能让上滑的时候出现动画且只有一个图片出现动画，其他清除动画，大家要留心。

最后就是动画anim的资源了，我们这里用的是一个translate的动画，给出代码：

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="1000"
android:fromYDelta="0"
android:interpolator="@android:anim/bounce_interpolator"
android:toXDelta="0"
android:toYDelta="0" />

中间有个interpolator叫插值器，是控制动画的展示方式的，系统有几个属性，下面贴出来

@android:anim/accelerate_decelerate_interpolator
@android:anim/accelerate_interpolator
@android:anim/anticipate_interpolator
@android:anim/anticipate_overshoot_interpolator
@android:anim/bounce_interpolator
@android:anim/cycle_interpolator
@android:anim/decelerate_interpolator
@android:anim/linear_interpolator
@android:anim/overshoot_interpolator

效果解释：

accelerate_decelerate_interpolator 在动画开始与介绍的地方速率改变比较慢，在中间的时候加速

accelerate_interpolator 在动画开始的地方速率改变比较慢，然后开始加速

anticipate_interpolator 开始的时候向后然后向前甩

anticipate_overshoot_interpolator 开始的时候向后然后向前甩一定值后返回最后的值

bounce_interpolator 动画结束的时候弹起

cycle_interpolator 动画循环播放特定的次数，速率改变沿着正弦曲线

decelerate_interpolator 在动画开始的地方快然后慢

linear_interpolator 以常量速率改变

overshoot_interpolator 向前甩一定值后再回到原来位置

好了，具体的效果都实现了，现在到了源码时间。

代码：http://download.csdn.net/download/wanxuedong/9949404