UIContextualAction 图标和文本对齐

Question

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

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

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

由于我们设置了图像，用户通常会在 table row:Swipe 带有图标的操作

上滑动时看到图标

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

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

除了两个操作之间的文本 alignment/spacing 之外，同时具有文本和图标不一定是问题。它似乎是导致此问题的字符串的长度。如果我将文本设置为相同的字符串，则两个操作均等对齐。我知道我可以将标题设置为 nil，这样可以防止在启用大文本时显示文本。

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

Answer 1

似乎没有答案显示文本的原因，但出现了 mis-aligned。

对于遇到此问题的任何人，我们最终将这些按钮的标题设置为 nil 以保留它们 "icon only"。

Answer 2

您需要使用图像 PNG。使其 canvas 大小增加/调整（白色 space 左右）直到得到结果

在我的例子中，我设置了

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

最终一切都完美对齐。

Answer 3

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

这将是正确的用例：

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

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

Answer 4

您可以使这些文本对齐而无需方法调配。

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

    var actionImages = ["TrashCan", "Folder"].map { UIImage(named: [=10=])! }
    let maxHeight = actionImages.map { [=10=].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…

结果是这样的：

仍然不完美（文字下方太多space），但可以忍受。

UIContextualAction 图标和文本对齐

UIContextualAction icon and text alignment

ios

swift

uicontextualaction