如何为Spinner创建自定义ViewHolder，实现类似RecyclerView的自定义布局？

你现在用默认的ArrayAdapter只能显示文本，要实现类似eBay那种带图片的Spinner选项，得自定义Adapter和item布局，咱们一步步来改：

第一步：创建Spinner的自定义Item布局 #

先写一个包含图片和文字的布局文件，命名为spinner_item_with_image.xml，放在res/layout目录下：

<?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:orientation="horizontal"
    android:padding="12dp"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/spinner_item_image"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:scaleType="centerCrop"
        android:layout_marginEnd="12dp"/>

    <TextView
        android:id="@+id/spinner_item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"/>

</LinearLayout>

这个布局里包含了一个ImageView用来显示属性对应的图片，TextView显示属性值，你可以根据需求调整尺寸、间距这些参数。

第二步：自定义Adapter并实现ViewHolder模式 #

接下来写一个自定义的Adapter，继承BaseAdapter，用ViewHolder来优化性能。这里假设你的属性值对应的图片可以通过某种方式获取（比如资源id、本地路径或者网络URL），先把Adapter的框架搭好：

public class ImageTextSpinnerAdapter extends BaseAdapter {
    private Context mContext;
    private List<String> mAttributeValues;
    // 用来映射属性值和对应图片的集合，你可以根据业务换成图片URL、本地路径等
    private Map<String, Object> mValueToImageMap;

    public ImageTextSpinnerAdapter(Context context, List<String> attributeValues, Map<String, Object> valueToImageMap) {
        mContext = context;
        mAttributeValues = attributeValues;
        mValueToImageMap = valueToImageMap;
    }

    @Override
    public int getCount() {
        return mAttributeValues.size();
    }

    @Override
    public Object getItem(int position) {
        return mAttributeValues.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(R.layout.spinner_item_with_image, parent, false);
            holder = new ViewHolder();
            holder.itemImage = convertView.findViewById(R.id.spinner_item_image);
            holder.itemText = convertView.findViewById(R.id.spinner_item_text);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        // 设置文本
        String currentValue = mAttributeValues.get(position);
        holder.itemText.setText(currentValue);

        // 设置图片
        Object imageSource = mValueToImageMap.get(currentValue);
        if (imageSource != null) {
            if (imageSource instanceof Integer) {
                // 本地资源id的情况
                holder.itemImage.setImageResource((Integer) imageSource);
            } else if (imageSource instanceof String) {
                // 网络图片的情况，这里用Glide举例，记得先添加依赖
                Glide.with(mContext)
                     .load((String) imageSource)
                     .placeholder(R.drawable.default_image)
                     .into(holder.itemImage);
            }
        } else {
            // 没有对应图片时显示默认图
            holder.itemImage.setImageResource(R.drawable.default_image);
        }

        return convertView;
    }

    // 下拉菜单的样式，如果和选中时的样式一样，直接复用getView逻辑即可
    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) {
        return getView(position, convertView, parent);
    }

    static class ViewHolder {
        ImageView itemImage;
        TextView itemText;
    }
}

第三步：修改原有代码，替换为自定义Adapter #

回到你原来的setProductPurchaseAttributes方法，把创建ArrayAdapter的部分换成自定义的ImageTextSpinnerAdapter：

@Override
public void setProductPurchaseAttributes() {
    selectedProductAttributesMap = selectedProduct.getAttributesList();
    int startingIndex = 6;
    if (!isProductAvailable) return;
    for (Map.Entry<String, List<String>> entry : selectedProductAttributesMap.entrySet()) {
        // 原来创建LinearLayout、TextView、Spinner的代码保持不变

        // 关键：替换ArrayAdapter为自定义Adapter
        // 先准备当前属性对应的【值-图片】映射集合，根据你的业务逻辑实现
        Map<String, Object> valueImageMap = getValueImageMapForAttribute(entry.getKey());
        ImageTextSpinnerAdapter adapter = new ImageTextSpinnerAdapter(this, entry.getValue(), valueImageMap);
        spinner.setAdapter(adapter);

        // 原来添加View到布局的代码保持不变
    }
}

// 这个方法需要你根据自己的业务逻辑实现，比如从服务器数据或本地资源中获取映射关系
private Map<String, Object> getValueImageMapForAttribute(String attributeKey) {
    Map<String, Object> imageMap = new HashMap<>();
    // 举个例子：如果属性是"颜色"，对应不同颜色的资源或图片URL
    if ("颜色".equals(attributeKey)) {
        imageMap.put("红色", R.drawable.red_color);
        imageMap.put("蓝色", "https://example.com/blue.png");
    } else if ("尺寸".equals(attributeKey)) {
        // 尺寸对应的图片逻辑
    }
    return imageMap;
}

补充说明 #

• 如果用网络图片，记得在AndroidManifest.xml中添加网络权限：<uses-permission android:name="android.permission.INTERNET"/>，并引入Glide/Picasso等图片加载库
• 可以根据需求调整spinner_item_with_image.xml的样式，比如添加分割线、调整文字颜色大小等
• 如果需要区分Spinner选中时和下拉菜单的样式，可以单独实现getDropDownView方法，加载不同的布局

内容的提问来源于stack exchange，提问作者Alon Shlider