对RecyclerView Item做动画

参考于:由Ru_Zhan投稿的微信文章
添加动态位移,静态位移,缩放等动画,保证动画状态的平滑衔接。

RecyclerView,ListView这些具有Item复用性的View,想要对其Item做动画,需要注意以下几点:

  1. 如果要一点击,让所有Item做动画的效果。例如,上图的编辑和取消,这样的动态动画。可以对所有ViewHolder中的View直接做动画。但是需要在onBindViewHolder方法中对复用的item做静态动画,保证动画状态的平滑衔接。
  2. 每一个Item的特有属性。例如,上图checkbox的选中状态,都需要把状态字段放到对应的Java bean中,
    并在onBindViewHolder方法从java bean取出状态值,设置到view里。

1.对View的处理

首先,创建一个View,他是RecyclerView Item的根布局,名字为:SlideRelativeLayout,这里我们重写onFinishInflate,在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();
}

静态的打开动画

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

静态的关闭动画

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

对子View做动画我采取的策略是:使用属性动画,在每一帧动画里获取到对应的值,对子View做相应的动画,例如:动态的打开动画,onAnimationUpdate方法,显示每一贞动画都会回调一次。

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

2。对ViewHolder的处理

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

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

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

可以看到静态动画在bind里调用,打开或者关闭是由mState变量决定的。而动态的滑动需要手动调用:

那怎么来使用这些动画呢?

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

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中去。

在这个过程中遇到的问题

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

slideViewHolder = new SlideViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false));
每次都会崩这里后来发现是XML里我自定义View的名称写错了,但是在改bug的时候并没有报错所以改了很久,然后就顺便学习了一下[什么是Context][2]我们总是用到,但是否想过Context到底是什么呢?

[2]: http://www.jianshu.com/p/94e0f9ab3f1d

大胖倪的慢灵魂 wechat
感觉有用打赏一个呗~