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

来源：互联网发布：优雅的淘宝收件人名字编辑：程序博客网时间：2024/06/05 00:56

前言——前几天在一款软件上看到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);            }        }    }}

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

0 0