UIContextualAction 图标和文本对齐

Posted 2023-02-24

【中文标题】UIContextualAction 图标和文本对齐

【英文标题】：UIContextualAction icon and text alignment

【发布时间】：2018-02-07 19:13:39

【问题描述】：

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

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，这样可以防止启用大文本时出现文本。

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

【问题讨论】：

您好，请告诉我您在 UIContextualAction 中设置的图标的大小。我被困在 UIContextualAction 中设置图像。请参阅我的问题帖子 ..***.com/questions/50677458/…

【参考方案1】：

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

这将是正确的用例：

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

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

【参考方案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…

结果是这样的：

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

【讨论】：

能否请您展示如何在上下文操作中添加图像和文本。

@AmbroseJesuraj 你刚刚设置了title 和image 的UIContextualAction。如果垂直空间有限，title 可能不会显示。

是的，我都设置了，但在 UI 中它只显示图标。所以我问你这个。如何获得更多的垂直空间。

@AmbroseJesuraj 让您的表格视图单元格更高。

@AmbroseJesuraj 我猜不够高。否则向 Apple 提交错误报告。

【参考方案3】：

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

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

【参考方案4】：

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

在我的情况下，我设置了

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

最后一切都完美对齐了。

【讨论】：

是的，你是对的，我也设置了高度 > 95