Question

我有一个指向具有不同尺寸的图片的网址列表。我想以交错的垂直网格显示它们，拉伸每个图像的宽度以占据单行并拉伸高度以包围缩放图像。一切都应该是这样的：

http://www.technotalkative.com/wp-content/uploads/2014/04/staggered-gridview-in-android.png

我使用的是RecycleView和StaggeredGridLayoutManager。不幸的是，我无法让它运作良好。

这是我要展示的项目的类别：

public class Photo {
    public String title;
    public String url;

    public Photo(String title, String url) {
    this.title = title;
    this.url = url;
    }
}

项目的相应XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:margin="5dp">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"/>

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageview"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:background="@color/transparant_white"
        android:gravity="center_horizontal"
        android:textSize="18sp"/>

</RelativeLayout>

适配器：

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

    private final static String TAG = PhotoAdapter.class.getSimpleName();

    private Context mContext;
    private List<Photo> mPhotos;

    public PhotoAdapter(Context context, List<Photo> photos) {
        super();
        mContext = context;
        mPhotos = photos;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_photo, viewGroup, false);
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
        Photo photo = mPhotos.get(i);
        Picasso.with(mContext).load(photo.url).into(viewHolder.imageView);
        viewHolder.textView.setText(photo.title);
    }

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

    public static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        TextView textView;
        public ViewHolder(View itemView) {
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.imageview);
            textView = (TextView) itemView.findViewById(R.id.textview);
        }
    }
}

所有被调用的片段：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                     Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_main, container, false);

    PhotoAdapter photoAdapter = new PhotoAdapter(getActivity(), createItems());

    StaggeredGridLayoutManager staggeredGridLayoutManager 
             = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);

    RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerview);
    recyclerView.setAdapter(photoAdapter);
    recyclerView.setLayoutManager(staggeredGridLayoutManager);

    return rootView;
}

前几张图片看起来不错，但是当我向下滚动时，所有图片开始显示在单列中。然后，当我滚动列表的绝对顶部时，所有内容放在一起，图像显示在两列中，直到我向下滚动到我还没有下载的图像。问题是我在下载之前不知道每张图片的大小，所以我无法提前设置每个图片的大小。

希望有人之前遇到并解决了这个问题，或者只是比我更了解这个问题，并且可以帮助我让它发挥作用。

我也尝试过Etsy whit的Staggered GridView相似甚至更糟的结果。

Answer 1

我找到了一点修理只需添加一点余量，即1dp即可解决问题例如，我的项目视图：

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:layout_margin="1dp"
  android:scaleType="centerCrop"
  android:adjustViewBounds="true" />

参考：https://www.reddit.com/r/androiddev/comments/2xd459/having_issues_creating_a_working_staggered_grid/

将异步图像下载到StaggeredGridLayout

1 个答案: