当用户触摸时，如何在recyclerview中缩放项目? [英] How to zoom an item in a recyclerview when the user touches it?

问题描述

我正在开发一个应具有垂直Recyclerview的应用程序，其中用户触摸时这些项目将放大，而用户释放它们则将其减少.

I am developing an application in which should have a vertical Recyclerview in which the items will be enlarged when touched by users and decreased when the user releases them.

在我的研究中，我还没有找到构建它的方法.与我寻找的最相似的是下面GIF中的Facebook反应.

In my research I have not found a way to build it. The most similar to what I look for are the Facebook reactions as in the GIF below.

我该怎么办?预先感谢

推荐答案

所有项目对用户都是可见的，没有可回收的视图.因此，恕我直言 RecyclerView 在这里是多余的.我建议您使用单独的 View .据我了解，这里的主要困难是动画.使用 Transition API 可以轻松完成此类动画.只需更改图像大小，然后使用 Transition 调用 TransitionManager.beginDelayedTransition ，即可动画化所有更改.在此示例中，更改很简单，默认的 AutoTransition 可以对其进行动画处理.这是我的实现:

Аll items are visible to user, there is no views to recycle. So IMHO RecyclerView here is redundant. I suggest you to use separate Views. As I understand the main difficulty here is animation. This type of animations can be easily done with Transition API. Just change image sizes then call TransitionManager.beginDelayedTransition with Transition which will animate all changes. In this example changes are simple, default AutoTransition can animate them. Here is my implementation:

import androidx.appcompat.app.AppCompatActivity;
import androidx.transition.AutoTransition;
import androidx.transition.Transition;
import androidx.transition.TransitionManager;

public class MainActivity extends AppCompatActivity {

    private ViewGroup parent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        parent = findViewById(R.id.parent);

        for (int i = 0; i < parent.getChildCount(); i++) {
            int position = i;
            parent.getChildAt(i).setOnClickListener(v -> {
                onImageClicked(position);
            });
        }
    }

    private void onImageClicked(int position) {
        Transition transition = new AutoTransition();
        TransitionManager.beginDelayedTransition(parent, transition);

        int SIZE_MAX = dpToPx(100);
        int SIZE_MIN = dpToPx(40);

        for (int i = 0; i < parent.getChildCount(); i++) {
            View childAt = parent.getChildAt(i);
            int size = i == position ? SIZE_MAX : SIZE_MIN;
            childAt.setLayoutParams(new LayoutParams(size, size));
        }
    }

    public int dpToPx(int dp) {
        return (int) (dp * getResources().getDisplayMetrics().density);
    }
}

activity_main.xml

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eee">

    <View
        app:layout_constraintBottom_toBottomOf="@+id/parent"
        app:layout_constraintLeft_toLeftOf="@+id/parent"
        app:layout_constraintRight_toRightOf="@+id/parent"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:background="#50b0" />

    <LinearLayout
        android:id="@+id/parent"
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:gravity="bottom"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <include layout="@layout/image" />
        <include layout="@layout/image" />
        <include layout="@layout/image" />
        <include layout="@layout/image" />
        <include layout="@layout/image" />
        <include layout="@layout/image" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

image.xml

image.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="50dp"
    android:layout_height="50dp"
    android:src="@drawable/circle"
    android:scaleType="centerCrop"/>

开始时，每个图像大小为50dp.总宽度为 6 * 50 = 300dp .单击后，选定的图像大小为100dp，其他图像大小为40dp，因此总宽度为 100 + 5 * 40 = 300dp .我的意思是为什么点击时总宽度不会改变.

At start each image size is 50dp. Total width is 6*50 =300dp. After click selected image size is 100dp, others are 40dp so total width is 100+5*40=300dp. I mean that why total width doesn't change while clicking.

您可以将GIF放入 ImageView 中，而不用 Glide 或其他库放入我的红色圆圈.另一件事是，您需要将动画逻辑从单击事件转移到触摸事件.

You can put GIFs into ImageView instead of my red circles with Glide or other library. Another thing is you need to move animation logic from click events to touch events.

这篇关于当用户触摸时，如何在recyclerview中缩放项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！