java - 如何使用交错布局(或任何其他建议)在 android studio 中的 View 中制作图像集合

Question

我需要在android中的图像集合 View 中显示图像集合。 /image/mdZzI.png
使用过的回收器 View 没有帮助

对于 2 张图像， View 等于两半

对于三个图像，一个 View 是 View 的一半，另一半分为两半，依此类推

问题:

我是否需要添加一个单独的 XML 文件来查看一个图像，在具有特定高度的同一网格中的两个图像最多 5 个图像图像。

为了查看一张图像，xml 将具有更大的宽度和高度 ==> 跨度为 1

两个图像的宽度和高度会有所不同，需要显示为相等的一半 ==> 跨度为 2

对于三张图片 ==> 一张图片需要显示在一半的 View 中，另外两张需要在另一半中显示 ==> 这里如何为我的网格设置跨度计数

对于 4 个图像 ==> 跨度为两个

对于 5 张图像 ==> 这里的跨度是多少？

如 1 不是最佳实践 ，如何在 View 中显示图像时添加样式并动态设置跨度计数。

我添加了具有交错布局的回收器 View 。但是如果图像超过它会滚动。怎么可以如果我设置布局，我会限制滚动 只有在一定的宽度和高度？

Updation:

现在移除了回收器 View 并使用 PercentRelativeLayout 来显示上面的图像。
这里布局是可能的。但是我有一个详细信息屏幕，可以通过滑动在下一个屏幕中显示图像。它不起作用，因为图像是在 Imageview 中给出的，需要点击每个图像才能查看全部。
因为我已经给出了字符串中的图像。我的 ShowDetailImage 是我的滑动可选类。它适用于 listItems 中的其他人。
但是此 fragment 中的图像显示为 AppCompatImageView 为单个元素生成 onclick。
我可以在其中设置所有图像列表吗？当单击 image0 时，它需要显示所有图像而不单击每个图像，以防图像> 1
需要点击查看每张图片
代码引用

 protected View onInheritorCreateView(@NonNull LayoutInflater inflater,
                                         @Nullable ViewGroup container, @Nullable Bundle b) {
        int value = mAdapter.getCount();
        if (value ==1) {
            return inflater.inflate(R.layout.one_image, container,false);
        } else if (value == 2) {
            return inflater.inflate(R.layout.grid_two_image, container,false);
        } else if (value == 3) {
            return inflater.inflate(R.layout.three_images, container,false);
        } else if (value == 4) {
            return inflater.inflate(R.layout.grid_four_image, container,false);
        } else if (value == 5) {
            return inflater.inflate(R.layout.grid_five_images, container,false);
        } else {
            return inflater.inflate(R.layout.five_plus, container, false);
        }
    }


 public void onViewCreated(final View v, @Nullable Bundle b) {
        super.onViewCreated(v, b);
        int value1 =  mAdapter.getCount();
        if(value1 == 1) {
            Utils.setOnClickListener(mOnClickListener, v, R.id.image0);
        } else if (value1 == 2) {
            Utils.setOnClickListener(mOnClickListener, v, R.id.image0, R.id.image1);
        } else if (value1 == 3) {
            Utils.setOnClickListener(mOnClickListener, v, R.id.image0, R.id.image1, R.id.image2);
        } else if (value1 == 4 ) {
                Utils.setOnClickListener(mOnClickListener, v, R.id.image0, R.id.image1, R.id.image2,  R.id.image3);
        } else {
            Utils.setOnClickListener(mOnClickListener, v, R.id.image1, R.id.image2, R.id.image3, R.id.image4, R.id.image0);
        }
}



 private final View.OnClickListener mOnClickListener = new View.OnClickListener() {
      
        @Override
        public void onClick(View view) {
           
            switch (view.getId()) {
                case R.id.image0;
                final String url = "jpg image"
     ShowDetailImage.newInstance(url).showImage(getFragmentManager());
        case R.id.image1;
        final String url = "jpg image"
     ShowDetailImage.newInstance(url).showImage(getFragmentManager());
      case R.id.image2;
        final String url = "jpg image"
     ShowDetailImage.newInstance(url).showImage(getFragmentManager());
      case R.id.image3;
       final String url = "jpg image"
     ShowDetailImage.newInstance(url).showImage(getFragmentManager());
     default 
      break;

我使用 RecyclerView？引用 here但它在 3 和 5 张图像中对我没有帮助。

Answer 1

作为 StaggeredGridLayoutManager 的替代方案，可以使用 PercentRelativeLayout (即使它已被弃用)。例如，对于 5 张图像的行，布局将是:

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentRelativeLayout
    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="wrap_content"
    android:background="@android:color/holo_blue_light">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image0"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerInside"
        android:src="@android:mipmap/sym_def_app_icon"
        android:background="@android:color/white"
        app:layout_widthPercent="50%"
        app:layout_aspectRatio="100%"/>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerInside"
        android:src="@android:mipmap/sym_def_app_icon"
        android:background="@android:color/white"
        app:layout_widthPercent="25%"
        app:layout_aspectRatio="100%"
        app:layout_marginLeftPercent="50%"/>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerInside"
        android:src="@android:mipmap/sym_def_app_icon"
        android:background="@android:color/white"
        app:layout_widthPercent="25%"
        app:layout_aspectRatio="100%"
        app:layout_marginLeftPercent="75%"/>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerInside"
        android:src="@android:mipmap/sym_def_app_icon"
        android:background="@android:color/white"
        app:layout_widthPercent="25%"
        app:layout_aspectRatio="100%"
        app:layout_marginLeftPercent="50%"
        android:layout_below="@id/image1"/>

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerInside"
        android:src="@android:mipmap/sym_def_app_icon"
        android:background="@android:color/white"
        app:layout_widthPercent="25%"
        app:layout_aspectRatio="100%"
        app:layout_marginLeftPercent="75%"
        android:layout_below="@id/image2"/>

</androidx.percentlayout.widget.PercentRelativeLayout>

查看完整示例 here