Android RecyclerView Item动画（Checkbox全选、单选）

最新推荐文章于 2023-03-10 20:40:13 发布
最新推荐文章于 2023-03-10 20:40:13 发布
阅读量8.6k 收藏 21
点赞数
分类专栏： Android开发 文章标签： android 动画

对RecyclerView Item做动画，刚刚开始研究的时候一些坑，在这里把一些设计思路分享出去： 添加动态位移，静态位移，缩放等动画，保证了动画状态的平滑衔接。

效果图：

这里写图片描述

RecyclerView，ListView这些具有Item复用性的View，想要对其Item做动画

需要注意以下几点：

  1. 如果要一点击，让所有Item做动画的效果。例如，上图的编辑和取消，这样的动态动画。可以对所有ViewHolder中的View直接做动画。但是需要在onBindViewHolder方法中对复用的item做静态动画，保证动画状态的平滑衔接。

  2. 每一个Item的特有属性，例如，上图checkbox的选中状态，都需要把状态字段放到对应的Java bean中， 并在onBindViewHolder方法从java bean取出状态值，设置到view里。

首先，对一些细节进行分析。 如何设计一个自定义View，来让他可以自己移动，做动画起来？

1、首先，创建一个View，他是RecyclerView Item的根布局：

    public class SlideRelativeLayout extends RelativeLayout {
        public static final String TAG = SlideRelativeLayout.class.getSimpleName();
        private CheckBox mCheckBox;
        private RelativeLayout mContentSlide;
        private int mOffset;

    public SlideRelativeLayout(Context context) {
        super(context);
    }

    public SlideRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SlideRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mCheckBox = (CheckBox) findViewById(R.id.item_checkbox);
        mContentSlide = (RelativeLayout) findViewById(R.id.item_content_rl);
        setOffset(35);
    }

    public void setOffset(int offset) {
        mOffset = (int) (getContext().getResources().getDisplayMetrics().density * offset + 0.5f);
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public void openAnimation() {
        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setIntValues(0, 1);
        valueAnimator.setDuration(300);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float fraction = valueAnimator.getAnimatedFraction();
                int endX = (int) (-mOffset * fraction);
                doAnimationSet(endX, fraction);
            }
        });
        valueAnimator.start();
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public void closeAnimation() {
        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setIntValues(0, 1);
        valueAnimator.setDuration(150);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float fraction = valueAnimator.getAnimatedFraction();
                int endX = (int) (-mOffset * (1 - fraction));
                doAnimationSet(endX, (1 - fraction));
            }
        });
        valueAnimator.start();
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    private void doAnimationSet(int dx, float fraction) {
        mContentSlide.scrollTo(dx, 0);
        mCheckBox.setScaleX(fraction);
        mCheckBox.setScaleY(fraction);
        mCheckBox.setAlpha(fraction * 255);
    }

    public void open() {
        mContentSlide.scrollTo(-mOffset, 0);
    }

    public void close() {
        mContentSlide.scrollTo(0, 0);
    }
}

这里，在View树创建完毕之后找到我们需要做动画的子View：

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    mCheckBox = (CheckBox) findViewById(R.id.item_checkbox);
    mContentSlide = (RelativeLayout) findViewById(R.id.item_content_rl);
    setOffset(35);
}

然后，设计4个方法，分别为：动态的打开动画，动态的关闭动画，静态的打开动画，静态的关闭动画。

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public void openAnimation() {
    ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setIntValues(0, 1);
    valueAnimator.setDuration(300);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float fraction = valueAnimator.getAnimatedFraction();
            int endX = (int) (-mOffset * fraction);
            doAnimationSet(endX, fraction);
        }
    });
    valueAnimator.start();
}

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public void closeAnimation() {
    ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setIntValues(0, 1);
    valueAnimator.setDuration(150);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float fraction = valueAnimator.getAnimatedFraction();
            int endX = (int) (-mOffset * (1 - fraction));
            doAnimationSet(endX, (1 - fraction));
        }
    });
    valueAnimator.start();
}

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void doAnimationSet(int dx, float fraction) {
    mContentSlide.scrollTo(dx, 0);
    mCheckBox.setScaleX(fraction);
    mCheckBox.setScaleY(fraction);
    mCheckBox.setAlpha(fraction * 255);
}

public void open() {
    mContentSlide.scrollTo(-mOffset, 0);
}

public void close() {
    mContentSlide.scrollTo(0, 0);
}

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void doAnimationSet(int dx, float fraction) {
    mContentSlide.scrollTo(dx, 0);
    mCheckBox.setScaleX(fraction);
    mCheckBox.setScaleY(fraction);
    mCheckBox.setAlpha(fraction * 255);
}

对子View做动画我采取的策略是：使用属性动画，在每一贞动画里获取到对应的值，对子View做相应的动画，例如：动态的打开动画。

onAnimationUpdate方法，显示每一贞动画都会回调一次。

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public void openAnimation() {
    ValueAnimator valueAnimator = new ValueAnimator();
    valueAnimator.setIntValues(0, 1);
    valueAnimator.setDuration(300);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            float fraction = valueAnimator.getAnimatedFraction();
            int endX = (int) (-mOffset * fraction);
            doAnimationSet(endX, fraction);
        }
    });
    valueAnimator.start();
}

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void doAnimationSet(int dx, float fraction) {
    mContentSlide.scrollTo(dx, 0);
    mCheckBox.setScaleX(fraction);
    mCheckBox.setScaleY(fraction);
    mCheckBox.setAlpha(fraction * 255);
}

这样RecylerView 带有动态动画和静态动画的View就设计好了。

2、在bind方法中使用静态动画，动态动画对外提供方法调用：

private class SlideViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

    private SlideRelativeLayout mSlideRelativeLayout;
    private CheckBox mCheckBox;
    private ItemBean mItemBean;

    public SlideViewHolder(View itemView) {
        super(itemView);
        mSlideRelativeLayout = (SlideRelativeLayout) itemView.findViewById(R.id.item_root);
        mCheckBox = (CheckBox) itemView.findViewById(R.id.item_checkbox);
        itemView.setOnClickListener(this);
    }

    public void bind(ItemBean itemBean) {
        mItemBean = itemBean;
        mCheckBox.setChecked(itemBean.isChecked());
        switch (mState) {
            case NORMAL:
                mSlideRelativeLayout.close();
                break;

            case SLIDE:
                mSlideRelativeLayout.open();
                break;
        }
    }

    public void openItemAnimation() {
        mSlideRelativeLayout.openAnimation();
    }

    public void closeItemAnimation() {
        mSlideRelativeLayout.closeAnimation();
    }

可以看到静态动画在bind里调用，打开或者关闭是由mState变量决定的。而动态的滑动需要手动调用，那怎么来使用这些动画呢？

动态动画的使用方法：存储所有创建出来的ViewHolder，统一调用动态动画方法。并设置mState变量值，防止滑动时动画不能平滑衔接。

private List<SlideViewHolder> mSlideViewHolders = new ArrayList<>();

public void openItemAnimation() {
    mState = SLIDE;//
    for (SlideViewHolder holder : mSlideViewHolders) {
        holder.openItemAnimation();
    }
}

public void closeItemAnimation() {
    mState = NORMAL;
    for (SlideViewHolder holder : mSlideViewHolders) {
        holder.closeItemAnimation();
    }
}

调用：

private void editItems() {
    if ("编辑".equals(mRightTV.getText().toString())) {
        mRightTV.setText("取消");
        mSlideAdapter.openItemAnimation();
    } else if ("取消".equals(mRightTV.getText().toString())) {
        mRightTV.setText("编辑");
        mSlideAdapter.closeItemAnimation();
    }
}

总体就是：点击按钮 – 变量ViewHolder集合做动态动画，并设置mState变量 – 手机滑动屏幕走bind方法又是根据mState做静态动画。

动画从而平滑的衔接起来

动态动画起先，设置状态值，引导处理正确的静态动画，RecyclerView item的动画处理是不是变简单了。

还有，对item的特殊数据需要在对应的java bean里设置值，在bind方法取值设置到item中去。

最后贴出SlideAdapter的完整代码：

public class SlideAdapter extends RecyclerView.Adapter {

    public static final int NORMAL = 1000;
    public static final int SLIDE = 2000;
    private int mState = NORMAL;
    private List<ItemBean> mItemBeans;
    private List<SlideViewHolder> mSlideViewHolders = new ArrayList<>();

    public void openItemAnimation() {
        mState = SLIDE;
        for (SlideViewHolder holder : mSlideViewHolders) {
            holder.openItemAnimation();
        }
    }

    public void closeItemAnimation() {
        mState = NORMAL;
        for (SlideViewHolder holder : mSlideViewHolders) {
            holder.closeItemAnimation();
        }
    }

    public void setItemBeans(List<ItemBean> beans) {
        mItemBeans = beans;
        notifyDataSetChanged();
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        SlideViewHolder slideViewHolder = new SlideViewHolder(
                LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false));
        mSlideViewHolders.add(slideViewHolder);
        return slideViewHolder;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((SlideViewHolder) holder).bind(mItemBeans.get(position));
    }

    @Override
    public int getItemCount() {
        return mItemBeans == null ? 0 : mItemBeans.size();
    }

    private class SlideViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

        private SlideRelativeLayout mSlideRelativeLayout;
        private CheckBox mCheckBox;
        private ItemBean mItemBean;

        public SlideViewHolder(View itemView) {
            super(itemView);
            mSlideRelativeLayout = (SlideRelativeLayout) itemView.findViewById(R.id.item_root);
            mCheckBox = (CheckBox) itemView.findViewById(R.id.item_checkbox);
            itemView.setOnClickListener(this);
        }

        public void bind(ItemBean itemBean) {
            mItemBean = itemBean;
            mCheckBox.setChecked(itemBean.isChecked());
            switch (mState) {
                case NORMAL:
                    mSlideRelativeLayout.close();
                    break;

                case SLIDE:
                    mSlideRelativeLayout.open();
                    break;
            }
        }

        public void openItemAnimation() {
            mSlideRelativeLayout.openAnimation();
        }

        public void closeItemAnimation() {
            mSlideRelativeLayout.closeAnimation();
        }

        public void setCheckBox() {
            mCheckBox.setChecked(!mCheckBox.isChecked());
            mItemBean.setChecked(mCheckBox.isChecked());
        }

        @Override
        public void onClick(View v) {
            setCheckBox();
        }
    }
}

代码下载：https://github.com/ruzhan123/RecyclerViewItemAnimation

本文转自：
https://ruzhan123.github.io/2016/07/01/2016-07-01-01-对RecyclerViewItem做动画/

一叶飘舟
关注
  • 0
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
android：RecyclerView交互动画（上下拖动，左右滑动删除），Android程序员必看
2401_84149694的博客
04-07 1082
总之啊，家里没矿的同学们，如果你们想以后的日子过得好一些，多想想你们的业余时间怎么安排吧；技术方面的提升肯定是重中之重，但是技术外的一些“软实力”也不能完全忽视，很多时候升职确实是因为你的技术足够强，但也与你的“软实力”密切相关在这我也分享一份大佬自己收录整理的Android学习PDF+架构视频+面试文档+源码笔记，还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这些都是我闲暇还会反复翻阅并给下属员工学习的精品资料。
android listview item 动画效果,listview点击item动画效果
weixin_33218578的博客
05-26 808
问题如下图：第一次点击时，动画效果没错。但第二次点击时，两个白色的item都动了。貌似是上次的动画又播了一遍，求指导决方法。重写了baseAdapter，classMusicListAdapterextendsBaseAdapter。getView如下，仅设置了选中字体和非选中字体静态效果。classMusicListAdapterextendsBaseAdapter{@Overrid...
Android RecyclerView 使用大全 - 基础使用，item 动画，下拉刷新等
程序员徐师兄的博客
03-10 2812
是官方在5.0之后新添加的控件，推出用来替代传统的ListView和GridView列表控件。
Android RecyclerView+CheckBox点击条目选中,全选,全不选,选中删除,全部删除的操作.-附件资源
03-05
Android RecyclerView+CheckBox点击条目选中,全选,全不选,选中删除,全部删除的操作.-附件资源
Android RecycleView使用（CheckBox全选、反选、单选）
08-29
主要为大家详细介绍了Android RecycleView使用，CheckBox全选、反选、单选效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Recyclerview item上CheckBox，包括全选，取消全选，单选功能
12-30
Recyclerview item上CheckBox，包括全选，取消全选，单选功能
Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
08-30
"Android Recyclerview实现多选、单选、全选、反选、批量删除的功能" Android Recyclerview是一个功能强大且灵活的控件，广泛应用于移动应用程序中。本文将详细介绍如何使用Android Recyclerview实现多选、单选、...
android实现RecyclerView列表单选功能
08-27
Android中的RecyclerView列表单选功能是指在RecyclerView列表中实现单选功能，即用户只能选择列表中的一个item。下面详细介绍了实现RecyclerView列表单选功能的方法。 xml布局文件 首先，在xml布局文件中添加一个...
RecyclerView结合checkbox实现多选、全选、反选
weixin_44043199的博客
07-26 2718
·现在好多同仁都已经抛弃了listview，都在使用RecyclerView，至于为什么不明白的同学 可以自行百度哈。 我们见过好多列表里都带有单选多选操作的效果，但是也有童鞋好奇是怎么做的，接下来我们看一下实现过程。 activity_main.xml <android.support.v7.widget.Toolbar android:layout_width="...
一个用RecyclerView实现的画廊效果，被选中item居中放大，效果很自然。
05-22
一个用RecyclerView实现的画廊效果，被选中item居中放大，效果很自然。
Recyclerview常用样式，动画，点击事件
07-11
Recyclerview是v7包中的一个新控件，挺好用的，这个例子主要实现了Recyclerview的ListView横竖屏滑动，GridView的横竖屏滑动，瀑布流横竖屏，添加删除条目动画，设置点击事件和长按事件
多样化条目RecyclerView，以及多样化动画点击效果
04-27
多样化条目RecyclerView， 以及多样化动画点击效果
Android中RecyclerView的item运用覆盖view的方法实现item的动画效果
04-04
Android中RecyclerView的item运用覆盖view的方法实现item的动画效果，Android中RecyclerView的item运用覆盖view的方法实现item的动画效果
android 资产管理动图,这可能是你见过的迄今为止最简单的RecyclerView Item加载动画...
weixin_39913648的博客
05-25 373
如何实现RecyclerView Item动画？这个问题想必有很多人都会讲，我可以用ItemAnimator实现啊，这是RecyclerView官方定义的接口，专门扩展Item动画的，那我为什么要寻求另外一种方法实现呢？因为最近反思了一个问题，其实很多人都有这个思维定律，那就是官方的一定是好的，真的是这样吗？下面我来从另一个角度说明官方的ItemAnimator是真的不好用ItemAnimator...
android选中动画效果,Android实现炫酷的CheckBox效果
weixin_34439450的博客
05-25 1217
首先贴出实现的效果图：gif的效果可能有点过快，在真机上运行的效果会更好一些。我们主要的思路就是利用属性动画来动态地画出选中状态以及对勾的绘制过程。看到上面的效果图，相信大家都迫不及待地要跃跃欲试了，那就让我们开始吧。自定义View的第一步：自定义属性。我们把CheckBox取名为SmoothCheckBox，定义了几个等等要用到的属性。这一步很简单，相信大家都熟练了。接下来看一看onMeasur...
Android RecyclerView 详解（三） RecyclerView的动画实现（移除、添加、改变、移动）和自定义动画的实现
热门推荐
SuperBigLw的博客
11-29 2万+
Android RecyclerView 详解（三） RecyclerView的动画实现（移除、添加、改变、移动） 一丶添加删除时候的刷新问题 先上一下效果图吧 1.为了方便起见我们还是先添加三个按钮分别实现添加删除和改变 2.在Adapter中写调用方法并进行刷新 public void remove(int position){ list
RecyclerView添加选中效果
qq_27753689的博客
09-02 3215
RecyclerView添加选中效果两种方案通过selector通过ItemDecoration修改activity修改adapter创建VideoItemDecoration 两种方案 通过selector 该方案实现简单，适合背景图案是固定的item，需要注意一点：在adapter点击事件中调用notifyItemChanged(selectedPosition)来刷新界面 @Override...
Android Recyclerview+checkbox全选反选
最新发布
03-14
这个问题可以回答。你可以使用一个全选的checkbox来控制所有子checkbox的选中状态，当全选checkbox被选中时，遍历所有子checkbox并将它们的选中状态设置为true；当全选checkbox被取消选中时，遍历所有子checkbox并将它们的选中状态设置为false。对于反选，你可以遍历所有子checkbox，将它们的选中状态取反即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值