RecyclerView动画的项目请点击请点击、动画、项目、RecyclerView

2023-09-05 06:13:15 作者:中了鹿晗の毒

我想实现我自己的recyclerview动画 - 我想实现这一目标而无需使用任何外部库。这是什么理论动画的应的样子。

I am trying to implement my own recyclerview Animation - I would like to achieve this without using any external libraries. Here is what the theoretical animation should look like.

在用户点击列表中的项目,并出现一个动画开辟了另一个视角。

The user clicks an item on the List and an animation occurs which opens up another View.

在一个较高的水平以最小的code,可能只是伪code什么的过程中,以创建一些动画这样呢?

On a high level with minimal code, possibly just pseudo code what would the process be in order to create some animation like that?

同时,我想指出,动画应该能够被反向要做的事,如果用户点击同一项目或其它项目

我不熟悉的 RecyclerView 类,并希望更多地了解它,并与它相关联的所有动画。

I am not that familiar with the RecyclerView class and would like to learn more about it and any animations associated with it.

推荐答案

解决方法:

我解决这个问题的方法是实现一个监听器 View.OnClickListener ViewHolder 类,扩展RecyclerView.ViewHolder 。因此,我们得到以下code:

The way I solved this problem was to implement a listener View.OnClickListener to the ViewHolder class which extends RecyclerView.ViewHolder. So we get the following code:

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 像这样:

The variables originalHeight and isViewExpanded are used in the animation process. In the constructor I initialize the view to the View.OnClickListener like so:

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 动画的对象。我们覆盖的onClick 方法,像这样来实现:

Now that the constructor has been taken care of we want to configure what happens when the user clicks on an individual RecyclerView item. The classes that will be useful here would be the ValueAnimator and the Animation objects. We override the onClick method like so to accomplish this:

@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();

    }

现在,当你触摸的 RecyclerView (假设你有一个 CardView 设置一个单独的cardview那么就应该扩大出去。请务必如果你想在你的XML文件(例如正确申报您的customView的 CardView ,当你触摸它,然后正确地分配customView其他视图下扩大下来,设置的知名度,走了,当你声明,然后在动画开始像这样在code以上然后设置能见度可见,使视图。

Now when you touch an individual cardview on the RecyclerView (assuming you have a CardView setup then it should expand out. Make sure to declare your customView properly in your xml file (example if you want the CardView to expand down when you touch it then properly assign the customView underneath the other views and set the visibility to gone when you declare it and then when the animation starts like so in the code above then set the visibility to Visible and enable the view.

希望这可以帮助别人。

Hope this can help someone out.