项目上的RecyclerView动画单击

Question

我正在尝试实现我自己的recyclerview动画 - 我想在不使用任何外部库的情况下实现这一点.这是理论动画应该是什么样子.

用户单击列表上的项目并发生动画,从而打开另一个视图.

在具有最少代码的高级别,可能只是伪代码,为了创建这样的动画,该过程将是什么？

另外我想要注意的是,如果用户点击相同的项目或其他项目,动画也应该能够反向完成

我对这门RecyclerView课程并不熟悉,并希望了解更多关于它以及与之相关的任何动画.

Answer 1

解:

我解决这个问题的办法是实现一个监听器View.OnClickListener的ViewHolder类extends RecyclerView.ViewHolder.所以我们得到以下代码:

public static class ExampleViewHolder extends RecyclerView.ViewHolder 
    implements View.OnClickListener {

    private int originalHeight = 0;
    private boolean isViewExpanded = false;
    private YourCustomView yourCustomView

    // ..... CODE ..... //

}

变量originalHeight和isViewExpanded用于动画过程.在构造函数中,我将视图初始化为View.OnClickListener:

public ExampleViewHolder(View v) {
     super(v);
     v.setOnClickListener(this);

     // Initialize other views, like TextView, ImageView, etc. here

     // If isViewExpanded == false then set the visibility 
     // of whatever will be in the expanded to GONE

     if (isViewExpanded == false) {
         // Set Views to View.GONE and .setEnabled(false)
         yourCustomView.setVisibility(View.GONE);
         yourCustomView.setEnabled(false);
     }

 }

既然构造函数已经处理好了,我们想要配置用户点击单个RecyclerView项目时会发生什么.这里有用的类将是ValueAnimator和Animation对象.我们覆盖这样的onClick方法来完成这个:

@Override
public void onClick(final View view) {
    // If the originalHeight is 0 then find the height of the View being used 
    // This would be the height of the cardview
    if (originalHeight == 0) {
            originalHeight = view.getHeight();
        }

    // Declare a ValueAnimator object
    ValueAnimator valueAnimator;
        if (!mIsViewExpanded) {
            yourCustomView.setVisibility(View.VISIBLE);
            yourCustomView.setEnabled(true);
            mIsViewExpanded = true;
            valueAnimator = ValueAnimator.ofInt(originalHeight, originalHeight + (int) (originalHeight * 2.0)); // These values in this method can be changed to expand however much you like
        } else {
            mIsViewExpanded = false;
            valueAnimator = ValueAnimator.ofInt(originalHeight + (int) (originalHeight * 2.0), originalHeight);

            Animation a = new AlphaAnimation(1.00f, 0.00f); // Fade out

            a.setDuration(200);
            // Set a listener to the animation and configure onAnimationEnd
            a.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {

                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    yourCustomView.setVisibility(View.INVISIBLE);
                    yourCustomView.setEnabled(false);
                }

                @Override
                public void onAnimationRepeat(Animation animation) {

                }
            });

            // Set the animation on the custom view
            yourCustomView.startAnimation(a);
        }
        valueAnimator.setDuration(200);
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                view.getLayoutParams().height = value.intValue();
                view.requestLayout();
            }
        });


        valueAnimator.start();

    }

现在,当您触摸单个cardview时RecyclerView(假设您有一个CardView设置,那么它应该展开.确保在您的xml文件中正确声明您的customView(例如,如果您希望在CardView触摸它时向下展开,然后正确分配customView在其他视图下面,并在声明它时将可见性设置为已消失,然后在上面的代码中如此动画启动时将可见性设置为Visible并启用视图.

希望这可以帮助别人.