iOS適配——如何讓您的應用在不同方向的設備中完美顯示

一、優化布局

在iOS中，尤其是在iPad上，用戶有多種方式使用設備，因此應用程序需要支持不同的方向和解析度。這意味著應用程序的布局必須能夠在小屏幕或大屏幕上自適應並固定。如下所示，我們將通過控制器和約束來解決布局適應問題：

override func viewDidLoad() {
    super.viewDidLoad()

    NotificationCenter.default.addObserver(self, selector: #selector(willEnterForeground), name: UIApplication.willEnterForegroundNotification, object: nil)
    setupLayout()
}

private func setupLayout() {
    view.addSubview(titleLabel)
    titleLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    titleLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    titleLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
}

@objc func willEnterForeground() {
    // Update constraints if screen is rotated
    view.layoutIfNeeded()
    setupLayout()
}

通過監聽應用「willEnterForegroundNotification」通知，使控制器重新調整布局。同時，約束可先參照「參考控制器」的示例約束代碼：

func setupConstraints() {
    backgroundImageV.snp.remakeConstraints { (make) in
    make.edges.equalTo(self.view).inset(UIEdgeInsets.zero)
    }

    scrollView.snp.makeConstraints { (make) in
    make.width.equalTo(self.view.snp.width).offset(-30)
    make.centerX.equalTo(self.view.snp.centerX)
    make.top.equalTo(self.view.snp.topMargin).offset(50)
    make.bottom.equalTo(self.view.snp.bottomMargin).offset(-10)
    }

    contentView.snp.makeConstraints { (make) in
    make.edges.equalTo(scrollView.snp.edges)
    make.width.equalTo(scrollView.snp.width)
    }
}

二、處理設備的轉向事件

iOS支持兩種設備方向：縱向和橫向。這意味著你需要根據方向調整你的視圖。例如，你在縱向方向下可能有一個大的標題，但是在橫向方向下這個標題可能會對用戶來說太小，不能完全顯示。為了解決這個問題，你需要使用UIViewController類的以下方法：

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    // Do some action when device orientation is changed
    if traitCollection.verticalSizeClass != previousTraitCollection?.verticalSizeClass || traitCollection.horizontalSizeClass != previousTraitCollection?.horizontalSizeClass {
        setupLayout()
    }
}

通過監聽屬性值的改變，調用「setupLayout()」方法，來改變布局和約束

三、適配各個設備尺寸

一個好的iOS應用程序應該被設計用於應對各種屏幕尺寸，包括iPhone、iPad、Apple Watch和Apple TV。你可以使用以下技術來適配各個設備尺寸：

1、使用Size Class和Auto Layout來使控制器自適應不同尺寸的屏幕；

2、對於iPhone，使用Dynamic Type和Auto Layout調整字體尺寸；

3、使用Universal Storyboard來創建一個單一的Storyboard適應所有設備；

如下所示，我們將採用一系列技術適應各種設備尺寸：

override func viewDidLoad() {
    super.viewDidLoad()

    if traitCollection.horizontalSizeClass == .compact && traitCollection.verticalSizeClass == .regular {
        // iPhone portrait
        setupLayoutForIPhone()
    } else if traitCollection.horizontalSizeClass == .compact && traitCollection.verticalSizeClass == .compact {
        // iPhone landscape
        setupLayoutForIPhone()
    } else if traitCollection.horizontalSizeClass == .regular && traitCollection.verticalSizeClass == .regular {
        // iPad portrait and landscape
        setupLayoutForIPad()
    }
}

上述代碼實現了對各種設備方向的自適應處理，具體實現方法可參照「優化布局」一節所述的約束方法。

四、處理考慮全面的適配問題

設備的多樣性和不斷增長的解析度，對iOS應用程序的適配提出了新的要求。僅迎合設備的橫向或縱向方向，換句話說，只是「垂直模式」或「水平模式」的適配已不再足夠。因此，更加全面的適配問題需處理。為了解決這個問題，iOS應用程序需要考慮全面的適配因素，如以下適配技術：

1、使用Size Class和Auto Layout；

2、使用不同的圖片尺寸；

3、使用不同的字體尺寸和樣式；

4、使用代碼適配；

下述代碼給出一個全面適配iOS設備的示例：

enum DeviceOrientation {
    case portrait
    case landscapeLeft
    case landscapeRight
}

private func updateLayout(for orientation: DeviceOrientation) {
    if orientation == .portrait {
        // Set portrait layout constraints
        profilePictureViewTopConstraint.constant = 50
        profilePictureViewLeftConstraint.constant = 20
        nameLabelTopConstraint.constant = 50
        nameLabelLeftConstraint.constant = 120
        hobbiesLabelTopConstraint.constant = 80
        hobbiesLabelLeftConstraint.constant = 120
    } else {
        // Set landscape layout constraints
        profilePictureViewTopConstraint.constant = 20
        profilePictureViewLeftConstraint.constant = 20
        nameLabelTopConstraint.constant = 20
        nameLabelLeftConstraint.constant = 120
        hobbiesLabelTopConstraint.constant = 70
        hobbiesLabelLeftConstraint.constant = 120
    }
}

上述代碼定義了一個「DeviceOrientation」枚舉類型和一個「updateLayout(for: DeviceOrientation)」方法。該方法接收一個「DeviceOrientation」枚舉類型參數，通過枚舉來設置portrait和landscape方向下的約束，來實現全面的設備適配。