如何在android studio中使用交错布局(或任何其他建议)在视图中创建图像集合

bzzcjhmw  于 2021-07-08  发布在  Java
关注(0)|答案(1)|浏览(439)

我需要在android的图像集合视图中显示图像集合。https://i.stack.imgur.com/mdzzi.png
二手回收站视图没有帮助
对于两个图像,视图是相等的两半
对于三幅图像,一个视图是视图的一半,另一半分成两半,依此类推
问题:
我需要添加一个单独的xml文件来查看一个图像,两个图像,最多5个图像在一个特定高度的网格中。
对于查看一个图像,xml将具有更大的宽度和高度==>跨度为1
对于两个图像,宽度和高度将不同,需要显示为相等的一半==>跨度为2
对于三个图像==>一个图像需要显示在视图的一半,另外两个显示在另一半==>这里如何为我的网格设置跨度计数
对于4个图像==>跨度是2
对于5张图片==>这里的跨度是多少?
如果1不是最佳实践,如何在视图中显示图像时添加样式并动态设置范围计数。
我添加了一个交错布局的回收视图。但是如果图像超过它就会滚动。如果我只在一定的宽度和高度设置布局,如何限制滚动?
更新:
现在移除了回收器视图,并使用percentrelativelayout来显示上面的图像。
这里的布局是可能的。但我有一个细节屏幕显示图像在下一个屏幕与刷卡。它不起作用,因为图像是在imageview中给出的,需要单击每个图像才能看到所有图像。
因为我已经把图像串起来了。我的showdetailimage是我的刷卡选项类。它适用于列表项中的其他项。
但是这个片段中的图像显示为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;

我用回收站?参考这里,但它没有帮助我在3和5图片。

oknwwptz

oknwwptz1#

作为StaggedGridLayoutManager的替代方法,可以使用percentrelativelayout(尽管已弃用)。例如,对于5-image行,布局为:

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

请参阅此处的完整示例

相关问题