วิธีแก้ไขปัญหา UI ของ iPhone ในโหมดซูมเนื่องจากหน้าจอเปิดใช้

Nov 29 2022
ความเป็นมา เมื่อสัปดาห์ที่แล้วเราพบปัญหาแปลกๆ ที่แอป Naukri สำหรับ iOS ทำงานผิดปกติในโหมดซูมบนอุปกรณ์บางเครื่อง UI เริ่มบิดเบี้ยวและมืดมนรอบๆ แถบการนำทางด้านบนและแถบแท็บด้านล่างแบบสุ่ม
ภาพถ่ายโดย Agence Olloweb บน Unsplash

พื้นหลัง

เมื่อสัปดาห์ที่แล้ว เราพบปัญหาแปลกๆ ที่แอป Naukri สำหรับ iOS ทำงานผิดปกติในโหมดซูมบนอุปกรณ์บางเครื่อง

UI เริ่มบิดเบี้ยวและมืดมนรอบๆ แถบการนำทางด้านบนและแถบแท็บด้านล่างแบบสุ่ม

ปัญหา

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

หน้าจอเปิดตัวคืออะไร

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

เมื่อเราตรวจสอบตรรกะการใช้งานของอิมเมจเปิดใช้ในโครงการของเรา เราทราบว่ามีการเพิ่มอิมเมจเปิดใช้ขนาดต่างๆ ในไฟล์ xcassets ของเรา

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

วิธีการแก้

หลังจากดูเอกสารประกอบของ Apple แล้ว เราได้เรียนรู้วิธีที่ถูกต้องในการเพิ่มหน้าจอเปิดในแอป iOS ของคุณ

https://developer.apple.com/documentation/xcode/specifying-your-apps-launch-screen/

จะเพิ่มหน้าจอเริ่มต้นได้อย่างไร?

ก่อน Xcode 6 ตัวเลือกเดียวที่เรามีคือการจัดเตรียมภาพนิ่งภายในแคตตาล็อกเนื้อหา ต่อมาด้วย iOS 8 Xcode อนุญาตให้เราแทนที่ภาพนิ่งด้วยไฟล์สตอรี่บอร์ด ด้วยเวลาและการอัปเดตใหม่ หลายตัวเลือกและคุณสมบัติถูกเพิ่มเข้ามาเรื่อยๆ สำหรับหน้าจอเปิดใช้

สำหรับ Xcode 12 ขึ้นไป มีสองวิธีในการเปิดใช้หน้าจอ:

  1. การใช้กระดานเรื่องราว (ค่าเริ่มต้น) เพิ่มเมื่อคุณสร้างโครงการใหม่
  2. โดยใช้การplistกำหนดค่า

ใช้การplistกำหนดค่าที่คุณสามารถตั้งค่า:

  • รูปภาพ
  • ภาพเปิดตัวควรเป็นไปตามพื้นที่ปลอดภัยหรือไม่
  • พื้นหลังสี
  • การมองเห็นแถบนำทาง
  • การมองเห็นแถบแท็บ
  • การมองเห็นแถบเครื่องมือ
  • เปิดใช้งานการกำหนดค่าหน้าจอตามรูปแบบ URL
  1. ในการตั้งค่าสำหรับเป้าหมายของคุณ เลือกแท็บข้อมูล
  2. ในส่วนคุณสมบัติเป้าหมาย iOS แบบกำหนดเอง ให้ขยายปุ่ม Launch Screen
  3. คลิกปุ่มเพิ่ม (+) พิมพ์UILaunchScreenและกด Return เพื่อเพิ่มปุ่มเปิดหน้าจอไปยังรายการคุณสมบัติ หากมีUILaunchScreenคีย์อยู่แล้ว ให้ข้ามขั้นตอนนี้ไป
  4. เลือกUILaunchScreenคีย์ คลิกปุ่มเพิ่ม (+) และเพิ่มคีย์เพิ่มเติมเพื่อระบุตัวเลือกการกำหนดค่าสำหรับหน้าจอเริ่มต้นของคุณ

การใช้ไฟล์สตอรี่บอร์ด

หากคุณสร้างแอป iOS จากเทมเพลตสตอรีบอร์ด Xcode จะเพิ่มไฟล์เริ่มต้นของหน้าจอเริ่มต้นที่เรียกว่าLaunchScreen.storyboardลงในโปรเจ็กต์ของคุณ แก้ไขLaunchScreen.storyboardเพื่อกำหนดค่าหน้าจอเริ่มต้นของคุณ

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

  1. เลือก ไฟล์ > ใหม่ > ไฟล์
  2. ภายใต้ User Interface เลือก Launch Screen แล้วคลิก Next
  3. ตั้งชื่อไฟล์หน้าจอเรียกใช้งาน เลือกตำแหน่ง เลือกเป้าหมายที่คุณต้องการเพิ่มไฟล์ และคลิก สร้าง
  4. ในการตั้งค่าสำหรับเป้าหมายของคุณ เลือกแท็บทั่วไป และค้นหาส่วน "ไอคอนแอปและเปิดรูปภาพ"
  5. จากเมนูป๊อปอัพเปิดไฟล์หน้าจอ ให้เลือกไฟล์เปิดหน้าจอใหม่

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

นอกจากนี้ คุณยังสามารถเพิ่มโหมดสลีป (5) ใน didFinishLaunchingWithOptions ระหว่างการพัฒนาหน้าจอเปิดใช้ การหน่วงเวลาอาจมีประโยชน์ในการดูการออกแบบที่ใช้งานของคุณนานขึ้น

ขอบคุณมากสำหรับการอ่าน…!

อ้างอิง:

https://developer.apple.com/documentation/xcode/specifying-your-apps-launch-screen/