按钮和自动布局：两件事...两个问题

Question

请看这张图片：

1'问题：我想在iPhone SE，8、8 Plus和X上构建它，但我做不到。

2'问题：我使用图像和文本插图将中央图像放置在文本上方。改变iPhone的设计，改变按钮的比例，还会改变文本和图像的排列方式吗？

谢谢。

Answer 1

从UIImageView和UILabel开始。将宽度（或高度）限制为所需的值（这是稍后用于更改图像大小的方法）。在UIImageView上添加“纵横比约束”并适当地对其进行约束（我使用了1:1的比率/乘数，您将需要根据原始图像进行计算

同时选择UIImageView中的UILabel和UIStackView和“换行”

根据需要调整UIStackView的属性

我使用上述方法允许文本或图像变大而不会限制其他元素

好吧，有趣的部分。复制并粘贴UIStackView，将第二个UIStackView对齐到第一个下方，这样它会生成一个“列”。选择两者并换行另一个UIStackView

更新新的UIStackView ...的属性

再次，我专注于允许每个小组扩展而又不限制另一个小组

现在我有一个看起来像...的容器

好吧，现在复制这个新的UIStackView并粘贴它，使其与后沿对齐（这并不重要，但是它将使其更易于描述）-这将为您提供2x2的网格。选择最靠前的两个UIStackView，然后再次包裹另一个UIStackView

同样，我将UIStackView属性从Aligment修改为Center，并且将Distribution修改为Equal Centering

好的，现在找点乐子。选择UIImageView中的三个（个人，我将顶部/左侧的一个作为主菜单）并删除其约束（可以使用“选定的查看/清除约束”选项）

选择一个“干净的” UIImageView和 Control 中的一个并拖动到“主” UIImageView，然后添加宽度和高度约束，这样它们将等于主人的

提示-您可以按住Command键选择多个约束

重复其他两个“干净的” UIImageView

我知道将UIStackView的最顶部约束到视图的中心，或者您可以用其他任何方式对其进行约束，但这使它成为主要的锚点。

好的，为什么？

好吧，现在您只需要更新一个约束即可更新所有图像！

尝试一下。选择“主” UIImageView，找到它的width约束（您可能需要转到属性表）并将其常量更改为其他常量。所有UIImageView都应该更新！

这时，我会将这个约束绑定到UIViewController上，以便您可以在代码中对其进行修改。

为什么用这种方式堆叠堆栈？

这是一个很好的问题，您的选择可能会有所不同，但是，我选择以这种方式构造它，以便如果文本值的宽度不同，则各列将保持相互输入。

有没有更简单的方法？

哦，我希望如何！好的，这不是一个“坏”的解决方案，但是它确实需要一些思考以及如何进行布局，不要问我如果文本分成多行会发生什么—因为它不美观。 >

“不同”的方法可能是使用UIView或容器视图，然后尝试以某种有意义的方式生成图像之间的约束（水平和垂直对齐）以及图像之间的文本约束，但这真的变得非常复杂...

然后如何将它们与父视图对齐？这就是为什么我使用UIView或容器视图的原因，但是随后变得更加复杂，因为您需要停止API定义自己的约束，并确保对顶部，底部，前缘和后缘

当文本长于/短于图像时会发生什么？因此，如果您只有一些基本的文字，那么以上内容应该可以很好地工作并且应该可以合理维护。

Answer 2

1'问题：我想在iPhone SE，8、8 Plus和X中构建它，但我做不到。
=>为什么？你怎么了？
2'：使用stackview的ok，但是被触摸时没有效果。您可以创建一个CustomButton类：

class ImageTopButton: UIButton
{
    override func layoutSubviews()
    {
        super.layoutSubviews()
        let size = self.frame.size
        let imageSize = self.imageView!.intrinsicContentSize
        let labelSize = self.titleLabel!.intrinsicContentSize

        let totalHeight = imageSize.height + labelSize.height
        let heightDiff = size.height - totalHeight
        let padding = heightDiff / 2
        let verticalPading:CGFloat = 10

        self.imageView!.center = CGPoint(x: size.width / 2, y: imageSize.height / 2 + padding - verticalPading/2)
        self.titleLabel!.center = CGPoint(x: size.width / 2, y: imageSize.height + padding + labelSize.height / 1.5 + verticalPading/2)
    }
}

您可以更改verticalPading并将UIButton的类设置为ImageTopButton
无论为1'：

希望它有用