안전 영역 레이아웃을 프로그래밍 방식으로 사용하는 방법은 무엇입니까?

안전 영역 레이아웃을 프로그래밍 방식으로 사용하는 방법은 무엇입니까?

스토리보드를 사용하여 보기를 만들지 않기 때문에 프로그래밍 방식으로 "안전 영역 가이드 사용" 옵션이 있는지 궁금했습니다.

저는 제 견해를 에 고정시키려고 노력했습니다.

view.safeAreaLayoutGuide

하지만 그들은 아이폰 X 시뮬레이터에서 계속해서 상단 눈금을 겹칩니다.

다음은 샘플 코드(참조: 안전 영역 레이아웃 가이드)입니다.
코드에서 제약 조건을 작성하는 경우 UIView의 safeAreaLayoutGuide 속성을 사용하여 관련 레이아웃 앵커를 가져옵니다.위의 Interface Builder 예제를 코드로 다시 만들어 보기를 확인해 보겠습니다.

뷰 컨트롤러에서 녹색 뷰를 속성으로 사용한다고 가정합니다.

private let greenView = UIView()

viewDidLoad에서 호출되는 보기 및 제약 조건을 설정하는 기능이 있을 수 있습니다.

private func setupView() {
  greenView.translatesAutoresizingMaskIntoConstraints = false
  greenView.backgroundColor = .green
  view.addSubview(greenView)
}

항상 루트 뷰의 레이아웃 여백 안내서를 사용하여 선행 및 후행 여백 제약 조건을 작성합니다.

 let margins = view.layoutMarginsGuide
 NSLayoutConstraint.activate([
    greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
    greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
 ])

이제 iOS 11 이상을 대상으로 하는 경우가 아니라면 안전 영역 레이아웃 가이드 제약 조건을 #available로 포장하고 이전 iOS 버전의 경우 상단 및 하단 레이아웃 가이드로 다시 이동해야 합니다.

if #available(iOS 11, *) {
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
   greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0),
   guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0)
   ])
} else {
   let standardSpacing: CGFloat = 8.0
   NSLayoutConstraint.activate([
   greenView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing),
   bottomLayoutGuide.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: standardSpacing)
   ])
}

결과:

안전 영역 배치 가이드를 위한 Apple 개발자 공식 문서입니다.

iPhone-X의 사용자 인터페이스 설계를 처리하려면 안전 영역이 필요합니다.안전 영역 레이아웃을 사용하여 iPhone-X용 사용자 인터페이스를 설계하는 방법에 대한 기본 지침입니다.

저는 실제로 확장 기능을 사용하여 iOS 11인지 아닌지를 제어하고 있습니다.

extension UIView {

  var safeTopAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return safeAreaLayoutGuide.topAnchor
    }
    return topAnchor
  }

  var safeLeftAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *){
      return safeAreaLayoutGuide.leftAnchor
    }
    return leftAnchor
  }

  var safeRightAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *){
      return safeAreaLayoutGuide.rightAnchor
    }
    return rightAnchor
  }

  var safeBottomAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return safeAreaLayoutGuide.bottomAnchor
    }
    return bottomAnchor
  }
}

SafeAreaLayoutGuide이라UIView소유물,

안전한 영역 레이아웃 가이드의 상단은 보호되지 않은 보기의 상단 가장자리를 나타냅니다(예: 있는 경우 상태 표시줄이나 탐색 막대 뒤가 아님).다른 가장자리도 마찬가지입니다.

사용하다safeAreaLayoutGuide둥근 모서리, 탐색 모음, 탭 모음, 도구 모음 및 기타 상위 보기에서 개체를 클리핑/클립하지 않도록 합니다.

우리는 만들 수 있습니다.safeAreaLayoutGuide개체 및 개체 제약 조건을 각각 설정합니다.

초상화 + 풍경화에 대한 제약 조건은 -입니다.

        self.edgesForExtendedLayout = []//Optional our as per your view ladder

        let newView = UIView()
        newView.backgroundColor = .red
        self.view.addSubview(newView)
        newView.translatesAutoresizingMaskIntoConstraints = false
        if #available(iOS 11.0, *) {
            let guide = self.view.safeAreaLayoutGuide
            newView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            newView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            newView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
            newView.heightAnchor.constraint(equalToConstant: 100).isActive = true

        }
        else {
            NSLayoutConstraint(item: newView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: newView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: newView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true

            newView.heightAnchor.constraint(equalToConstant: 100).isActive = true
        }

UI 레이아웃 가이드

안전 영역 배치 안내서

SnapKit를 사용하는 사용자는 저와 마찬가지로 솔루션을 사용하여 제약사항을 해결할 수 있습니다.view.safeAreaLayoutGuide이와 같이:

yourView.snp.makeConstraints { (make) in
    if #available(iOS 11.0, *) {
        //Bottom guide
        make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottomMargin)
        //Top guide
        make.top.equalTo(view.safeAreaLayoutGuide.snp.topMargin)
        //Leading guide
        make.leading.equalTo(view.safeAreaLayoutGuide.snp.leadingMargin)
        //Trailing guide
        make.trailing.equalTo(view.safeAreaLayoutGuide.snp.trailingMargin)

     } else {
        make.edges.equalToSuperview()
     }
}

레이아웃에 선행 및 후행 여백 제약 조건을 추가하는 대신 이 기능을 사용합니다.MarginsGuide:

UILayoutGuide *safe = self.view.safeAreaLayoutGuide;
yourView.translatesAutoresizingMaskIntoConstraints = NO;
[NSLayoutConstraint activateConstraints:@[
                                           [safe.trailingAnchor constraintEqualToAnchor:yourView.trailingAnchor],
                                           [yourView.leadingAnchor constraintEqualToAnchor:safe.leadingAnchor],
                                           [yourView.topAnchor constraintEqualToAnchor:safe.topAnchor],
                                           [safe.bottomAnchor constraintEqualToAnchor:yourView.bottomAnchor]
                                          ]];

Krunal의 답변에서 ios 11의 하위 버전에 대한 옵션도 확인 부탁드립니다.

Swift 4.2 및 5.0.뷰Bg에 선행, 후행, 상단 및 하단 제약 조건을 추가하려고 합니다.그래서, 당신은 아래의 코드를 사용할 수 있습니다.

let guide = self.view.safeAreaLayoutGuide
viewBg.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
viewBg.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
viewBg.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
viewBg.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true

사용하다UIWindow또는UIView의safeAreaInsets .bottom .top .left .right

// #available(iOS 11.0, *)
// height - UIApplication.shared.keyWindow!.safeAreaInsets.bottom

// On iPhoneX
// UIApplication.shared.keyWindow!.safeAreaInsets.top =  44
// UIApplication.shared.keyWindow!.safeAreaInsets.bottom = 34

// Other devices
// UIApplication.shared.keyWindow!.safeAreaInsets.top =  0
// UIApplication.shared.keyWindow!.safeAreaInsets.bottom = 0

// example
let window = UIApplication.shared.keyWindow!
let viewWidth = window.frame.size.width
let viewHeight = window.frame.size.height - window.safeAreaInsets.bottom
let viewFrame = CGRect(x: 0, y: 0, width: viewWidth, height: viewHeight)
let aView = UIView(frame: viewFrame)
aView.backgroundColor = .red
view.addSubview(aView)
aView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

시각적 형식의 제약 조건을 사용하면 안전한 영역을 무료로 존중받을 수 있습니다.

class ViewController: UIViewController {

    var greenView = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        greenView.backgroundColor = .green
        view.addSubview(greenView)
    }
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

        greenView.translatesAutoresizingMaskIntoConstraints = false
        let views : [String:Any] = ["greenView":greenView]
        view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-[greenView]-|", options: [], metrics: nil, views: views))
        view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-[greenView]-|", options: [], metrics: nil, views: views))
    }
}

목표-C에 대한 안전 영역 확장

@implementation UIView (SafeArea)

- (NSLayoutAnchor *)safeTopAnchor{

    if (@available(iOS 11.0, *)){
        return self.safeAreaLayoutGuide.topAnchor;
    } else {
        return self.topAnchor;
    }

}


- (NSLayoutAnchor *)safeBottomAnchor{

    if (@available(iOS 11.0, *)) {
        return self.safeAreaLayoutGuide.bottomAnchor;
    } else {
        return self.bottomAnchor;
    }

}

@end

이 확장은 UIVIew를 해당 수퍼뷰 및 수퍼뷰+세이프로 제한하는 데 도움이 됩니다.면적:

extension UIView {

    ///Constraints a view to its superview
    func constraintToSuperView() {
        guard let superview = superview else { return }
        translatesAutoresizingMaskIntoConstraints = false

        topAnchor.constraint(equalTo: superview.topAnchor).isActive = true
        leftAnchor.constraint(equalTo: superview.leftAnchor).isActive = true
        bottomAnchor.constraint(equalTo: superview.bottomAnchor).isActive = true
        rightAnchor.constraint(equalTo: superview.rightAnchor).isActive = true
    }

    ///Constraints a view to its superview safe area
    func constraintToSafeArea() {
        guard let superview = superview else { return }
        translatesAutoresizingMaskIntoConstraints = false

        topAnchor.constraint(equalTo: superview.safeAreaLayoutGuide.topAnchor).isActive = true
        leftAnchor.constraint(equalTo: superview.safeAreaLayoutGuide.leftAnchor).isActive = true
        bottomAnchor.constraint(equalTo: superview.safeAreaLayoutGuide.bottomAnchor).isActive = true
        rightAnchor.constraint(equalTo: superview.safeAreaLayoutGuide.rightAnchor).isActive = true
    }

}

여기에서 설명하는 대로 view.safeAreaInsets를 사용할 수 있습니다. https://www.raywenderlich.com/174078/auto-layout-visual-format-language-tutorial-2

코드 샘플(raywenderlich.com 에서 제공):

override func viewSafeAreaInsetsDidChange() {
  super.viewSafeAreaInsetsDidChange()

  if !allConstraints.isEmpty {
    NSLayoutConstraint.deactivate(allConstraints)
    allConstraints.removeAll()
  }

  let newInsets = view.safeAreaInsets
  let leftMargin = newInsets.left > 0 ? newInsets.left : Metrics.padding
  let rightMargin = newInsets.right > 0 ? newInsets.right : Metrics.padding
  let topMargin = newInsets.top > 0 ? newInsets.top : Metrics.padding
  let bottomMargin = newInsets.bottom > 0 ? newInsets.bottom : Metrics.padding

  let metrics = [
    "horizontalPadding": Metrics.padding,
    "iconImageViewWidth": Metrics.iconImageViewWidth,
    "topMargin": topMargin,
    "bottomMargin": bottomMargin,
    "leftMargin": leftMargin,
    "rightMargin": rightMargin]
}


let views: [String: Any] = [
  "iconImageView": iconImageView,
  "appNameLabel": appNameLabel,
  "skipButton": skipButton,
  "appImageView": appImageView,
  "welcomeLabel": welcomeLabel,
  "summaryLabel": summaryLabel,
  "pageControl": pageControl]

let iconVerticalConstraints = NSLayoutConstraint.constraints(
  withVisualFormat: "V:|-topMargin-[iconImageView(30)]",
  metrics: metrics,
  views: views)
allConstraints += iconVerticalConstraints

let topRowHorizontalFormat = """
  H:|-leftMargin-[iconImageView(iconImageViewWidth)]-[appNameLabel]-[skipButton]-rightMargin-|
  """
...

var someVeiw = UIView()
    func webView(_view: View, didFinish navigation: WKNavigation!) {
        self.someVeiw.frame = view.safeAreaLayoutGuide.layoutFrame
    }

iOS 10+는 런타임에 감지되는 안전한 영역 레이아웃 가이드와 함께 제공됩니다.의 프레임은 CGRect를 허용하므로 layoutFrame을 사용합니다.

언급URL : https://stackoverflow.com/questions/46317061/how-do-i-use-safe-area-layout-programmatically