景觀方向的不同視圖/布局

Question

我正在構建一個計算器應用程序並讓它在縱向模式下工作。 但是，我希望用戶在切換到橫向模式時有更多選項/功能。 換句話說，整個布局必須改變，因為與縱向模式相比，橫向模式會有更多的按鈕。

我已經使用屬性檢查器下的installed屬性設法做到了這一點。 以下是我遇到的問題：

當我以縱向模式運行應用程序並將其旋轉為橫向時，我將顯示按鈕，但它們是重疊的。 這是一個演示（只需等待 gif 重新啟動）：

當我在橫向模式下運行應用程序時，它會正確顯示所有按鈕，但是一旦我再次將其旋轉為縱向然后再旋轉回橫向，就會發生與 #1 相同的問題。 這是一個演示（只需等待 gif 重新啟動）：

我究竟做錯了什么？ 我該如何解決這個問題？

Answer 1

這是我自 iOS9 以來一直在做的事情。 完整代碼，您使用的IB不承擔（其實我覺得你不應該），並應幫助你自動布局是如何工作的。 當心，這確實需要一些自動布局和 Swift 的知識。 這也涉及一個非常簡單的UIButton示例。

首先，聲明兩個約束數組，通常在視圖控制器中：

var landscape = [NSLayoutConstraint]()
var portrait = [NSLayoutConstraint]()
var myButton = UIButton()

接下來，設置常量約束並設置活動：

myButton.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(myButton)
myButton.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10).isActive = true
myButton.heightAnchor.constraint(equalToConstant: 40).isActive = true
myButton.widthAnchor.constraint(equalToConstant: 200).isActive = true

到現在為止還挺好。 您已經創建了一個按鈕，將其添加到 VC 視圖中，並聲明其大小為 40x200。 您還聲明它錨定到父級的safeAreaLayoutGuide頂部錨點。

現在，是時候發揮“魔法”了。 您希望根據方向將此UIButton從底部向右移動。 （請注意，雖然某些覆蓋可以在 iPhone 上運行，但在全屏時 iPad 將始終具有“常規”尺寸類別 - 全屏 - 無論方向如何！）

您需要做的第一件事是將剩余的約束放入您聲明的數組中。

portrait.append(myButton.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10))
landscape.append(myButton.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10))

現在您需要激活單個約束。 可以更多，記住我們說的是數組。 這很簡單，只需根據需要停用和激活：

func changeConstraints() {
    if isInPortrait {
        NSLayoutConstraint.deactivate(landscape)
        NSLayoutConstraint.activate(portrait)
    } else {
        NSLayoutConstraint.deactivate(portrait)
        NSLayoutConstraint.activate(landscape)
    }
}

您甚至可以根據自己的意願為事物設置動畫！ 最后，讓我們進入 VC 生命周期。 我很確定還有其他（和更好的）方法，但請記住我之前提到的 - 在全屏模式下，iPad 將始終具有常規尺寸等級。 所以我更喜歡深入挖掘。 我傾向於使用三個變量——你可能需要的更少。

var initialOrientation = true
var isInPortrait = false
var orientationDidChange = false

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    if initialOrientation {
        initialOrientation = false
        if view.frame.width > view.frame.height {
            isInPortrait = false
        } else {
            isInPortrait = true
        }
        changeConstraints()
    } else {
        if view.orientationHasChanged(&isInPortrait) {
            changeConstraints()
        }
    }
}

我也有UIView的擴展：

extension UIView {
    func orientationHasChanged(_ isInPortrait:inout Bool) -> Bool {
        if self.frame.width > self.frame.height {
            if isInPortrait {
                isInPortrait = false
                return true
            }
        } else {
            if !isInPortrait {
                isInPortrait = true
                return true
            }
        }
        return false
    }
}

我認為這應該描述我的大部分代碼。 基本上，(a)不使用UIDevice或 (b) 使用viewWillTransition(toSize:)並在使用 iPad 時檢查大小類。 （它們將有一個尺寸等級變化 - 盡管根據尺寸在設備上有所不同，但僅限於在分屏模式下。至少現在！）

view willLayoutSubviews ，使用 (a) view willLayoutSubviews - 你可以使用view DidLayoutSubviews但我更喜歡盡早做事 - 然后 (b) 檢查實際屏幕尺寸。

Answer 2

您可以在視圖控制器類生命周期中使用 iOS 方向更改方法。

首先，您必須使用 stackViews 和視圖 UI 對象制作所有適當的 UI。

然后，您需要使用 iOS 大小類來管理您的約束（寬度、高度、計算器 UI 按鈕/視圖的比率。

還要在您的視圖控制器中添加此方法並管理您的視圖可見性

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)

    if UIDevice.current.orientation.isLandscape {
        print("Landscape")
        // Show your additional UIs elements views for Landscape
    } else {
        print("Portrait")
        // Hide your additional UIs elements / views for Portrait
    }
}

如果您在制作 UI 尺寸方面需要任何幫助，請按照以下選項進行操作。 所以你必須使用 iOS 大小類。