在 UITableViewCell 的左侧打勾

Posted 2023-03-11

【中文标题】在 UITableViewCell 的左侧打勾

【英文标题】：Put checkmark in the left side of UITableViewCell

【发布时间】：2012-01-06 09:03:36

【问题描述】：

我想做一些类似于 WiFi 设置页面的东西：当您点击表格单元格时，在单元格左侧放置一个复选框，并在右侧有一个显示按钮附件视图以显示更多详细信息。

我的问题：有没有办法在不构建自定义 UITableViewCell 的情况下将复选标记放在 UITableViewCell 的左侧？

【问题讨论】：

您的问题的答案是“否”。

【参考方案1】：

答案是肯定的！您不必为此创建自定义单元格或添加图像视图。要模拟复选框，您只需将复选框状态的 unicode 符号添加到单元格文本中。

我用于复选框的 unicode 符号是 \u2705 用于选中，\u2B1C 用于未选中（与 ios 5 上的 \U0001F533 几乎相同）。 iOS 渲染了几个unicode symbols as icons。

这里有一些其他符号：

@"\u2611", @"\u2B1C", @"\u2705", @"\u26AB", @"\u26AA", @"\u2714", @"\U0001F44D", @"\U0001F44E"

---

模仿Wi-Fi设置页面（带UITableViewCellStyleValue1）：

cell.textLabel.text = @"\u2001 Wi-Fi 1";
cell.detailTextLabel.text = @"\U0001F512 \u268A";

cell.textLabel.text = @"\u2001 Wi-Fi 2";
cell.detailTextLabel.text = @"\U0001F512 \u268C";

cell.textLabel.text = @"\u2713 Wi-Fi 3";
cell.detailTextLabel.text = @"\U0001F513 \u2630";

【讨论】：

顺便说一下，在 Swift 中，Unicode 字符需要使用大括号："\u2713"

选择更改和我有数据源怎么办？我是否需要每次都读取数据源以选择附加和删除复选标记？我不能使用 detailtextlabel，因为我用它来显示另一个信息..

这是一个很好的解决方案。 \u2713 字符似乎与设置应用程序中使用的复选标记完全匹配。特别是，我把它放在 UILabel 中并使用字体 UIFont.boldSystemFont(ofSize: 22) 并且据我所知它们是相同的！

【参考方案2】：

当然你可以这样做 :) 例如使用 UITableViewCellStyle

UITableViewCellStyleDefault,
// Simple cell with text label and optional image view
//(behavior of UITableViewCell in iPhoneOS 2.x)

...并在该“可选图像视图”中放置一个自定义“复选标记”图像。

【参考方案3】：

在 Swift 中，您可以按 Command + Ctrl + 空格键来显示表情符号和特殊字符，或者您可以复制这个 ✓ ✔️

【参考方案4】：

所以这是一种方法。在单元格的左边缘放置一个 UIImageView。不要将图像设置为空白作为开始。

然后，假设您正在为该 UITableViewCell 制作一个自定义单元格和一个类，请执行以下操作：

import UIKit

class MyCustoTableViewCell: UITableViewCell 

    @IBOutlet weak var commandOption: UILabel!
    @IBOutlet weak var checkMarkImage: UIImageView!

    // Sets a left side checkmark on a cell when selected 
    override func setSelected(selected: Bool, animated: Bool) 
        super.setSelected(selected, animated: animated)
        self.checkMarkImage.image = selected ? UIImage(named: "BlueCheck") : .None
        self.commandOption.font = selected ? UIFont(name: "Avenir-Heavy", size: 22) : UIFont(name: "Avenir-Book", size: 22)

        // more check mark on the right side
        // self.accessoryType = selected ? .Checkmark : .None
    

注意底部注释掉的是如果你想要右边的复选标记。当用户点击表格单元格时，会触发 super.setSelectedted 方法。确保你也实现了这个：

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) 
        // do any changes needed here or leave blank if just adding check
     

最后，确保您的 Assets 文件夹中有 @2x 和 @3x 选中标记 PNG 资产。请注意，在此示例中，它们被称为“BlueCheck”，但使用您的复选标记资产的名称。

这种方法可确保当用户选择新行时，当前单元格上的复选标记会消失。

在这种情况下，我将图像视图右侧的文本加粗，以进一步表明它是选定的行。

【参考方案5】：

没有。您必须为此创建一个自定义单元格。

【讨论】：

没有自定义单元格也是可能的。

【参考方案6】：

您应该查看UITableViewCell reference and Table View Guide。使用将editingAccessoryType 属性设置为UITableViewCellAccessoryCheckmark 的标准单元格样式。

【讨论】：

您也可以使用自定义视图

根据文档： UITableViewCellAccessoryCheckmark 该单元格的右侧有一个复选标记。问题要求将其放在左侧