确保 UIButton.Configuration.showsActivityIndicator 为 true 和 false 时按钮高度一致

Question

使用以下代码，使用默认的大动态字体大小时，按钮高度为 28.33。当您点击按钮启用

showsActivityIndicator

时，高度会意外增加到 34.33。字体大小越小，用户的动态字体大小越大，按钮高度不一致就越明显。

let button = UIButton(configuration: {
    var config = UIButton.Configuration.filled()
    config.title = "Button"
    config.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer {
        var container = $0
        container.uiKit.font = .preferredFont(forTextStyle: .caption1)
        return container
    }
    return config
}())
button.addAction(UIAction() { _ in
    button.configuration?.showsActivityIndicator = true
}, for: .touchUpInside)

问题似乎是按钮高度由内容插图决定，而这些插图是相对于按钮中最大内容的。最初，按钮中的唯一内容是标题文本，因此它的高度较小，然后添加活动指示器，其高度比标题文本更大，因此按钮高度增加，以确保相对于内容插入得到尊重到最高的内容。有没有办法解决这个问题，使按钮高度在非加载和加载状态下保持不变（除了强制固定高度约束之外）？也许有一种方法可以将内容插入更改为始终相对于非加载状态下的活动指示器高度？

Answer 1

一个选项——可能适合你...

来自苹果文档：

显示活动指示器

一个布尔值，用于确定按钮是否显示活动指示器而不是图像。

“微调器”的默认大小在 @2x 显示屏上为

20.5 x 20.5

，在 @3x 显示屏上为

20.333... x 20.333...

。

因此，我们可以设置该尺寸的清晰图像，并调整

.contentInsets

，以便在活动指示器未显示时标题水平居中。

类似这样的：

let v: CGFloat = 20.0 + 1.0 / UIScreen.main.scale
// create a clear image
let img = UIGraphicsImageRenderer(size: .init(width: v, height: v)).image { _ in }
let button = UIButton(configuration: {
    var config = UIButton.Configuration.filled()
    config.title = "Button"
    config.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer {
        var container = $0
        container.uiKit.font = .preferredFont(forTextStyle: .caption1)
        return container
    }
    config.image = img
    // default instets are 7, 12, 7, 12
    //  so we need to add the image width to the right
    config.contentInsets = .init(top: 7.0, leading: 12.0, bottom: 7.0, trailing: 12.0 + v)
    return config
}())

button.addAction(UIAction() { _ in
    button.configuration?.showsActivityIndicator.toggle()
}, for: .touchUpInside)