根據屏幕尺寸調整按鈕大小

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 。