Xamarin Android：RecyclerView列表可切换心形保存按钮实现求助

嘿，我来帮你搞定这个可切换的心形收藏按钮需求！在Xamarin Android里实现这个功能其实挺直观的，我给你一步步拆解清楚：

首先得准备两个状态的图标：空心心形（未收藏）和红色填充心形（已收藏）。推荐用Android的Vector Drawable，适配不同屏幕分辨率更友好。你可以在Resources/drawable目录下添加两个xml文件：

• ic_heart_outline.xml：空心心形的矢量图
• ic_heart_filled.xml：红色填充的心形矢量图

如果不想自己画，也可以用系统自带的图标，不过自定义的样式更贴合你的App风格。

打开你的RecyclerView条目布局文件（比如item_object_layout.xml），添加一个ImageView作为收藏按钮，设置好基础属性：

<ImageView
    android:id="@+id/iv_favorite"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:src="@drawable/ic_heart_outline"
    android:clickable="true"
    android:focusable="true"
    android:padding="4dp"
    android:tint="@color/gray"/> <!-- 未选中时的灰色，可选 -->

这里开启clickable和focusable是为了让按钮能响应点击事件。

你的对象模型（比如叫MyDataObject）需要加一个布尔属性，用来标记当前是否被收藏：

public class MyDataObject
{
    // 你的原有属性，比如名称、ID等
    public string ObjectName { get; set; }
    public int ObjectId { get; set; }

    // 新增收藏状态标记
    public bool IsFavorite { get; set; } = false;
}

这是核心部分，我们要在Adapter里完成：根据状态设置图标、处理点击切换、持久化状态。

先定义ViewHolder #

public class ObjectViewHolder : RecyclerView.ViewHolder
{
    public TextView TvObjectName { get; set; }
    public ImageView IvFavorite { get; set; }

    public ObjectViewHolder(View itemView) : base(itemView)
    {
        TvObjectName = itemView.FindViewById<TextView>(Resource.Id.tv_object_name);
        IvFavorite = itemView.FindViewById<ImageView>(Resource.Id.iv_favorite);
    }
}

然后处理Adapter的绑定与点击事件 #

public class ObjectAdapter : RecyclerView.Adapter
{
    private List<MyDataObject> _dataList;
    private Context _context;

    public ObjectAdapter(List<MyDataObject> dataList, Context context)
    {
        _dataList = dataList;
        _context = context;
    }

    public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)
    {
        View itemView = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.item_object_layout, parent, false);
        return new ObjectViewHolder(itemView);
    }

    public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
    {
        var viewHolder = holder as ObjectViewHolder;
        var currentItem = _dataList[position];

        // 绑定基础数据
        viewHolder.TvObjectName.Text = currentItem.ObjectName;

        // 根据收藏状态设置图标
        if (currentItem.IsFavorite)
        {
            viewHolder.IvFavorite.SetImageResource(Resource.Drawable.ic_heart_filled);
            viewHolder.IvFavorite.SetColorFilter(Android.Graphics.Color.Red);
        }
        else
        {
            viewHolder.IvFavorite.SetImageResource(Resource.Drawable.ic_heart_outline);
            viewHolder.IvFavorite.SetColorFilter(Android.Graphics.Color.Gray);
        }

        // 处理点击切换事件
        viewHolder.IvFavorite.Click += (sender, e) =>
        {
            // 切换状态
            currentItem.IsFavorite = !currentItem.IsFavorite;
            // 更新UI
            UpdateFavoriteIcon(viewHolder.IvFavorite, currentItem.IsFavorite);
            // 持久化状态，避免重启App后丢失
            SaveFavoriteStatus(currentItem);
        };
    }

    // 封装图标更新逻辑
    private void UpdateFavoriteIcon(ImageView imageView, bool isFavorite)
    {
        if (isFavorite)
        {
            imageView.SetImageResource(Resource.Drawable.ic_heart_filled);
            imageView.SetColorFilter(Android.Graphics.Color.Red);
        }
        else
        {
            imageView.SetImageResource(Resource.Drawable.ic_heart_outline);
            imageView.SetColorFilter(Android.Graphics.Color.Gray);
        }
    }

    // 持久化收藏状态（这里用SharedPreferences举例）
    private void SaveFavoriteStatus(MyDataObject item)
    {
        var prefs = _context.GetSharedPreferences("AppFavorites", FileCreationMode.Private);
        var editor = prefs.Edit();
        // 用ObjectId作为唯一标识，比名称更可靠
        editor.PutBoolean($"favorite_{item.ObjectId}", item.IsFavorite);
        editor.Apply();
    }

    public override int ItemCount => _dataList.Count;
}

在加载数据列表的时候，记得从SharedPreferences里读取之前保存的状态，这样App重启后用户的收藏不会丢失：

private List<MyDataObject> LoadDataWithFavoriteStatus()
{
    // 假设这里是你从网络或本地加载原始数据的逻辑
    var rawData = new List<MyDataObject>
    {
        new MyDataObject { ObjectId = 1, ObjectName = "测试对象1" },
        new MyDataObject { ObjectId = 2, ObjectName = "测试对象2" }
    };

    // 读取保存的收藏状态
    var prefs = Application.Context.GetSharedPreferences("AppFavorites", FileCreationMode.Private);
    foreach (var item in rawData)
    {
        item.IsFavorite = prefs.GetBoolean($"favorite_{item.ObjectId}", false);
    }

    return rawData;
}

如果你的列表条目很多，每次OnBindViewHolder都绑定点击事件可能会有性能损耗。可以把点击事件绑定移到ViewHolder的构造函数里，通过回调传递点击位置，这样每个ViewHolder只绑定一次事件：

// 在Adapter里定义回调
public event EventHandler<int> FavoriteButtonClicked;

// 修改ViewHolder构造
public ObjectViewHolder(View itemView, EventHandler<int> clickCallback) : base(itemView)
{
    TvObjectName = itemView.FindViewById<TextView>(Resource.Id.tv_object_name);
    IvFavorite = itemView.FindViewById<ImageView>(Resource.Id.iv_favorite);

    // 绑定一次点击事件
    IvFavorite.Click += (sender, e) => clickCallback?.Invoke(this, AdapterPosition);
}

// OnCreateViewHolder时传递回调
public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)
{
    View itemView = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.item_object_layout, parent, false);
    return new ObjectViewHolder(itemView, FavoriteButtonClicked);
}

// 在Adapter构造里订阅回调
public ObjectAdapter(List<MyDataObject> dataList, Context context)
{
    _dataList = dataList;
    _context = context;

    FavoriteButtonClicked += (sender, position) =>
    {
        var currentItem = _dataList[position];
        currentItem.IsFavorite = !currentItem.IsFavorite;
        NotifyItemChanged(position); // 通知RecyclerView更新当前条目
        SaveFavoriteStatus(currentItem);
    };
}

// OnBindViewHolder里只需要设置图标状态
public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
{
    var viewHolder = holder as ObjectViewHolder;
    var currentItem = _dataList[position];

    viewHolder.TvObjectName.Text = currentItem.ObjectName;
    UpdateFavoriteIcon(viewHolder.IvFavorite, currentItem.IsFavorite);
}

这样代码更整洁，性能也更优～

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