当用户触摸它时如何在recyclerview中缩放一个项目？

Question

我正在开发一个应用程序，其中应该有一个垂直的 Recyclerview，其中的项目会在用户触摸时放大并在用户释放时缩小。

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

我该怎么做？ 提前致谢

Answer 1

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

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

<?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>

图像.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。我的意思是为什么点击时总宽度不会改变。

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

Answer 2

<!-- This initially-hidden ImageView will hold the expanded/zoomed version of
     the images above. Without transformations applied, it takes up the entire
     screen. To achieve the "zoom" animation, this view's bounds are animated
     from the bounds of the thumbnail button above, to its final laid-out
     bounds.
     -->

<ImageView
    android:id="@+id/expanded_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="invisible"
    android:contentDescription="@string/description_zoom_touch_close" />

访问https://developer.android.com/training/animation/zoom了解更多详情