如何使用交错布局(或任何其他建议)在 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

使用过的回收器视图没有帮助

• 对于 2 个图像，视图等于二分之一
• 对于三个图像，一个视图是视图的一半，另一半分为两半，依此类推

问题:

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

• 对于查看一张图像，xml 将具有更大的宽度和高度 ==>跨度为 1
• 对于两个图像的宽度和高度会有所不同，需要显示为相等的一半 ==>跨度为 2
• 对于三个图像==>一个图像需要在视图的一半中显示，另外两个在另一半中显示 ==>这里将如何为我的网格设置跨度计数
• 对于 4 个图像 ==>跨度是两个
• 5 张图片 ==>这里的跨度是多少?

2. 如果 1 不是最佳做法，如何在视图中显示图像的同时添加样式并动态设置跨度计数.

3. 我添加了具有交错布局的回收器视图.但是如果图像超过它会滚动.如果我只在特定的宽度和高度设置布局，我如何限制滚动?

<块引用>

更新:

现在移除了回收器视图并使用 PercentRelativeLayout 来显示上图.

这里的布局是可能的.但是我有一个详细信息屏幕，可以通过滑动在下一个屏幕中显示图像.它不起作用，因为图像是在 Imageview 中给出的，需要点击每个图像才能查看全部.

因为我已经给出了字符串中的图像.我的 ShowDetailImage 是我的滑动可选类.它适用于 listItems 中的其他人.

但是此片段中的图像显示为 AppCompatImageView 使单个元素的点击.

我可以在其中设置所有图像列表吗?当单击 image0 时，它需要显示所有图像而不单击每个图像，以防图像>1

需要点击查看每张图片

代码参考

 protected View onInheritorCreateView(@NonNull LayoutInflater inflater,@Nullable ViewGroup 容器，@Nullable Bundle b) {int value = mAdapter.getCount();如果(值==1){返回 inflater.inflate(R.layout.one_image, container,false);} else if (value == 2) {返回 inflater.inflate(R.layout.grid_two_image, container,false);} else if (value == 3) {返回 inflater.inflate(R.layout.three_images, container,false);} else if (value == 4) {返回 inflater.inflate(R.layout.grid_four_image, container,false);} else if (value == 5) {返回 inflater.inflate(R.layout.grid_five_images, container,false);} 别的 {返回 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();如果(值1 == 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);} 别的 {Utils.setOnClickListener(mOnClickListener, v, R.id.image1, R.id.image2, R.id.image3, R.id.image4, R.id.image0);}}私有最终 View.OnClickListener mOnClickListener = new View.OnClickListener() {@覆盖公共无效onClick(查看视图){开关 (view.getId()) {案例 R.id.image0;最终字符串 url = jpg 图像"ShowDetailImage.newInstance(url).showImage(getFragmentManager());案例 R.id.image1;最终字符串 url = jpg 图像"ShowDetailImage.newInstance(url).showImage(getFragmentManager());案例 R.id.image2;最终字符串 url = jpg 图像"ShowDetailImage.newInstance(url).showImage(getFragmentManager());案例 R.id.image3;最终字符串 url = jpg 图像"ShowDetailImage.newInstance(url).showImage(getFragmentManager());默认休息;

我使用 RecyclerView?请参阅此处 但在 3 和 5 张图像中对我没有帮助.

解决方案

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

<androidx.percentlayout.widget.PercentRelativeLayoutxmlns: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.AppCompatImageViewandroid: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.AppCompatImageViewandroid: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.AppCompatImageViewandroid: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.AppCompatImageViewandroid: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.AppCompatImageViewandroid: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>

在此处查看完整示例

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

• For 2 images the view is in equal two half
• For three image one view is half of the view and another half splits into two halfs and so on

Questions:

1. Shall I need to add a separate XML file for viewing one image, two images upto 5 images images in a same grid with a particular height.

• For viewing one image, xml will have a greater width and height ==> span is 1
• For two image width and height will differ and need to show as equal half ==> span is 2
• For three images ==> one image needs to shown in half of the view and another two in other half ==> Here how the span count will be set for my grid
• for 4 images ==> span is two
• for 5 images ==> what is the span here?

2. 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.

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

Updation:

Now removed recycler view and used PercentRelativeLayout to show the above image.

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.

Because I have given the image in string. My ShowDetailImage is my swiping optionable class. It works well for others which are in listItems.

But the image in this fragment is shown as AppCompatImageView makes the onclick for a single element.

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

For code refer

 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;

I use RecyclerView? Refer here But it did not help for me in 3 and 5 images.

解决方案

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>

See full example here

这篇关于如何使用交错布局(或任何其他建议)在 android studio 中的视图中制作图像集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！