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;
    }

片段布局

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

嗯，我已经在我的一个项目中实现了这一点，所以我在这里与您分享一些代码 sn-p。试试看，让我知道。

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 适配器。

---

使用下面的 sn-p 加载图像：

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 截图

Answer 2

将ImageView 包裹在RelativeLayout 中，应该没问题

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp">

    <ImageView
        android:id="@+id/UserProfile_photoThumb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

Answer 3

我认为他们在你使用过的滑行代码中存在问题

使用这个

Glide.with(mContext).load(imageList.get(i)).into(viewHolder.image);

不是这个

Glide.with(getActivity()).load(ImageList.get(i)).apply(new RequestOptions().centerCrop()).into(viewHolder.image);

我还对您的代码进行了一些其他更改，请查看以下示例

在这里找到完整的代码

MainActivity2 代码

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

import android.os.Bundle;

import com.google.android.flexbox.FlexDirection;
import com.google.android.flexbox.FlexboxLayoutManager;
import com.google.android.flexbox.JustifyContent;

import java.util.ArrayList;

public class MainActivity2 extends AppCompatActivity {
    RecyclerView photosRecycler;
    ArrayList<String> imageList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        photosRecycler = findViewById(R.id.userPhotos_recycler);
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);
        photosRecycler.setLayoutManager(layoutManager);
        photosRecycler.setHasFixedSize(true);

        imageList.add("https://i.stack.imgur.com/K8FFo.jpg?s=328&g=1");
        imageList.add("https://i.stack.imgur.com/Bpdap.jpg?s=328&g=1");
        imageList.add("https://i.stack.imgur.com/73QY4.jpg");
        imageList.add("https://i.stack.imgur.com/Bpdap.jpg?s=328&g=1");
        imageList.add("https://i.stack.imgur.com/K8FFo.jpg?s=328&g=1");
        imageList.add("https://i.stack.imgur.com/Bpdap.jpg?s=328&g=1");
        imageList.add("https://i.stack.imgur.com/K8FFo.jpg?s=328&g=1");

        fetchPhoto_Adapter adapter = new fetchPhoto_Adapter(imageList, this);
        photosRecycler.setAdapter(adapter);
    }

}

activity_main2 的布局

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


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

</LinearLayout>

fetchPhoto_Adapter

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;

import java.util.ArrayList;

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

    ArrayList<String> imageList = new ArrayList<>();
    Context mContext;

    public fetchPhoto_Adapter(ArrayList<String> imageList, Context mContext) {
        this.imageList = imageList;
        this.mContext = mContext;
    }

    @NonNull
    @Override
    public fetchPhoto_Adapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        LayoutInflater inflater = LayoutInflater.from(mContext);
        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(mContext).load(imageList.get(i)).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 version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/UserProfile_photoThumb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:layout_margin="2dp"
    android:scaleType="fitXY" />

输出