Size Class: คืออะไร, คลาสขนาด Compact และ Regular ใน iOS
Size Class เป็นกลไกของ iOS สำหรับเลย์เอาต์แบบปรับตัวได้ ซึ่งแบ่งอุปกรณ์ทั้งหมดออกเป็นสองประเภทตามแต่ละแกน: Compact (แคบ/สั้น) และ Regular (กว้าง/ยาว) การรวมกันของค่าเหล่านี้กำหนดว่าอินเทอร์เฟซจะแสดงบน iPhone, iPad, Mac Catalyst และ CarPlay อย่างไร ตาม Apple Human Interface Guidelines, 2024 Size Class ช่วยให้สร้าง storyboard เดียวสำหรับอุปกรณ์ทั้งหมดโดยใช้ Auto Layout และ UITraitCollection ระบบทำงานบนอุปกรณ์ iOS ทั้งหมดตั้งแต่ iOS 8
ประเด็นสำคัญ
- Size Class เป็นระบบการจำแนกขนาดใน iOS ที่มีสองค่าต่อแกน: Compact (บีบอัด) และ Regular (ขนาดเต็ม)
- Size Class แนวนอน บน iPhone ในแนวตั้งคือ Compact บน iPad — Regular แนวตั้งคือ Regular บน iPhone ทั้งหมดยกเว้น SE
- UITraitCollection เป็นอินเทอร์เฟซเชิงโปรแกรมสำหรับรับ Size Class ปัจจุบันและตอบสนองต่อการเปลี่ยนแปลงคอลเล็กชันลักษณะในรันไทม์
- Interface Builder ช่วยให้กำหนดค่าข้อจำกัดและการมองเห็นองค์ประกอบสำหรับแต่ละชุด Size Class ด้วยเครื่องมือ Vary for Traits
- เลย์เอาต์แบบปรับตัวได้ ด้วย Size Class แทนที่ storyboard แยกสำหรับ iPhone และ iPad — ไฟล์เดียวปรับให้เข้ากับอุปกรณ์ทั้งหมด
Size Class คืออะไร?
Size Class เป็นการจำแนกหน้าจอเชิงนามธรรมใน iOS ที่ Apple นำมาใช้ใน iOS 8 เพื่อรวมเลย์เอาต์แบบปรับตัวได้ แทนที่จะตรวจสอบรุ่นอุปกรณ์เฉพาะ Size Class กำหนดลักษณะสองประการ: พื้นที่แนวนอนและแนวตั้งที่มีอยู่ แต่ละลักษณะใช้หนึ่งในสองค่า — Compact (พื้นที่จำกัด) หรือ Regular (พื้นที่เพียงพอ) การรวมกันของค่าเหล่านี้ก่อให้เกิดคอลเล็กชันลักษณะ (trait collection) ซึ่งส่งต่อไปยังองค์ประกอบอินเทอร์เฟซทั้งหมด
ประวัติและวัตถุประสงค์
ก่อน Size Class นักพัฒนาสร้าง storyboard แยกสำหรับ iPhone และ iPad หรือใช้การตรวจสอบ UI_USER_INTERFACE_IDIOM() ในโค้ด สิ่งนี้นำไปสู่การทำซ้ำโค้ด storyboard ที่ใหญ่และความยากลำบากในการรองรับขนาดหน้าจอใหม่ Size Class แก้ปัญหาโดยเสนอกระบบสากล: นักพัฒนากำหนดค่าอินเทอร์เฟซสำหรับ 4 ชุด Compact/Regular และ iOS เลือกชุดที่เหมาะสมโดยอัตโนมัติ ด้วยการถือกำเนิดของ Split View บน iPad และขนาด iPhone ที่หลากหลาย ระบบจึงกลายเป็นสิ่งจำเป็นสำหรับเลย์เอาต์แบบปรับตัวได้
Size Class ทำงานอย่างไร
Size Class ถูกคำนวณโดย iOS ตามความกว้างและความสูงของหน้าจอปัจจุบัน โดยคำนึงถึงการวางแนวและการทำงานหลายอย่างพร้อมกัน ค่าไม่ได้ผูกกับพิกเซลเฉพาะ — มันเป็นหมวดหมู่เชิงตรรกะ ตัวอย่างเช่น iPhone 16 Pro ในแนวตั้งมีแนวนอน Compact และแนวตั้ง Regular iPhone เดียวกันในแนวนอน — Compact บนทั้งสองแกน iPad ใน Split View ที่มีแอปที่ 1/3 ของหน้าจอได้รับแนวนอน Compact แม้ว่าในโหมดเต็มหน้าจอจะเป็น Regular ระบบอัปเดต Size Class โดยอัตโนมัติเมื่อเปลี่ยนการวางแนวหรือ Split View
คลาสขนาดมีอะไรบ้าง
Size Class ใช้สี่ชุดของสองค่าบนสองแกน แต่ละชุดมีการใช้งานตามประเภทของอุปกรณ์และการวางแนวของมัน การเข้าใจชุดเหล่านี้เป็นพื้นฐานสำหรับการออกแบบอินเทอร์เฟซแบบปรับตัวได้สำหรับ iOS ระบบครอบคลุมอุปกรณ์ Apple ปัจจุบันทั้งหมด: iPhone, iPad, Mac Catalyst และ CarPlay Apple แนะนำให้เริ่มการออกแบบด้วยชุด wAny hAny (เลย์เอาต์พื้นฐาน) และปรับแต่งสำหรับชุดเฉพาะ
สี่ชุด Size Class
wCompact hRegular — iPhone ในแนวตั้ง (ยกเว้น Plus/Max ในบางกรณี) wCompact hCompact — iPhone SE/6/7/8 ในแนวนอน wRegular hRegular — iPad เต็มหน้าจอในการวางแนวใดก็ได้ iPhone Plus/Max ในแนวนอน wRegular hCompact — iPad ในแนวนอนที่มีเนื้อหาแคบ แต่ละชุดกำหนดว่าข้อจำกัดและองค์ประกอบใดทำงานอยู่ นักพัฒนาสามารถกำหนดลักษณะที่ปรากฏสำหรับแต่ละชุดแยกต่างหากใน Interface Builder
Size Class สำหรับ Mac Catalyst
บน Mac Catalyst Size Class เป็น wRegular hRegular เสมอ — อินเทอร์เฟซขนาดเต็ม ซึ่งหมายความว่าเวอร์ชัน Mac ของแอป iPad ได้รับพื้นที่สูงสุด นักพัฒนาสามารถใช้การตรวจสอบเพิ่มเติมผ่าน UIScreen.traitCollection.userInterfaceIdiom เพื่อแยกความแตกต่างระหว่าง Mac และ iPad Size Class บน Mac ทำงานได้อย่างเสถียร แต่แอป Catalyst มักต้องการการปรับเพิ่มเติมสำหรับเมาส์และคีย์บอร์ดที่เกินกว่า Size Class
Size Class ส่งผลต่อเลย์เอาต์แบบปรับตัวได้อย่างไร
Size Class กำหนดว่าข้อจำกัด Auto Layout ใดทำงานอยู่ องค์ประกอบอินเทอร์เฟซใดมองเห็นได้ และจัดเรียง subview อย่างไร นักพัฒนาสามารถกำหนดข้อจำกัดที่แตกต่างกันสำหรับ Size Classes ที่แตกต่างกัน และ iOS จะสลับโดยอัตโนมัติเมื่อคอลเล็กชันลักษณะเปลี่ยน ตัวอย่างเช่น บน iPad (wRegular hRegular) ตารางที่มีรายละเอียดแสดงใน Master-Detail บน iPhone (wCompact hRegular) — ใน Navigation Stack นี่เป็นสถานการณ์หลักของเลย์เอาต์แบบปรับตัวได้กับ Size Class
การตั้งค่าและลบข้อจำกัด
ใน Interface Builder นักพัฒนาเลือกชุด Size Class ผ่านปุ่ม Vary for Traits และเพิ่มข้อจำกัดที่ควรใช้เฉพาะกับชุดนั้น ข้อจำกัดที่ตั้งไว้สำหรับ wAny hAny จะใช้เสมอ ข้อจำกัดที่ตั้งไว้สำหรับชุดเฉพาะจะทำงานเมื่อ Size Class ตรงกันเท่านั้น หากไม่มีข้อจำกัดพิเศษสำหรับชุดใด จะใช้ข้อจำกัดพื้นฐาน เมื่อ Size Class เปลี่ยนแปลง iOS จะทำให้การเปลี่ยนระหว่างชุดข้อจำกัดเป็นภาพเคลื่อนไหว
การซ่อนและแสดงองค์ประกอบ
แฟล็ก Installed ใน Interface Builder ช่วยให้ซ่อนองค์ประกอบสำหรับ Size Classes เฉพาะได้ นักพัฒนาทำเครื่องหมายองค์ประกอบเป็น Uninstalled สำหรับชุดที่เลือก ตัวอย่างเช่น ปุ่ม Details มองเห็นได้เฉพาะบน iPad (wRegular hRegular) และซ่อนบน iPhone ซึ่งง่ายกว่าการจัดการ isHidden ในโค้ด สำหรับการซ่อนเชิงโปรแกรม ให้แทนที่ traitCollectionDidChange หรือใช้เมธอด willTransition โดยตรวจสอบ Size Class ปัจจุบัน
การใช้ Size Class ใน Interface Builder
Interface Builder มีเครื่องมือภาพ Vary for Traits สำหรับทำงานกับ Size Class นักพัฒนาเลือกชุดที่ต้องการ (ความกว้างและความสูง) และ Interface Builder แสดงตัวอย่างหน้าจอสำหรับชุดนั้น การเปลี่ยนแปลงข้อจำกัด ขนาด แบบอักษร และการมองเห็นทั้งหมดที่ทำในโหมดนี้ใช้กับ Size Class ที่เลือกเท่านั้น การออกจากโหมดจะบันทึกการตั้งค่า วิธีการนี้แทนที่ความจำเป็นในการเขียนโค้ดการปรับสำหรับอุปกรณ์ต่างๆ
การทำงานทีละขั้นตอนใน Interface Builder
ในการ กำหนดค่า Size Class ใน Interface Builder นักพัฒนาเปิด storyboard เลือก view controller และคลิกปุ่ม Vary for Traits ในแผงด้านล่าง จากนั้นเลือก Width (Compact, Regular หรือ Any) และ Height (Compact, Regular หรือ Any) อินเทอร์เฟซสลับไปยังโหมดแก้ไขสำหรับชุดที่เลือก การเปลี่ยนแปลงข้อจำกัด การเพิ่มหรือลบองค์ประกอบทั้งหมดใช้เฉพาะกับชุดนี้เท่านั้น หลังจากตั้งค่าเสร็จ นักพัฒนาออกจากโหมด — การเปลี่ยนแปลงจะถูกบันทึกสำหรับชุด Size Class เฉพาะ
แนวปฏิบัติที่ดีที่สุด
Apple แนะนำให้ เริ่มต้น ด้วยเลย์เอาต์พื้นฐานสำหรับ wAny hAny (ชุดพื้นฐานที่ครอบคลุมอุปกรณ์ทั้งหมด) จากนั้นปรับแต่งเลย์เอาต์สำหรับชุดที่มีปัญหา: wCompact hRegular (iPhone ในแนวตั้ง) และ wRegular hRegular (iPad) ไม่แนะนำให้กำหนดค่าทุกชุด — เฉพาะที่เลย์เอาต์เสีย การกำหนดค่ามากเกินไปทำให้การบำรุงรักษาซับซ้อน สำหรับการปรับขนาดแบบอักษรที่แม่นยำ ให้ใช้ Dynamic Type แทน Size Class: แบบอักษรปรับให้เข้ากับขนาดหน้าจอโดยอัตโนมัติ
Size Class ในโค้ด: UITraitCollection
UITraitCollection เป็นคลาส iOS ที่มี Size Class ปัจจุบันและลักษณะสภาพแวดล้อมอื่นๆ (force touch, มาตราส่วนหน้าจอ, สำนวนอินเทอร์เฟซผู้ใช้) แต่ละ UIView และ UIViewController มี traitCollection ของตัวเอง ซึ่งสืบทอดจาก parent นักพัฒนาได้รับ Size Class ผ่าน traitCollection.horizontalSizeClass และ traitCollection.verticalSizeClass ซึ่งส่งคืน UIUserInterfaceSizeClass (.compact, .regular หรือ .unspecified) การเปลี่ยนแปลง Size Class ถูกติดตามโดยการแทนที่ traitCollectionDidChange
ตัวอย่าง: การสลับเลย์เอาต์ในโค้ด
พิจารณา ตัวอย่าง การปรับเลย์เอาต์ UICollectionView ให้เข้ากับ Size Class บน iPad (wRegular hRegular) ใช้ UICollectionViewCompositionalLayout สองคอลัมน์ บน iPhone (wCompact hRegular) — หนึ่งคอลัมน์ โค้ดตรวจสอบ Size Class แนวนอนและเลือกเลย์เอาต์ที่เหมาะสม เมื่อหมุนหรือเปลี่ยนเป็น Split View iOS จะเรียก traitCollectionDidChange และคอนโทรลเลอร์สลับเลย์เอาต์ด้วยภาพเคลื่อนไหว
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}การตอบสนองต่อการเปลี่ยนแปลงคอลเล็กชันลักษณะ
เมธอด traitCollectionDidChange ถูกเรียกเมื่อมีการเปลี่ยนแปลง Size Class ใดๆ: การหมุนอุปกรณ์ การเข้า/ออก Split View การเชื่อมต่อจอแสดงผลภายนอก ในเมธอดนี้ นักพัฒนาอัปเดตเลย์เอาต์ โหลดคอลเล็กชันซ้ำ อัปเดตลำดับความสำคัญข้อจำกัด หรือเปลี่ยนการมองเห็นองค์ประกอบ สิ่งสำคัญคือต้องตรวจสอบว่า Size Class เปลี่ยนไปจริงหรือไม่ ไม่ใช่ลักษณะอื่น: เปรียบเทียบ traitCollection.horizontalSizeClass กับ previousTraitCollection?.horizontalSizeClass การเพิ่มประสิทธิภาพป้องกันการวาดซ้ำที่ไม่จำเป็นเมื่อ force touch หรือมาตราส่วนหน้าจอเปลี่ยน
คุณสมบัติ Size Class บนอุปกรณ์ต่างๆ
อุปกรณ์ Apple ที่แตกต่างกัน มีชุด Size Class ที่แตกต่างกัน และนักพัฒนาต้องคำนึงถึงคุณสมบัติเหล่านี้ iPhone ในแนวตั้ง — wCompact hRegular ในแนวนอน — ขึ้นอยู่กับรุ่น: iPhone SE/6/7/8 (wCompact hCompact), iPhone X และใหม่กว่า (wCompact hCompact หรือ wCompact hRegular ขึ้นอยู่กับเนื้อหา) iPad ในโหมดเต็มหน้าจอ — wRegular hRegular ใน Split View — สามารถเป็น wCompact hRegular (1/3 หน้าจอ) หรือ wRegular hRegular (2/3 หน้าจอ) Mac Catalyst — wRegular hRegular เสมอ
iPhone: ทุกขนาด
บน iPhone Size Class มีความเสถียรสำหรับรุ่นส่วนใหญ่ แต่มีความละเอียดอ่อน iPhone Plus (6+, 7+, 8+) และ Max (X, XS, 11 Pro, 13–16 Pro Max) ในแนวนอนมี wRegular hCompact — เช่นเดียวกับ iPad mini ซึ่งช่วยให้วางเนื้อหาในสองคอลัมน์บน iPhone ขนาดใหญ่ในแนวนอน iPhone SE (รุ่นที่ 1–3) ในแนวนอน — wCompact hCompact Size Class แนวตั้งบน iPhone ทั้งหมดในแนวตั้งคือ Regular ยกเว้น iPhone SE ในแนวนอนที่มันเป็น Compact แนวนอนคือ Compact เสมอสำหรับแนวตั้งและแนวนอน (ยกเว้น Plus/Max ในแนวนอน)
iPad และ Split View
iPad ในโหมดเต็มหน้าจอ — wRegular hRegular ให้ความยืดหยุ่นของเลย์เอาต์สูงสุด ใน Split View พฤติกรรมเปลี่ยนไป: หากแอปครอบครอง 1/3 ของหน้าจอ (Slide Over หรือ Split ที่ 1/3) Size Class แนวนอนจะกลายเป็น Compact แม้ว่าแนวตั้งจะยังคงเป็น Regular ที่ 2/3 หน้าจอ — wRegular hRegular นักพัฒนาควรทดสอบอินเทอร์เฟซในทุกโหมด Split View เนื่องจาก Size Class เปลี่ยนแปลงแบบไดนามิก Apple แนะนำให้ใช้ Size Class ร่วมกับ UISplitViewController เพื่อพฤติกรรมที่สอดคล้องกันบน iPad
คำถามที่พบบ่อย
Size Class แตกต่างจากเบรกพอยต์ใน CSS อย่างไร?
Size Class เป็นระบบไม่ต่อเนื่องที่มี 4 ชุด ในขณะที่เบรกพอยต์ CSS เป็นระบบต่อเนื่องที่มีจำนวนจุดตามอำเภอใจ Size Class นามธรรมจากขนาดหน้าจอเฉพาะ จัดกลุ่มอุปกรณ์ตามพฤติกรรม เบรกพอยต์ CSS ผูกกับพิกเซล Size Class — ผูกกับหมวดหมู่ตรรกะ Compact/Regular
ทำไม iPhone Plus ในแนวนอนถึงมี Size Class แนวนอนเป็น Regular?
iPhone Plus/Max ในแนวนอนมีความกว้างหน้าจอเพียงพอที่จะแสดงเนื้อหาในสองคอลัมน์ (เช่น iPad mini) Apple กำหนดแนวนอนเป็น Regular เพื่อให้นักพัฒนาสามารถใช้เลย์เอาต์หลายคอลัมน์โดยไม่ต้องตรวจสอบเพิ่มเติม นี่เป็นข้อยกเว้นของกฎ Compact สำหรับ iPhone
สามารถเปลี่ยน Size Class ด้วยโปรแกรมได้หรือไม่?
Size Class ถูกกำหนดโดย iOS ตามคุณสมบัติจริงของอุปกรณ์และไม่สามารถเปลี่ยนแปลงได้จากโค้ดแอป นักพัฒนาสามารถตอบสนองต่อค่าปัจจุบันเท่านั้น ระบบ UI สามารถแทนที่ Size Class สำหรับองค์ประกอบระบบ แต่ในแอปเป็นไปไม่ได้
Size Class ทำงานกับ SwiftUI อย่างไร?
SwiftUI ไม่ได้ใช้ Size Class โดยตรง — แต่นักพัฒนาใช้ตัวปรับ @Environment(\.horizontalSizeClass) เพื่ออ่านค่าปัจจุบัน SwiftUI มีเครื่องมือระดับสูงกว่า: Size Classes และ AnyLayout กับโปรโตคอล Layout สำหรับเลย์เอาต์แบบปรับตัวได้
Size Class อัปเดตเมื่อเชื่อมต่อจอภาพภายนอกหรือไม่?
ใช่ เมื่อเชื่อมต่อจอแสดงผลภายนอกผ่าน Stage Manager หรือ Sidecar iOS จะอัปเดต Size Class จอภาพภายนอกมักได้รับ wRegular hRegular ในขณะที่หน้าจอหลักยังคง Size Class ของมัน traitCollectionDidChange ถูกเรียกสำหรับหน้าต่างบนแต่ละหน้าจออย่างอิสระ
สรุป
- Size Class เป็นระบบจำแนกหน้าจอ iOS ที่มีสองค่า Compact/Regular ต่อแกน รวม 4 ชุด
- iPhone ในแนวตั้ง — wCompact hRegular iPad ในโหมดเต็มหน้าจอ — wRegular hRegular iPhone Plus/Max ในแนวนอน — wRegular hCompact
- Interface Builder มี Vary for Traits สำหรับการกำหนดค่าภาพของข้อจำกัดและการมองเห็นสำหรับแต่ละ Size Class
- UITraitCollection เป็น API เชิงโปรแกรมสำหรับอ่าน Size Class ผ่าน horizontalSizeClass และ verticalSizeClass การเปลี่ยนแปลงถูกติดตามใน traitCollectionDidChange
- Split View บน iPad เปลี่ยน Size Class แบบไดนามิก: ที่ 1/3 หน้าจอแนวนอนกลายเป็น Compact ซึ่งต้องปรับเลย์เอาต์
- SwiftUI มี @Environment(\.horizontalSizeClass) สำหรับอ่าน Size Class และ AnyLayout สำหรับสลับระหว่างเลย์เอาต์ในรันไทม์
- แนะนำ ให้เริ่มด้วยเลย์เอาต์สำหรับ wAny hAny จากนั้นปรับสำหรับ wCompact hRegular (iPhone) และ wRegular hRegular (iPad) โดยไม่โอเวอร์โหลดชุดที่เหลือ
เราจะพัฒนาแอปพลิเคชันบนมือถือแบบครบวงจร
IT Sectr สร้างแอปพลิเคชัน iOS และ Android สำหรับสตาร์ทอัพและธุรกิจตั้งแต่ปี 2017 เราจะให้คำแนะนำและเสนอวิธีแก้ปัญหาที่ดีที่สุดแก่คุณ
อ่านเพิ่มเติม