仿知乎广告效果，一个 RecyclerView Item 中插入图片的方法

Android

2023-10-29 11:21:28

引言

最近，我被知乎上的广告深深吸引住了。那些巧妙的广告图片，不仅能吸引眼球，还能传达出产品信息。于是，我决定尝试一下，在自己的项目中实现类似的效果。

具体实现

要实现仿知乎广告效果，我们需要满足以下几点要求：

图片应该是一次性加载进来的。
图片的大小应该与 RecyclerView Item 的高度相同。
图片应该在 RecyclerView Item 中居中显示。

步骤

1. 在 RecyclerView 的 Adapter 中添加一个字段来存储图片

private List<String> imageUrls;

2. 在 Adapter 的 onBindViewHolder() 方法中，将图片加载到 ImageView

@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
    Glide.with(holder.itemView.getContext())
            .load(imageUrls.get(position))
            .into(holder.imageView);
}

3. 在 RecyclerView 的 Item 布局文件中，添加一个 ImageView

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

</LinearLayout>

4. 在 RecyclerView 的 LayoutManager 中，设置 Item 的高度

@Override
public void onMeasure(@NonNull RecyclerView.Recycler recycler, @NonNull RecyclerView.State state, int widthSpec, int heightSpec) {
    super.onMeasure(recycler, state, widthSpec, heightSpec);

    int height = MeasureSpec.getSize(heightSpec);
    setMeasuredDimension(widthSpec, height);
}

效果

经过以上步骤，我们就可以在 RecyclerView 中实现仿知乎广告的效果了。图片会一次性加载进来，并且会根据 Item 的高度调整大小，居中显示。

优化

为了进一步优化性能，我们可以使用以下技巧：