iOS中的Safe Area使用詳解

一、什麼是Safe Area

iOS 11為開發者引入了安全區域(Safe Area)的概念。安全區域是應用程序的可見部分，也是“安全”的部分，不會被遮擋或裁剪。Safe Area是一種虛擬的矩形區域，它周圍有一些文本，圖標和其他視覺元素以保持合適的距離等。

對於支持多個設備尺寸的應用程序，它們使用SafeArea來確定布局的位置，以避免將內容裁剪或蓋住在被遮擋的區域中。當用戶旋轉設備，或者在iPad上使用分屏模式時，這一點尤其重要。

如果您開發的應用程序需要適配iPhone X及以上的設備，那麼Safe Area將至關重要，因為這些設備具有顯示區域更大的屏幕，並且在此區域上還有擴展的“劉海”、底部安全區等。

二、如何使用Safe Area

在你的iOS應用程序中，你需要使用Safe Area來確立你的界面布局。在使用Safe Area之前，你應該先在Interface Builder中打開LayoutMargins和Guides，以便在界面製作中充分利用Safe Area。

使用Safe Area，你可以通過以下三種方式來確定到邊緣的距離，即leading、trailing和center，將控件放置在Safe Area中。這三種約束以及上下左右的約束可以確保您的應用程序布局適應設備上的任何可見區域。

三、Safe Area的代碼實現

以下是使用Safe Area代碼的示例。我們假設您正在創建一個簡單的文本視圖，並希望它始終位於屏幕的底部，並保持正確的安全區域距離。

class ViewController: UIViewController {
    
    let label = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(label)
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = “這是一個文本”

        let margins = view.layoutMarginsGuide
        let guide = view.safeAreaLayoutGuide
        
        NSLayoutConstraint.activate([
            label.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
            label.trailingAnchor.constraint(equalTo: margins.trailingAnchor),
            label.bottomAnchor.constraint(equalTo: guide.bottomAnchor, constant: -20)
        ])
    }
}

在這個示例代碼中，我們通過將Safe Area Guide與布局邊緣結合使用來放置標籤。在這個布局中，文本始終位於屏幕底部，並保持20點與Safe Area的距離。

四、Safe Area的使用技巧

下面是一些值得注意的點，以確保你在使用Safe Area時得到最佳的結果。

使用Safe Area可以確保你不會在不同的設備或屏幕方向上出現偏移，這樣可以更好地保持你的應用程序布局的一致性。

記住，Safe Area是指可見區域而非屏幕的物理邊界。因此，當你在對界面進行布局時，需要確保它們與Safe Area的邊界始終保持正確的距離。

除了控件如按鈕，標籤等默認能夠自動適應Safe Area之外，Safe Area可以與代碼中創建的其他控件、視圖和約束結合使用。

五、總結

iOS中的Safe Area是確保應用程序布局適應設備上的任何可見區域非常重要的一個概念。您可以通過Interface Builder或代碼實現來使用Safe Area，並確保應用程序布局的一致性。如需進一步了解Safe Area，請查看Apple官方文檔。