พื้นที่ปลอดภัยของ Xcode 9

ในขณะที่สำรวจXcode9 Betaพบพื้นที่ปลอดภัยบนผู้สร้างส่วนต่อประสาน อยากรู้อยากเห็นและพยายามที่จะรู้เกี่ยวกับพื้นที่ปลอดภัยในเอกสารแอปเปิ้ลในสาระสำคัญหมอบอกว่า"พื้นที่ดูที่โต้ตอบโดยตรงกับเลย์เอาต์อัตโนมัติ"แต่มันก็ไม่ตอบสนองฉันฉันต้องการที่จะรู้ว่าการใช้สิ่งใหม่นี้

มีใครมีเงื่อนงำบ้างไหม?

ย่อหน้าสรุปจาก Apple doc สำหรับพื้นที่ปลอดภัย

คลาส UILayoutGuide ออกแบบมาเพื่อทำงานทั้งหมดที่ดำเนินการก่อนหน้านี้ด้วยมุมมองแบบจำลอง แต่จะทำได้อย่างปลอดภัยและมีประสิทธิภาพมากขึ้น เส้นบอกแนวเค้าโครงไม่ได้กำหนดมุมมองใหม่ พวกเขาไม่ได้มีส่วนร่วมในลำดับชั้นการดู แต่พวกเขาเพียงแค่กำหนดพื้นที่สี่เหลี่ยมผืนผ้าในระบบพิกัดของมุมมองที่สามารถโต้ตอบกับเค้าโครงอัตโนมัติได้

พื้นที่ปลอดภัยเป็นคู่มือการจัดวาง ( ปลอดภัยพื้นที่คู่มือการจัด )
คู่มือการจัดวางที่แสดงถึงส่วนของมุมมองของคุณที่ไม่มีการตรวจสอบโดยบาร์และเนื้อหาอื่น ๆ ใน iOS 11+ Apple กำลังคัดค้านคู่มือการจัดวางด้านบนและล่างและแทนที่ด้วยคู่มือการจัดวางพื้นที่ปลอดภัย

เมื่อมุมมองปรากฏบนหน้าจอคู่มือนี้จะแสดงส่วนของมุมมองที่ไม่ครอบคลุมเนื้อหาอื่น ๆ พื้นที่ปลอดภัยของมุมมองสะท้อนพื้นที่ที่ครอบคลุมโดยแถบนำทางแถบแท็บแถบเครื่องมือและบรรพบุรุษอื่น ๆ ที่บดบังมุมมองของตัวควบคุมมุมมอง (ใน tvOS พื้นที่ปลอดภัยรวมกรอบหน้าจอตามที่กำหนดโดยoverscanCompensationInsetsคุณสมบัติของ UIScreen) นอกจากนี้ยังครอบคลุมพื้นที่เพิ่มเติมใด ๆ ที่กำหนดโดยadditionalSafeAreaInsetsคุณสมบัติของตัวควบคุมมุมมอง หากไม่ได้ติดตั้งมุมมองในลำดับชั้นมุมมองหรือยังไม่ปรากฏบนหน้าจอคู่มือเลย์เอาต์จะตรงกับขอบของมุมมองเสมอ

สำหรับมุมมองรูทของตัวควบคุมมุมมองพื้นที่ปลอดภัยในคุณสมบัตินี้แสดงถึงส่วนทั้งหมดของเนื้อหาของตัวควบคุมมุมมองที่ถูกบดบังและสิ่งเพิ่มเติมที่คุณระบุ สำหรับมุมมองอื่นในลำดับชั้นมุมมองพื้นที่ปลอดภัยจะแสดงเฉพาะส่วนของมุมมองนั้นที่ถูกบดบัง ตัวอย่างเช่นถ้ามุมมองทั้งหมดอยู่ในพื้นที่ปลอดภัยของมุมมองรูทของมุมมองรูทของคอนโทรลเลอร์มุมมองขอบที่แทรกในคุณสมบัตินี้คือ 0

ตามที่ Apple ระบุว่าXcode 9 - Release
Builder Interface Builder นั้นใช้ UIView.safeAreaLayoutGuide แทนคำแนะนำรูปแบบบนและล่างใน UIViewController หากต้องการใช้พื้นที่ปลอดภัยใหม่ให้เลือกเส้นบอกแนวพื้นที่ปลอดภัยในตัวตรวจสอบไฟล์สำหรับตัวควบคุมมุมมองจากนั้นเพิ่มข้อ จำกัด ระหว่างเนื้อหาของคุณกับจุดยึดพื้นที่ปลอดภัยใหม่ สิ่งนี้จะป้องกันเนื้อหาของคุณไม่ให้ถูกบดบังด้วยแถบด้านบนและด้านล่าง ข้อ จำกัด ในพื้นที่ปลอดภัยจะถูกแปลงเป็นด้านบนและล่างเมื่อปรับใช้กับ iOS เวอร์ชันก่อนหน้า

นี่คือการอ้างอิงอย่างง่ายเป็นการเปรียบเทียบ (เพื่อสร้างเอฟเฟ็กต์ภาพที่คล้ายกัน) ระหว่างคำแนะนำเค้าโครง (บนและล่าง) ที่มีอยู่และคำแนะนำเค้าโครงพื้นที่ปลอดภัย

เค้าโครงพื้นที่ปลอดภัย:

autolayout

วิธีการทำงานกับเค้าโครงพื้นที่ปลอดภัยหรือไม่

ทำตามขั้นตอนเหล่านี้เพื่อค้นหาวิธีแก้ไข:

• เปิดใช้งาน 'เค้าโครงพื้นที่ปลอดภัย' หากไม่ได้เปิดใช้งาน
• ลบ 'ข้อ จำกัด ทั้งหมด' หากพวกเขาแสดงการเชื่อมต่อกับSuper viewและแนบทั้งหมดอีกครั้งด้วยจุดยึดเค้าโครงที่ปลอดภัย หรือดับเบิลคลิกที่ข้อ จำกัด และแก้ไขการเชื่อมต่อจากมุมมองสุดไปที่จุดยึด SafeArea

นี่คือตัวอย่างภาพรวมวิธีเปิดใช้งานเค้าโครงพื้นที่ปลอดภัยและแก้ไขข้อ จำกัด

นี่คือผลลัพธ์ของการเปลี่ยนแปลงข้างต้น

การออกแบบเลย์เอาต์ด้วย SafeArea
เมื่อออกแบบสำหรับ iPhone X คุณต้องแน่ใจว่าเลย์เอาต์เต็มหน้าจอและไม่ถูกบดบังด้วยมุมโค้งมนของอุปกรณ์ตัวเรือนเซ็นเซอร์หรือตัวบ่งชี้สำหรับการเข้าถึงหน้าจอโฮม

แอพส่วนใหญ่ที่ใช้องค์ประกอบ UI มาตรฐานที่ได้รับจากระบบเช่นแถบนำทางตารางและคอลเล็กชันจะปรับเข้ากับฟอร์มแฟคเตอร์ใหม่ของอุปกรณ์โดยอัตโนมัติ วัสดุพื้นหลังขยายไปถึงขอบของจอแสดงผลและองค์ประกอบ UI ถูกแทรกและจัดตำแหน่งอย่างเหมาะสม

สำหรับแอพที่มีเลย์เอาต์ที่กำหนดเองการรองรับ iPhone X ก็ค่อนข้างง่ายเช่นกันโดยเฉพาะหากแอปของคุณใช้เลย์เอาต์อัตโนมัติและปฏิบัติตามแนวทางที่ปลอดภัยและขอบเลย์เอาต์

นี่คือตัวอย่างรหัส (อ้างอิงจาก: คู่มือการวางเลย์เอาต์ที่ปลอดภัย ) :
หากคุณสร้างข้อ จำกัด ในโค้ดให้ใช้คุณสมบัติ safeAreaLayoutGuide ของ UIView เพื่อรับแองเคอร์เค้าโครงที่เกี่ยวข้อง ลองสร้างตัวอย่างเครื่องมือสร้างส่วนติดต่อขึ้นใหม่อีกครั้งในรหัสเพื่อดูว่ามีลักษณะอย่างไร:

สมมติว่าเรามีมุมมองสีเขียวเป็นคุณสมบัติในตัวควบคุมมุมมองของเรา:

private let greenView = UIView()

เราอาจมีฟังก์ชั่นในการตั้งค่ามุมมองและข้อ จำกัด ที่เรียกจาก viewDidLoad:

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

สร้างข้อ จำกัด ระยะขอบชั้นนำและต่อท้ายเช่นเดียวกับการใช้ layoutMarginsGuide ของมุมมองรูท:

 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)
   ])
}

ผลลัพธ์:

การUIViewขยายส่วนต่อไปนี้ทำให้การทำงานกับ SafeAreaLayout เป็นเรื่องง่าย

extension UIView {

  // Top Anchor
  var safeAreaTopAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.topAnchor
    } else {
      return self.topAnchor
    }
  }

  // Bottom Anchor
  var safeAreaBottomAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.bottomAnchor
    } else {
      return self.bottomAnchor
    }
  }

  // Left Anchor
  var safeAreaLeftAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.leftAnchor
    } else {
      return self.leftAnchor
    }
  }

  // Right Anchor
  var safeAreaRightAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.rightAnchor
    } else {
      return self.rightAnchor
    }
  }

}

นี่คือตัวอย่างรหัสในObjective-C :

• วิธีการเพิ่มพื้นที่ปลอดภัยโดยทางโปรแกรม

นี่คือเอกสารประกอบอย่างเป็นทางการของ Apple Developer สำหรับคำแนะนำในการจัดวางพื้นที่ปลอดภัย

Safe Area จำเป็นสำหรับการจัดการการออกแบบส่วนต่อประสานกับผู้ใช้สำหรับ iPhone-X นี่คือคำแนะนำพื้นฐานสำหรับวิธีการออกแบบส่วนต่อประสานผู้ใช้สำหรับ iPhone-X โดยใช้เค้าโครงพื้นที่ปลอดภัย

ฉันต้องการพูดถึงบางสิ่งที่จับใจฉันเป็นอันดับแรกเมื่อฉันพยายามปรับแอพ SpriteKit เพื่อหลีกเลี่ยงการปัดเศษและ "รอย" ของ iPhone X ใหม่ตามคำแนะนำของแนวทางอินเทอร์เฟซล่าสุดของมนุษย์ : คุณสมบัติใหม่safeAreaLayoutGuideของUIViewความต้องการ ถูกสอบถามหลังจากเพิ่มมุมมองไปยังลำดับชั้น (ตัวอย่างเช่นเปิด -viewDidAppear:) เพื่อรายงานเฟรมเลย์เอาต์ที่มีความหมาย (มิฉะนั้นจะส่งคืนขนาดเต็มหน้าจอ)

จากเอกสารของที่พัก:

คู่มือการจัดวางที่แสดงถึงส่วนของมุมมองของคุณที่ไม่มีการตรวจสอบโดยบาร์และเนื้อหาอื่น ๆ เมื่อมุมมองปรากฏบนหน้าจอคู่มือนี้จะแสดงส่วนของมุมมองที่ไม่ครอบคลุมโดยแถบนำทางแถบแท็บแถบเครื่องมือและมุมมองบรรพบุรุษอื่น ๆ (ใน tvOS พื้นที่ปลอดภัยสะท้อนให้เห็นถึงพื้นที่ที่ไม่ครอบคลุมฝาหน้าจอ.) ถ้ามุมมองที่ไม่ได้ติดตั้งอยู่ในลำดับชั้นมุมมองหรือยังไม่เป็นที่ปรากฏบนหน้าจอที่มองเห็นขอบคู่มือรูปแบบที่มีค่าเท่ากันกับขอบของมุมมอง

(เน้นที่เหมือง)

ถ้าคุณอ่านมันเร็วเท่า-viewDidLoad:ที่layoutFrameของคู่มือจะ{{0, 0}, {375, 812}}แทนความคาดหวัง{{0, 44}, {375, 734}}

• ก่อนหน้านี้ใน iOS 7.0–11.0 < เลิกใช้แล้ว > UIKitใช้topLayoutGuide & bottomLayoutGuideซึ่งเป็นUIViewคุณสมบัติ

• iOS11 + ใช้safeAreaLayoutGuideซึ่งเป็นUIViewคุณสมบัติเช่นกัน

• เปิดใช้งานกล่องกาเครื่องหมายแนะนำพื้นที่เค้าโครงที่ปลอดภัยจากตัวตรวจสอบไฟล์

• พื้นที่ปลอดภัยช่วยให้คุณวางมุมมองของคุณภายในส่วนที่มองเห็นได้ของอินเทอร์เฟซโดยรวม

• ใน tvOSพื้นที่ปลอดภัยยังรวมถึง overscan ของหน้าจอซึ่งเป็นตัวแทนของพื้นที่ที่ครอบคลุมโดยกรอบของหน้าจอ

• safeAreaLayoutGuide แสดงถึงส่วนของมุมมองที่ไม่ครอบคลุมโดยแถบนำทางแถบแท็บแถบเครื่องมือและมุมมองบรรพบุรุษอื่น ๆ

• ใช้พื้นที่ปลอดภัยเป็นตัวช่วยในการจัดวางเนื้อหาของคุณเช่นUIButton ฯลฯ

• เมื่อออกแบบสำหรับ iPhone X คุณจะต้องตรวจสอบให้แน่ใจว่าเลย์เอาต์เต็มหน้าจอและไม่ถูกบดบังด้วยมุมโค้งมนของตัวเรือนเซ็นเซอร์หรือตัวบ่งชี้สำหรับการเข้าถึงหน้าจอโฮม

• ตรวจสอบให้แน่ใจว่าพื้นหลังขยายไปถึงขอบของจอแสดงผลและเค้าโครงที่เลื่อนได้ในแนวตั้งเช่นตารางและคอลเลกชันต่อไปจนถึงด้านล่าง

• แถบสถานะสูงกว่า iPhone X มากกว่า iPhone อื่น ๆ หากแอปของคุณมีความสูงของแถบสถานะคงที่สำหรับการวางตำแหน่งเนื้อหาด้านล่างแถบสถานะคุณต้องอัปเดตแอปของคุณเพื่อจัดตำแหน่งเนื้อหาแบบไดนามิกโดยยึดตามอุปกรณ์ของผู้ใช้ โปรดทราบว่าแถบสถานะบน iPhone X จะไม่เปลี่ยนความสูงเมื่องานพื้นหลังเช่นการบันทึกเสียงและการติดตามตำแหน่งทำงานอยู่ print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

• ความสูงของคอนเทนเนอร์ตัวบ่งชี้บ้านคือ 34 คะแนน

• เมื่อคุณเปิดใช้งานคำแนะนำในการวางผังพื้นที่ปลอดภัยคุณสามารถดูคุณสมบัติข้อ จำกัด พื้นที่ปลอดภัยที่แสดงอยู่ในตัวสร้างส่วนต่อประสาน

คุณสามารถตั้งค่าข้อ จำกัด ด้วยself.view.safeAreaLayoutGuide-

ObjC:

  self.demoView.translatesAutoresizingMaskIntoConstraints = NO;
    UILayoutGuide * guide = self.view.safeAreaLayoutGuide;
    [self.demoView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES;
    [self.demoView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES;
    [self.demoView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
    [self.demoView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;

สวิฟท์:

   demoView.translatesAutoresizingMaskIntoConstraints = false
        if #available(iOS 11.0, *) {
            let guide = self.view.safeAreaLayoutGuide
            demoView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            demoView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            demoView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
            demoView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
        } else {
            NSLayoutConstraint(item: demoView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        }

Apple แนะนำ topLayoutGuide และ bottomLayoutGuide เป็นคุณสมบัติของ UIViewController ย้อนกลับไปใน iOS 7 พวกเขาอนุญาตให้คุณสร้างข้อ จำกัด เพื่อป้องกันไม่ให้เนื้อหาของคุณถูกซ่อนโดยแถบ UIKit เช่นสถานะการนำทางหรือแถบแท็บ คำแนะนำเลย์เอาต์เหล่านี้เลิกใช้แล้วใน iOS 11 และแทนที่ด้วยคำแนะนำเลย์เอาต์พื้นที่ปลอดภัยเดียว

อ้างอิงลิงค์สำหรับข้อมูลเพิ่มเติม

คำแนะนำในการวางเลย์เอาต์ที่ปลอดภัยช่วยหลีกเลี่ยงการขีดส่วนประกอบของ System UI เมื่อวางตำแหน่งเนื้อหาและการควบคุม

พื้นที่ปลอดภัยคือพื้นที่ที่อยู่ระหว่างองค์ประกอบของ System UI ซึ่ง ได้แก่ แถบสถานะแถบนำทางและแถบเครื่องมือหรือแถบแท็บ ดังนั้นเมื่อคุณเพิ่มแถบสถานะลงในแอปของคุณพื้นที่ที่ปลอดภัยจะลดขนาดลง เมื่อคุณเพิ่มแถบการนำทางไปยังแอปของคุณพื้นที่ปลอดภัยจะลดขนาดอีกครั้ง

บน iPhone X พื้นที่ปลอดภัยให้สิ่งที่ใส่เข้าไปเพิ่มเติมจากขอบหน้าจอด้านบนและด้านล่างในแนวตั้งแม้ว่าจะไม่มีแถบแสดง ในแนวนอนพื้นที่ปลอดภัยถูกแทรกจากด้านข้างของหน้าจอและตัวบ่งชี้ที่บ้าน

สิ่งนี้นำมาจากการออกแบบวิดีโอของ Apple สำหรับ iPhone Xซึ่งพวกเขายังเห็นภาพว่าองค์ประกอบต่าง ๆ มีผลต่อพื้นที่ปลอดภัยอย่างไร