java - StaggeredGridLayoutManager 显示类似 GridLayoutManager 的图像

Question

我正在尝试使用此代码创建StaggeredGrid。

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.userprofile_photos,container,false);
        setRetainInstance(true);
        photosRecycler=view.findViewById(R.id.userPhotos_recycler);
        layoutManager= new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);
        photosRecycler.setLayoutManager(layoutManager);
        photosRecycler.setHasFixedSize(true);
        adapter=new fetchPhoto_Adapter();
        photosRecycler.setAdapter(adapter);
        return view;
    }

fragment 布局

<?xml version="1.0" encoding="utf-8"?>


<RelativeLayout 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="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/userPhotos_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll" />
</RelativeLayout>

适配器

public class fetchPhoto_Adapter extends RecyclerView.Adapter<fetchPhoto_Adapter.ViewHolder>{

        @NonNull
        @Override
        public fetchPhoto_Adapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
            LayoutInflater inflater= (LayoutInflater) viewGroup.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View v = inflater.inflate(R.layout.photogallery,viewGroup,false);
            return new ViewHolder(v);
        }

        @Override
        public void onBindViewHolder(fetchPhoto_Adapter.ViewHolder viewHolder, int i) {
            Glide.with(getActivity()).load(ImageList.get(i)).apply(new RequestOptions().centerCrop()).into(viewHolder.image);

        }

        @Override
        public int getItemCount() {
                return ImageList.size();
        }

        public class ViewHolder extends RecyclerView.ViewHolder {
            ImageView image;
            public ViewHolder(View itemView) {
                super(itemView);
                image = itemView.findViewById(R.id.UserProfile_photoThumb);
            }
        }

    }

适配器项目布局 XML

<?xml version="1.0" encoding="utf-8"?>


        <ImageView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/UserProfile_photoThumb"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            />

我尝试使其StaggeredGrid，但使用上面的代码并进行了大量修改，例如将图像比例类型设置为 fitxy,centercrop,center 并将高度更改为 wrap_content 并修改 Glide 图像加载代码，所有这些都显示相同的输出。我想让我的 StaggeredGrid 像下面所需的输出一样。请帮帮我。

Answer 1

我已经在我的一个项目中实现了这一目标，所以我在这里与您分享一些代码 fragment 。尝试一下并告诉我。

class DemoActivity : ActivityBase() {

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_demo_activity)

    val layoutmanager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
    layoutmanager.gapStrategy = StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS
    rcv_staggered.layoutManager = layoutmanager
    rcv_staggered.setHasFixedSize(true)

    val listItem = ArrayList<DemoModel>()
    // This is dummy url for reference and in this image url I was 
    // getting image with different width and height
    val demoModel  = DemoModel("https://i.picsum.photos/id/237/200/400.jpg", "Title 1")
    val demoModel1 = DemoModel("https://i.picsum.photos/id/237/750/250.jpg", "Title 2")
    val demoModel2 = DemoModel("https://i.picsum.photos/id/237/500/250.jpg", "Title 3")
    val demoModel3 = DemoModel("https://i.picsum.photos/id/237/100/200.jpg", "Title 4")

    listItem.add(demoModel)
    listItem.add(demoModel1)
    listItem.add(demoModel2)
    listItem.add(demoModel3)

    rcv_staggered.adapter = DemoAdapter(listItem)
    }
}

<小时/>

像我们一样创建 recyclerView 适配器。

<小时/>

使用以下代码 fragment 加载图像:

Glide.with(holder.img.context)
        .load(listItem[holder.adapterPosition].color)
        .placeholder(R.color.black_alpha_10)
        .into(holder.img)

<小时/>

这是我的 recyclerview 项目布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="vertical">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"/>

</LinearLayout>

StaggeredGridLayoutManager 屏幕截图