ListView滑动item卡片式推进动画效果

前言——前几天在一款软件上看到list view滑动有这样的效果，觉得挺好看的，效果如下：

然后先去网上搜，发现大多都是说使用layoutAnimation，但使用之后个人觉得效果还是不太理想，动画是有了，可是动画效果只在刚进去时显示一次，然后就不再执行，感觉不大满意。于是后来就想，既然每次滑动都会执行到getview，可不可以在getview里边设置动画呢，试了一下果然可以，下边就来说一说实现思路：

mainActivity的布局，就是一个简单的listview：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.atguigu.listviewdemo.MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listview"
         />
</RelativeLayout>

先创建一个int数组，放六张图的id，

    /**
     * 六张图片
     */
    private int[] images = {R.drawable.f0, R.drawable.f1
            , R.drawable.f2, R.drawable.f3, R.drawable.f4
            , R.drawable.f5, R.drawable.f6};

六张图片有点少，可能看不出效果，所以在创建一个大小为50的集合，随机把六张图遍历为50张，

private List<Integer> imageList = new ArrayList();

Random random = new Random();
        imageList = new ArrayList();
        for (int i = 0; i < 50; i++) {

            //为了看出效果，把7张图片随机添加到集合中凑50张
            imageList.add(images[random.nextInt(7)]);
        }

然后就是创建adapter以及设置适配器，最主要还是getview方法：

ViewHolder viewHolder;
            if (convertView == null) {
                convertView = View.inflate(mContext, R.layout.item_image, null);
                viewHolder = new ViewHolder(convertView);
                convertView.setTag(viewHolder);
            }else {
                viewHolder = (ViewHolder) convertView.getTag();
            }

viewHolder.ivImage.setImageResource(imageList.get(position));

此处用了view holder，以及butterknife注入：

class ViewHolder {
            @BindView(R.id.iv_image)
            ImageView ivImage;

            ViewHolder(View view) {
                ButterKnife.bind(this, view);
            }
        }

这个是item_image布局

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/iv_image"
        android:scaleType="fitXY"
        />
</LinearLayout>

接下来在getview中设置item动画，一行代码即可
convertView.setAnimation(AnimationUtils.loadAnimation(mContext, R.anim.list_anim));

效果就出来了：

但此时还不太完美，就是上滑的时候也会执行动画，导致上滑效果有些不太好看

因为getview形参里边的position是屏幕最新显示出来的item所在集合中的位置，所以在这儿可以定义一个成员变量prePosition，来记录上一个item的位置，然后比较position与prePosition的值大小，如果position > prePosition，则为上滑，应该让动画执行，反之，则不执行，代码如下：

private int prePosition = -1;

            //如果是上滑，动画执行，如果是下滑，则动画不执行
            if(position > prePosition) {
                convertView.setAnimation(AnimationUtils.loadAnimation(mContext, R.anim.list_anim));
                prePosition = position;
            }else {

                prePosition = position;
            }

至此卡片动画效果算是完成了，最后贴上完整代码：

public class MainActivity extends AppCompatActivity {

    @butterknife.BindView(R.id.listview)
    ListView listview;

    private MyAdapter adapter;

    /**
     * 六张图片
     */
    private int[] images = {R.drawable.f0, R.drawable.f1
            , R.drawable.f2, R.drawable.f3, R.drawable.f4
            , R.drawable.f5, R.drawable.f6};

    private List<Integer> imageList = new ArrayList();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        butterknife.ButterKnife.bind(this);

        initData();
    }

    private void initData() {

        Random random = new Random();
        imageList = new ArrayList();
        for (int i = 0; i < 50; i++) {

            //为了看出效果，把7张图片随机添加到集合中凑50张
            imageList.add(images[random.nextInt(7)]);
        }

        adapter = new MyAdapter(this, imageList);
        listview.setAdapter(adapter);

    }

    private int prePosition = -1;

    class MyAdapter extends BaseAdapter {

        private Context mContext;
        private List<Integer> imageList;

        public MyAdapter(Context mContext, List<Integer> imageList) {
            this.mContext = mContext;
            this.imageList = imageList;
        }

        @Override
        public int getCount() {
            return imageList.size();
        }

        @Override
        public Object getItem(int i) {
            return imageList.get(i);
        }

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

        @Override
        public View getView(int position, View convertView, ViewGroup viewGroup) {

            ViewHolder viewHolder;
            if (convertView == null) {
                convertView = View.inflate(mContext, R.layout.item_image, null);
                viewHolder = new ViewHolder(convertView);
                convertView.setTag(viewHolder);
            }else {
                viewHolder = (ViewHolder) convertView.getTag();
            }

            viewHolder.ivImage.setImageResource(imageList.get(position));

            //如果是上滑，动画执行，如果是下滑，则动画不执行
            if(position > prePosition) {
                convertView.setAnimation(AnimationUtils.loadAnimation(mContext, R.anim.list_anim));
                prePosition = position;
            }else {

                prePosition = position;
            }

            return convertView;
        }

        class ViewHolder {
            @BindView(R.id.iv_image)
            ImageView ivImage;

            ViewHolder(View view) {
                ButterKnife.bind(this, view);
            }
        }
    }
}

一直以来都是看别人的博客，现在我希望自己也可以帮到别人，这是本人的第一篇技术性博客，希望可以帮到其他人，如果发现有错误，欢迎指正！