home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> สมาร์ทโฟน >> iPhone

เปิดใช้งาน Dark Mode ใน iOS 13 แบบราบรื่น: คู่มือขั้นตอนสำหรับนักพัฒนา

Apple เปิดตัว iOS 13 ทั่วโลกเมื่อวันที่ 19 กันยายน ครอบคลุม iPhone ทุกเครื่องที่เปิดตัวภายใน 4 ปีย้อนหลัง (ย้อนไปถึง iPhone 6s)

ฟีเจอร์ใหญ่ที่สุดคือ Dark Mode แบบ System-wide ของ iOS 13 คาดว่าช่วยลดอาการตาเหนื่อยจากแสงสีขาวจากหน้าจอสมาร์ทโฟน

ในขณะที่ฟีเจอร์นี้เป็นความสุขให้ผู้ใช้ Apple แต่เป็นภารกิจให้นักพัฒนา iOS ต้องเตรียมแอปให้พร้อมสำหรับ Dark Mode

วิธีตั้งค่าแอปสำหรับ iOS 13 Dark Mode

เพื่อช่วยนักพัฒนา นี่คือข้อมูลและขั้นตอนที่มีประโยชน์:

  • การ Implement iOS 13 Dark Mode ไม่ได้ยากมากแม้จะเป็นระดับ System-wide
  • การเปิดใช้งาน Dark Mode บนแอปที่มีอยู่แล้ว ก็ง่ายเหมือนกัน ขอบคุณ iOS 13 SDK ล่าสุด

เมื่อใช้ SDK ล่าสุดสร้างแอปสำห iOS 13 Dark Mode ระบบจะอัปเดต Switches, Buttons, Table Views และ System Controls อื่นๆ อัตโนมัติ แต่โปรดทราบว่า รูปภาพและสีข้อความ จะไม่ปรับตัวสำห Dark Mode เอง

แต่ยังคงน่าประทับใจที่การเปลี่ยนแปลงระดับ System อย่าง Dark Mode ทำได้ง่ายมาก มีการเปลี่ยนโค้ดน้อยลง และงานที่ทำได้มากขึ้นในเวลาที่ประหยัดได้

ปรับสีสำห iOS 13 Dark Mode

เริ่มจากเปลี่ยน System Colors สำห iOS 13 Dark Mode:

ตอนนี้มี System Colors ใหม่ใน UIColor หนึ่งในนั้นคือ Label Color การใช้สีระบบใหม่ช่วยรองรับ Dark Mode และ High Contrast Modes ใน iOS 13

label.color = UIColor.secondaryLabel

โดยทั่วไป ควรใช้ System Colors สำห iOS 13 Dark Mode ซึ่งปรับตัวตาม Interface Changes อัตโนมัติ เพื่อความสอดคล้องข้ามแอป แต่ Developer สามารถ Implement Dark Mode ด้วย Custom Colors ได้

Asset Catalog Colors ที่มาด้วย iOS 11 ทำให้รองรับ Dark Mode ได้ง่ายขึ้นมาก โดยเพิ่ม Dark Versions ของ Custom Color Set

คุณแค่เลือกสีที่ชอบจาก Catalog แล้วเปลี่ยน Appearances เป็น Any, Dark จาก Attributes Inspector

แค่นี้! ตอนนี้คุณมี Custom iOS 13 Dark Mode พร้อมสำหแอปมือถือแล้ว

Troubleshooting iOS 13 Dark Mode

ถ้าแอปไม่ทำตาม iOS 13 Dark Mode จะทำยังไง? นี่คือขั้นตอนแก้ไขง่ายๆ

ขั้นตอน 1

ต้องรู้ว่าแอปอัปเดตแล้วหรือยัง

ถ้าแอปไม่ทำงานกับ iOS 13 Dark Mode หรือไม่รองรับ แค่อัปเดตแอปผ่าน App Store

ขั้นตอน 2

เช็คว่า Dark Mode ของ iOS App เปิดใช้งานหรือยัง

ถ้ายัง ไป Settings - Display & Brightness - เช็คว่า "Dark" เปิดอยู่หรือไม่

ขั้นตอน 3

ถ้าแอปอัปเดตเต็มที่ แต่ยังไม่ทำงานกับ Dark Mode เช็ค In-App Settings ดูรูป:

เปิดใช้งาน Dark Mode ใน iOS 13 แบบราบรื่น: คู่มือขั้นตอนสำหรับนักพัฒนา

ถ้าอยากได้ความช่วยเหลือเพิ่มเติม สอบถามทีมพัฒนาที่เชี่ยวชาญ นี่คือวิธีที่ผมจะช่วยคุณ

อ่าน Tips สำห Mobile App Development บน iOS เพิ่มเติม หวังข้อมูลนี้จะเป็นประโยชน์

มาดูว่าต้องทำอะไรต่อ

ปรับภาพสำห iOS 13 Dark Mode

ภาพส่วนใหญ่ดูดีใน Dark Mode และบางทีเด้งออกมาเน้นรายละเอียด แต่ยังอาจพบภาพที่ดูแปลกหรือไม่เหมาะกับ Dark Mode

ข่าวดีคือ ปรับภาพสำห Dark Mode ได้แบบเดียวกับข้อความ

แค่เลือกภาพใน Catalog เหมือนเดิม เปลี่ยน Attributes เป็น Any, Dark ใน Attributes Inspector เพิ่ม Dark Appearance ของภาพ และเสร็จแล้ว

ตรวจจับการเปลี่ยนแปลง Dark Mode แบบโปรแกรมมิง

Developer อาจเจอสถานการณ์ต้อง Implement Appearance Changes ใน Dark Mode แบบโปรแกรมมิง ทำได้ดังนี้:

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    let userInterfaceStyle = traitCollection.userInterfaceStyle
    // Either .unspecified, .light, or .dark
    // Update your user interface based on the appearance
}
Override traitCollectionDidChange ช่วยตรวจจับการเปลี่ยนแปลง Appearance
จากนั้นแค่เปิด traitCollection.userInterfaceStyle

สามารถตรวจสอบได้ว่าตรงกับ Appearance ใหม่ที่ Implement หรือไม่:

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    let hasUserInterfaceStyleChanged = previousTraitCollection.hasDifferentColorAppearance(comparedTo: traitCollection)
    // Bool
    // Update your user interface based on the appearance
}

Override User Interface Style

ทั้งแอป

ระบบ Opt-in อัตโนมัติสำหแอปที่ Link กับ iOS 13.0 SDK ขึ้นไป ให้รองรับ Light และ Dark Appearance ทั้งคู่

ถ้าต้องการเวลาเพิ่มเติมพัฒนา Dark Mode หรืออยากเก็บแอปใน Style เดียว สามารถ Opt-out ได้ โดยใส่ Key UIUserInterfaceStyle (Value Light หรือ Dark) ใน Info.plist ของแอป

การตั้ง Key นี้ ทำให้ระบบไม่สนใจ Preference ของ User และบังคับใช้ Appearance ที่ระบุเสมอ

หมายเหตุ: การรองรับ iOS 13 Dark Mode ขึ้นเคยอย่างยิ่ง ใช้ UIUserInterfaceStyle Key Opt-out ชั่วคราวขณะปรับปรุง Dark Mode Support

หน้าจอเฉพาะ

ใน iOS 13 สามารถ Override User Interface Style บน Views หรือ View Controllers เฉพาะได้ เช่น อยากให้ View Controller ตัวหนึ่งเป็น Dark Mode แต่อื่นๆ เป็น Light Mode

Override Variable นี้ใน Top View หรือ View Controller จะแพร่กระจายลง Sub-views:

// Inside a UIViewController
override func viewDidLoad() {
    super.viewDidLoad()
    // Always adopt a dark interface style.
    overrideUserInterfaceStyle = .dark
}

Closing Notes

ขอบคุณที่อ่านครับ! เราได้สำรวจวิธีตั้งค่าแอปสำห iOS 13 Dark Mode

iOS 13 Dark Mode นำเสนอวิธีใช้สมาร์ทโฟนแบบไร้ความเครียด อาจจะมีอนาคตที่ Dark Mode แทนที่ Default Mode พื้นหลังสีขาว

ปฏิบัติตาม Coding Guidelines และ Tips นี้ คุณสามารถตั้งค่าแอปสำห Dark Mode บน iOS 13 ได้ง่าย

หากต้องการความช่วยเหลือจากผู้เชี่ยวชาญ ติดต่อ iOS Developers สำหคำถามเกี่ยวกับ iOS 13 Dark Mode ได้เลย

Follow on Twitter สำหอัปเดตเพิ่มเติม: https://twitter.com/ValueCoders