根据屏幕尺寸调整按钮大小

Question

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

Answer 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))

我希望这有帮助。

Answer 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!
            }
        }
    }
}

然后，您可以使用此大小将依赖于屏幕的大小应用于按钮

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

Answer 3

好方法

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

手动方法

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

希望能帮助到你。快乐编码!!

Answer 4

将更多细节添加到@ Juan的好建议中：

1. 要将按钮/对象设置为相等的宽度： 一世。选择其中一个按钮/对象 II。按Ctrl +拖动到目标按钮/对象，然后从上下文菜单中选择“等宽”

Answer 5

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