UIContextualAction 图标和文本对齐

Question

在测试我们的应用时，我们遇到了一个有趣的错误。我们在表格中配置了一些滑动操作，如下所示：

let retryAction = UIContextualAction(style: .destructive, title: "Remove")
retryAction.image = UIImage(named: "iconUploadRemove")

let retryAction = UIContextualAction(style: .normal, title: "Retry")
retryAction.image = UIImage(named: "iconUploadRetry")

由于我们设置了图片，所以用户在表格行上滑动时通常会看到图标：Swipe Action with Icons

但是如果用户增加他们的文本大小

然后动作标题和图标一起显示

除了两个动作之间的文本对齐/间距之外，同时拥有文本和图标不一定是问题。它似乎是导致这种情况的字符串的长度。如果我将文本设置为相同的字符串，则两个操作都对齐。我知道我可以将标题设置为 nil，这样可以防止启用大文本时出现文本。

但是为什么文本会以这种模式显示？是否可以在每个操作按钮上正确对齐文本和图标显示？

Answer 1

我今天遇到了完全相同的问题。根本原因是 UIKit 允许 UILabel 进行 2 行，即使它不需要：

这将是正确的用例：

所以我看到的唯一解决方案是丑陋的。覆盖、调动、钻取子视图，直到我们找到label subclass，等等...... 而且我不清楚什么（如果不是全部）解决方案会让你被商店拒绝。

或者干脆不使用这个新的 iOS 11 API 并坚持使用旧的 UITableViewRowAction。

Answer 2

您可以在不调整方法的情况下使这些文本对齐。

要实现它，您必须将所有动作图像设置为相同的高度。您可以在运行时执行此操作：

    var actionImages = ["TrashCan", "Folder"].map { UIImage(named: $0)! }
    let maxHeight = actionImages.map { $0.size.height }.max()!

    for (index, image) in actionImages.enumerated() where image.size.height < maxHeight {
        let size = CGSize(width: image.size.width, height: maxHeight)
        actionImages[index] = UIGraphicsImageRenderer(size: size).image { context in
            var centralizedRect = CGRect(origin: .zero, size: image.size)
            centralizedRect.origin.y = (maxHeight - image.size.height) / 2
            image.draw(in: centralizedRect)
        }
    }

    // set images to your UIContextualAction…

结果是这样的：

仍然不完美（文字下方空间过多），但可以忍受。

Answer 3

对于文本出现的原因似乎没有答案，而且似乎没有对齐。

对于遇到此问题的任何人，我们最终将这些按钮的标题设置为 nil，以使它们保持“仅图标”。

Answer 4

您需要使用图像 PNG。使其画布大小增加/调整（周围的空白），直到你得到结果

在我的情况下，我设置了

单元格高度：92 图标图像宽度：32 图标图像高度：40

最后一切都完美对齐了。