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

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

我試圖在網上搜索解決方案，但找不到任何東西。有沒有辦法實作這一目標？

這是縱向模式下的樣子：

這是橫向模式下的樣子：

但這就是我想要的樣子：

uj5u.com熱心網友回復：

這是我自 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
    }
}

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

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

uj5u.com熱心網友回復：

您可以在視圖控制器類生命周期中使用 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 大小類。

1. 您可以將約束添加到視圖并在“尺寸檢查器”中進行編輯。
2. 雙擊適當的設定約束并使用標簽前的 按鈕添加更多所需的尺寸類。
3. 確保取消選中“已安裝”復選框并分別選中所選約束（縱向模式的約束）所需的尺寸（wC、hC / wR、hR / wC、hR / wR、hC）。
4. 也為橫向模式的 UI 添加新的約束，并執行與上述 no 相同的操作。3 通過僅檢查 iPhone 橫向模式的尺寸等級。

請在此處查看 Xcode 中的檢查選項

有用的網址：

https://medium.com/swlh/ios-adaptive-layout-i-size-class-c561bd730e1 https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and -布局/

標籤：ios 迅速

上一篇：實施核心資料的問題

下一篇：Swiftmapkit如何隱藏用戶的位置圖釘