根据屏幕大小调整按钮大小答案

【问题标题】：Adjust button sizes based on screen size根据屏幕大小调整按钮大小
【发布时间】：2017-12-02 20:36:29
【问题描述】：

我正在制作一个有 4-5 个按钮的主屏幕。我们知道 iphone 5/SE 的屏幕比 iphone 6 和 7 小。因此我们需要根据屏幕大小来扩大和缩小按钮大小。最好的方法或算法是什么？我使用按钮的固定最小尺寸来处理 iphone 5，但是当我们使用 iphone 6 和 7 时，这些固定的较小尺寸按钮看起来很奇怪。

【问题讨论】：

在 UITableViewController 而不是 UIViewController 中设计你的 UI，这样它就可以适应每个屏幕尺寸..
向我们展示您需要的布局？？ 5 个按钮水平或垂直布局。向我们展示你的方法，这将很有帮助。
希望这个链接能解决你的问题stackoverflow.com/questions/29308941/…
你可以使用堆栈视图来做这件事。
最佳解决方案是基于按钮是按列、行还是网格布局；它们是否具有需要满足所有尺寸的特定纵横比；以及它们之间是否有空间。填写这些详细信息，我们会更有帮助。您可能需要纵横比和比例大小限制。

标签： ios iphone swift user-interface

【解决方案1】：

有一种简单的方法可以根据屏幕大小调整按钮的大小。例如，正确的按钮尺寸在 iPhone 5 上，宽度为 320，高度为 568。

声明两个名为widthMultiplier和heightMultiplier的类变量（或全局变量，如果您想调整不同类中的按钮大小）：

var widthMultiplier = 0.0
var heightMultiplier = 0.0

在您的viewDidLoad 方法中，添加以下代码：

widthMultiplier = Double(self.view.frame.size.width) / 320
heightMultiplier = Double(self.view.frame.size.height) / 568

然后您可以根据此调整按钮的大小：

button.frame.size.width = button.frame.width * CGFloat(widthMultiplier)
button.frame.size.height = button.frame.height * CGFloat(heightMultiplier)

如果您愿意，您还可以调整该按钮的位置，使其与屏幕尺寸成正比，以便在 iPhone 6/7 更大的屏幕尺寸（例如 6/7 Plus）上显示在正确的位置：

button.frame.origin = CGPoint(x: button.frame.origin.x * CGFloat(widthMultiplier), y: button.frame.origin.y * CGFloat(heightMultiplier))

我希望这会有所帮助。

【讨论】：

【解决方案2】：

我使用了几种方法来解决这个问题：

声明模型中按钮的大小。该模型应该有一个返回按钮大小的方法，然后您可以为每个设备/屏幕大小修改该值。示例：

class MyLayoutClass {
    func getSizeForButton() -> CGSize {
        if UIDevice.current.userInterfaceIdiom == .pad {
            return CGSize(width: 100, height: 50)
        } else {
            // iphones
            let bounds = UIScreen.main.bounds
            // iphone SE has 320 width
            if bounds.width > 320 {
                return CGSize(width: 80, height: 50)
            } else {
                return CGSize(width: 50, height: 50) // smaller button size!
            }
        }
    }
}

然后，您可以使用此尺寸为您的按钮应用与屏幕相关的尺寸

另一种方法涉及界面生成器。您可以将所有按钮设置为彼此具有固定边距，然后将“等宽”关系应用于彼此。见截图示例：

【讨论】：

【解决方案3】：

好方法

您可以使用 UIStackView 或 UITableView 或 UICollectionView 进行相同的操作。在运行时根据屏幕大小动态定义UICollectionViewCell 或UITableViewCell 的大小。

手动方法

如果您已经添加了不同的 5 个按钮并且不想进行上述更改，那么 AutoLayout 可以帮您解决问题。如果您需要将它们水平放置，请为所有按钮定义Equal Widths 约束。同样，在垂直定位的情况下，您可以分配Equal Heights 约束。您甚至可以在运行时根据屏幕尺寸计算宽度或高度，在运行时设置它！！

希望对您有所帮助。快乐编码！

【讨论】：

【解决方案4】：

为@Juan 的好建议添加更多细节：

将按钮/对象设置为等宽：

我。选择其中一个按钮/对象

二。 Ctrl + 拖动到目标按钮/对象并从上下文菜单中选择“等宽”

【讨论】：

【解决方案5】：

您可以在 XCode 中使用带有约束的 AutoLayout 或 AutoResizing。

【讨论】：