如何使用交错布局(或任何其他建议)在android studio中的视图中收集图像 [英] How to make a collection of images with in a view in android studio using staggered layout (Or any other suggestion)
问题描述
我需要在android中的图像集合视图中显示图像集合. https://i.stack.imgur.com/mdZzI.png
I need to show the collection of image in a collection view of images in android. https://i.stack.imgur.com/mdZzI.png
使用过的回收站视图无济于事
Used recycler view not helped
- 对于2张图像，视图等于两半
- 对于三个图像，一个视图是视图的一半，另一半则分为两个一半，依此类推
问题:
- 我需要添加一个单独的XML文件来查看一个图像，两个图像，还是在同一网格中具有特定高度的5个图像图像.
- 要查看一个图像，xml将具有更大的宽度和高度==>跨度是1
- 对于两个图像，宽度和高度将有所不同，需要显示为相等的一半==>跨度是2
- 对于三个图像==>一个图像需要在视图的一半中显示，另一幅需要在另一半视图中显示.以下是如何为我的网格设置跨度计数
- 用于4张图像==>跨度是两个
- 5张图片==>跨度是多少?
-
如果 1不是最佳做法，如何在视图中显示图像时添加样式并动态设置跨度计数.
If 1 is not a best practice, how can I add the styles while showing the images in the view and set span count dynamically.
我添加了带有交错布局的回收站视图.但是，如果图像超出，则滚动.如果仅在特定的宽度和高度上设置布局，如何我限制滚动?
I have added recycler view with a staggered layout. But If the image exceeds it scrolls. How can I restrict the scrolling if I set the layout only in a certain width and height?
更新:
现在删除了回收站视图，并使用PercentRelativeLayout来显示以上图像.
Now removed recycler view and used PercentRelativeLayout to show the above image.
可以在这里布局.但是我有一个详细信息屏幕，可在下一个屏幕中通过滑动显示图像.由于图片是在Imageview中给出的，因此需要进行点击以查看全部图片.
Here layout are possible. But I have a detail screen to show the image in next screen with swiping. It not works because of the image is given in Imageview and need to onClick the each image to see all.
因为我以字符串形式给出了图像.我的ShowDetailImage是我的可刷选课.它适用于listItems中的其他对象.
Because I have given the image in string. My ShowDetailImage is my swiping optionable class. It works well for others which are in listItems.
但是此片段中的图像显示为AppCompatImageView，使onclick成为单个元素.
But the image in this fragment is shown as AppCompatImageView makes the onclick for a single element.
我可以在其中设置所有图像列表吗?当单击image0时，如果图像是> ;，则需要显示所有图像而无需单击每个图像.1
Can i set the all list of images in that. while click image0 it needs to show all the images without clicking each one in case the image is > 1
需要点击并查看每张图片
Need to click and see each image
有关代码，请参见
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吗?请在此处，但这对3张和5张图像没有帮助.
I use RecyclerView? Refer here But it did not help for me in 3 and 5 images.
推荐答案
作为StaggeredGridLayoutManager的替代方案，可以使用
As an alternative to StaggeredGridLayoutManager, it is possible to use PercentRelativeLayout (even though it is deprecated). For example, for the 5-image row the layout would be:
<?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>
在此处
这篇关于如何使用交错布局(或任何其他建议)在android studio中的视图中收集图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
