如何使用交错布局（或任何其他建议）在 android studio 的视图中制作图像集合
Posted
技术标签:
【中文标题】如何使用交错布局（或任何其他建议）在 android studio 的视图中制作图像集合【英文标题】：How to make a collection of images with in a view in android studio using staggered layout (Or any other suggestion) 【发布时间】：2021-02-12 21:07:30 【问题描述】：我需要在 android 的图像集合视图中显示图像集合。 https://i.stack.imgur.com/mdZzI.png
使用过的回收站视图没有帮助
对于 2 张图像，视图是相等的两半 对于三个图像，一个视图是视图的一半，另一半分为两半，依此类推问题：
-
我是否需要添加一个单独的 XML 文件来查看一个图像，两个图像最多 5 个图像图像在具有特定高度的同一网格中。
如果 1 不是最佳做法，如何在视图中显示图像的同时添加样式并动态设置跨度计数。
我添加了交错布局的回收站视图。但是如果图像超过它会滚动。 如果我将布局设置为仅在一定的宽度和高度，如何限制滚动？
更新：
现在移除了回收站视图并使用 PercentRelativeLayout 来显示上图。
这里的布局是可能的。但我有一个细节屏幕，可以通过滑动在下一个屏幕中显示图像。它不起作用，因为图像是在 Imageview 中给出的，需要单击每个图像才能查看全部。
因为我已经给出了字符串中的图像。我的 ShowDetailImage 是我的滑动可选类。它适用于 listItems 中的其他人。
但此片段中的图像显示为 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 图像中对我没有帮助。
【问题讨论】：
我认为你应该在 recyclerview 的布局管理器上使用 StaggeredGridLayoutManager，这里：***.com/questions/33316293/… 但回收站视图会滚动显示视图中的所有项目。我想。我可以使用它来实现将在图像上方显示计数的视图吗？ A RecyclerView 将进行一般的网格化，但对于单个视图，您必须进行自定义以执行在项目内的视图之间分割高度和宽度的逻辑。 @AhmadSattout 所以使用 recyclerview 是可能的。你有这方面的示例代码吗？ 我没有，但通过一些调整是可行的。可悲的是现在不能 Studio，但是如果您不知道如何自定义视图组，那么我认为您应该进行更多研究以实现此布局 【参考方案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_
android:layout_
android:background="@android:color/holo_blue_light">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/image0"
android:layout_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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
【讨论】：
在我的情况下，我需要为 1 或 2 个图像或 3 个图像和最多 5 个图像显示相同的视图。但是上面的示例具有每个 id 的每个。我不需要一个静态的。生成的有效载荷将具有 1 或 2 或 3 或 5 及以上。但我需要在所有条件下在窗口中模拟。以上仅适用于 5，如果我得到 6 及以上则不起作用。 将前五个图像映射到 5 个 id 是否很好。如果是这样，我是否需要对 1 到 4 张图像重复上述操作？ 这种方法不适用于 6 个或更多图像。但是对于前 5 张图像，您可以对所有布局文件使用相同的 id：image1、image2、...、image5。在这种情况下，第一个 imageView 将始终是view.findViewById<ImageView>(R.id.image1)。
所以我需要对不同的 xml 文件使用相同的 id（即）对于 1 个图像 image1。
感谢您的回复，您知道如何使用回收站视图使用交错布局设置宽度和高度吗？另外，如果我按照您的想法设置上述内容，我需要为每个 ID 映射每个图像。我说的对吗？以上是关于如何使用交错布局（或任何其他建议）在 android studio 的视图中制作图像集合的主要内容，如果未能解决你的问题，请参考以下文章