UIKit — คืออะไร แนวคิดหลัก และสถาปัตยกรรม

UIKit คืออะไร?

UIKit คือเฟรมเวิร์กจาก Apple ที่ให้คลาสสำหรับสร้างและจัดการอินเทอร์เฟซผู้ใช้บน iOS, iPadOS และ macOS (ผ่าน Mac Catalyst) มันทำงานเหนือ Core Animation, Core Graphics และ Quartz Core โดยทำการนามธรรมการเรนเดอร์ระดับต่ำเป็นวัตถุระดับสูง — ปุ่ม ป้าย รูปภาพ และคอนเทนเนอร์ UIKit เปิดตัวพร้อมกับ iPhone OS 1 ในปี 2007 และยังคงเป็นเฟรมเวิร์กหลักสำหรับการพัฒนา iOS ควบคู่ไปกับ SwiftUI

เฟรมเวิร์กนี้ใช้แนวทางเชิงคำสั่ง: นักพัฒนาสร้างอินสแตนซ์ของคลาส UIButton, UILabel, UIImageView กำหนดคุณสมบัติของพวกมัน (สี, ฟอนต์, ตำแหน่ง) และเพิ่มไปยังลำดับชั้นของมุมมองผ่าน addSubview การเปลี่ยนแปลงอินเทอร์เฟซทุกครั้งจะดำเนินการอย่างชัดเจน — ไม่มีการอัปเดตอัตโนมัติที่ซ่อนอยู่เบื้องหลัง นี่คือสิ่งที่ทำให้ UIKit แตกต่างจากเฟรมเวิร์กแบบประกาศเช่น SwiftUI ซึ่งการอธิบายสถานะจะวาดอินเทอร์เฟซใหม่โดยอัตโนมัติ

คลาสหลักของ UIKit

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

สำหรับข้อความ ใช้ UILabel (ข้อความคงที่), UITextField (ป้อนข้อมูลบรรทัดเดียว), UITextView (ป้อนข้อมูลหลายบรรทัด) สำหรับปุ่ม — UIButton รวมถึงปุ่มระบบ, ปุ่มกำหนดเอง และไอคอน SF Symbols สำหรับการนำทาง — UINavigationController, UITabBarController และ UISplitViewController โดยรวมแล้ว UIKit มีคลาสสาธารณะมากกว่า 200 คลาส

สถาปัตยกรรม UIKit: เลเยอร์และลำดับชั้นของมุมมอง

สถาปัตยกรรม UIKit สร้างขึ้นบนเลเยอร์: แต่ละเลเยอร์รับผิดชอบในด้านการแสดงผลของตัวเอง ในระดับต่ำสุดคือ Core Graphics — เอนจินเรนเดอร์สำหรับเส้นทาง ข้อความ และรูปภาพ เหนือขึ้นไปคือ Core Animation ซึ่งจัดการการประกอบเลเยอร์ (CALayer) และอนิเมชันระหว่างสถานะ UIKit สร้าง API เชิงวัตถุบนพวกมัน: UIView, UIViewController และ UIResponder

ทุกแอปพลิเคชันมีลำดับชั้นของมุมมอง — ต้นไม้ที่มี UIWindow เป็นราก ด้านล่างคือ UIViewController หลัก มุมมองของมัน และมุมมองย่อยที่ซ้อนอยู่ภายใน เหตุการณ์การสัมผัสจะแพร่กระจายไปตามห่วงโซ่ตัวตอบสนอง: จากมุมมองที่ซ้อนลึกที่สุดไปยังพาเรนต์และขึ้นไปจนถึง UIApplication หากไม่มีวัตถุใดจัดการการสัมผัส มันจะถูกละเว้น

UIView และ CALayer

แต่ละ UIView ประกอบด้วย CALayer ที่จัดการการเรนเดอร์พิกเซลบนหน้าจอ มุมมองจัดการการสัมผัสและการเข้าถึง; เลเยอร์จัดการกราฟิก — เงา, cornerRadius, เส้นขอบ, การแปลง การแยกนี้ช่วยให้สามารถย้ายกราฟิกหนักไปยังเธรดแยกต่างหาก (เซิร์ฟเวอร์เรนเดอร์) โดยไม่บล็อกเธรดหลัก Apple แนะนำให้ทำงานโดยตรงกับ CALayer หากมีมุมมองมากกว่า 200 มุมมองบนหน้าจอ — ซึ่งจะลดภาระของ CPU

ห่วงโซ่ตัวตอบสนองโดยละเอียด

ห่วงโซ่ตัวตอบสนอง เริ่มต้นด้วยวัตถุที่ได้รับเหตุการณ์การสัมผัสเป็นอันดับแรก หากมันไม่จัดการเหตุการณ์ (เมธอด touchesBegan ไม่ได้ถูกโอเวอร์ไรด์) เหตุการณ์จะถูกส่งต่อไปยังตัวตอบสนองถัดไปในห่วงโซ่: next, superview, next responder, UIViewController, UIWindow, UIApplication, App Delegate ซึ่งช่วยให้สามารถสกัดกั้นท่าทางทั่วโลกและเหตุการณ์แป้นพิมพ์ในระดับซีนโดยไม่ต้องเพิ่มตัวจัดการในทุกมุมมอง

วงจรชีวิตของ UIViewController

แต่ละ UIViewController ผ่านลำดับเหตุการณ์ที่กำหนดอย่างเคร่งครัด วงจรชีวิตรวมถึงเฟส: การเริ่มต้น, การโหลดมุมมอง, การปรากฏบนหน้าจอ, การอัปเดตเลย์เอาต์เมื่อหมุน, การซ่อน, การออกจากหน้าจอ และการปล่อยหน่วยความจำ นักพัฒนาโอเวอร์ไรด์เมธอดที่เกี่ยวข้องเพื่อดำเนินการโค้ดกำหนดเองในแต่ละขั้นตอน

class ProfileViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        loadUserProfile()
    }

    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        clearCache()
    }
}

ใน viewDidLoad อินเทอร์เฟซถูกกำหนดค่า — สร้างมุมมองย่อย, ตั้งค่าข้อจำกัด, สมัครสมาชิกดีลิเกต ใน viewWillAppear ดำเนินการก่อนการแสดงผล: โหลดข้อมูลสดจากเครือข่าย, อัปเดตค่า viewDidDisappear คือที่สำหรับยกเลิกการสมัครสมาชิกการแจ้งเตือนและทำความสะอาดข้อมูลชั่วคราว การเรียก super เป็นสิ่งจำเป็นในการโอเวอร์ไรด์ทั้งหมด มิฉะนั้นห่วงโซ่เหตุการณ์จะเสีย

การจัดการหน่วยความจำและ viewDidUnload

ในเวอร์ชัน iOS เก่า มีเมธอด viewDidUnload ซึ่งถูกเรียกเมื่อหน่วยความจำไม่เพียงพอ ตั้งแต่ iOS 6 เป็นต้นไป เมธอดถูกลบออก — ตอนนี้ UIKit จะยกเลิกการโหลดมุมมองของคอนโทรลเลอร์โดยอัตโนมัติเมื่อมองไม่เห็น นักพัฒนาเพียงแค่ประกาศการอ้างอิงมุมมองทั้งหมดเป็น weak เพื่อให้ ARC สามารถปล่อยหน่วยความจำได้อย่างถูกต้องเมื่อได้รับคำเตือนจากระบบ

การเปลี่ยนระหว่างคอนโทรลเลอร์

UIKit รองรับการเปลี่ยนสองประเภท: segue (ผ่าน Storyboard) และการนำทางแบบโปรแกรมผ่าน UINavigationController การเปลี่ยนแบบโปรแกรมมีลักษณะดังนี้: navigationController?.pushViewController(detailVC, animated: true) ในกรณีนี้ วงจรชีวิตของ detailVC ดำเนินไปตามปกติ — viewDidLoad ถูกเรียกหนึ่งครั้ง, viewWillAppear ถูกเรียกทุกครั้งที่ปรากฏ

Auto Layout และเลย์เอาต์แบบปรับเปลี่ยนได้

Auto Layout คือระบบกำหนดตำแหน่งที่อิงตามความสัมพันธ์ทางคณิตศาสตร์ (ข้อจำกัด) แทนที่จะใช้พิกัด X และ Y แบบตายตัว นักพัฒนาอธิบายกฎ: “ปุ่มอยู่ทางขวาของป้ายด้วยระยะห่าง 16pt” หรือ “mุมมองขยายตามความกว้างของหน้าจอด้วยระยะขอบ 20pt ทางซ้ายและขวา” ระบบจะแก้ระบบสมการที่เกิดขึ้นในรันไทม์ ปรับอินเทอร์เฟซให้เข้ากับขนาดหน้าจอใด ๆ

ข้อจำกัดสามารถตั้งค่าได้ใน Interface Builder (ผ่านการลากและวาง) หรือโดยการเขียนโปรแกรมใน Swift ข้อจำกัดแต่ละอันคืออินสแตนซ์ของคลาส NSLayoutConstraint พร้อมพารามิเตอร์: firstItem, firstAttribute, relation, secondItem, secondAttribute, multiplier, constant ข้อจำกัดถูกเปิดใช้งานผ่าน isActive = true หรือเป็นกลุ่มผ่าน NSLayoutConstraint.activate()

Safe Area และ Layout Margins

ด้วยการเปิดตัว iPhone X (2017) Apple ได้แนะนำ Safe Area — พื้นที่หน้าจอที่ปลอดจากรอยบาก มุมโค้งมน และตัวบ่งชี้แถบโฮม ข้อจำกัดควรยึดติดกับ view.safeAreaLayoutGuide ไม่ใช่ view Layout Margins เพิ่มระยะห่างภายในให้กับมุมมอง โดยค่าเริ่มต้น 8pt หรือ 16pt ขึ้นอยู่กับบริบท การใช้ safeAreaLayoutGuide รับประกันการแสดงผลที่ถูกต้องบน iPhone และ iPad ทุกรุ่น

อนิเมชันข้อจำกัด

Auto Layout รองรับอนิเมชันผ่านการเปลี่ยนค่าคงที่ของข้อจำกัด เพียงอัปเดต constant ของข้อจำกัดและเรียก UIView.animate ด้วย layoutIfNeeded ภายในบล็อกอนิเมชัน ระบบจะคำนวณตำแหน่งของมุมมองทั้งหมดในลำดับชั้นใหม่อย่างราบรื่น เทคนิคนี้ใช้สำหรับบล็อกที่ขยายได้ แผงแป้นพิมพ์แบบปรับเปลี่ยนได้ และการเปลี่ยนทิศทางของหน้าจอ

การทำงานกับตารางและคอลเลกชัน

UITableView และ UICollectionView เป็นเครื่องมือที่มีประสิทธิภาพสองอย่างของ UIKit สำหรับแสดงรายการและกริด UITableView เหมาะสำหรับรายการแนวตั้งคอลัมน์เดียว (แชท, การตั้งค่า, ฟีดข่าว) UICollectionView สำหรับกริด รายการแนวนอน คารูเซล และเลย์เอาต์กำหนดเอง (แกลเลอรี, ผลิตภัณฑ์, ปฏิทิน) ทั้งสองคลาสใช้รูปแบบการมอบหมายเพื่อแยกข้อมูลออกจากลักษณะที่ปรากฏ

แหล่งข้อมูลคือโปรโตคอล UITableViewDataSource พร้อมเมธอดที่จำเป็น numberOfRowsInSection และ cellForRowAt UITableViewDelegate จัดการการแตะบนเซลล์ ความสูงของแถว และเหตุการณ์การเลื่อน กลไก reuse identifier นำเซลล์ที่เลื่อนออกจากหน้าจอกลับมาใช้ใหม่ ซึ่งสำคัญอย่างยิ่งต่อประสิทธิภาพในรายการขนาดใหญ่

class ContactsViewController: UITableViewController {

    private let contacts = ["แอนนา", "บอริส", "วิกเตอร์"]

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.register(UITableViewCell.self,
                           forCellReuseIdentifier: "cell")
    }

    override func tableView(_ tableView: UITableView,
                          numberOfRowsInSection section: Int) -> Int {
        return contacts.count
    }

    override func tableView(_ tableView: UITableView,
                          cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell",
                                                 for: indexPath)
        var content = cell.defaultContentConfiguration()
        content.text = contacts[indexPath.row]
        cell.contentConfiguration = content
        return cell
    }
}

ตัวอย่างแสดงคอนโทรลเลอร์ขนาดเล็กสำหรับแสดงอาร์เรย์ของสตริง เซลล์ถูกกำหนดค่าผ่าน UIListContentConfiguration — API ที่ทันสมัย (iOS 14+) ซึ่งแทนที่ textLabel และ detailTextLabel ที่เลิกใช้งานแล้ว การลงทะเบียนคลาสเซลล์ใน viewDidLoad เป็นสิ่งจำเป็น มิฉะนั้นแอปพลิเคชันจะล้มเหลวด้วยข้อยกเว้นรันไทม์

UICollectionView และ Compositional Layout

เริ่มตั้งแต่ iOS 13 Apple แนะนำ UICollectionViewCompositionalLayout สำหรับสร้างเลย์เอาต์ที่ซับซ้อน นักพัฒนาอธิบายส่วน กลุ่ม รายการ และขนาดของพวกมันในเชิงประกาศ — ได้กริดที่มีเรขาคณิตตามอำเภอใจ: แถบ, กริด 2x2, คารูเซล หรือลวดลาย Compositional Layout ได้แทนที่ UICollectionViewFlowLayout ที่เลิกใช้งานแล้วสำหรับโปรเจกต์ใหม่ทั้งหมด เมื่อรวมกับ DiffableDataSource การอัปเดตคอลเลกชันจะลดลงเหลือการเรียก apply(snapshot) เพียงครั้งเดียว และอนิเมชันการเปลี่ยนแปลงจะดำเนินการโดยอัตโนมัติ

ตัวอย่างโค้ด Swift

ด้านล่างนี้คือตัวอย่างเชิงปฏิบัติสองตัวอย่างของการใช้ UIKit ในงานจริง: การสร้างมุมมองกำหนดเองด้วยเงาและมุมโค้งมน และการจัดการท่าทางปัดเพื่อลบรายการออกจากรายการ

extension UIView {
    func applyCardStyle() {
        layer.cornerRadius = 12
        layer.shadowOpacity = 0.15
        layer.shadowRadius = 8
        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.masksToBounds = false
    }
}

@objc private func handleSwipe(_ gesture: UISwipeGestureRecognizer) {
    guard let swipedView = gesture.view else { return }
    UIView.animate(withDuration: 0.3) {
        swipedView.alpha = 0
        swipedView.transform = CGAffineTransform(translationX: 300, y: 0)
    } completion: { _ in
        swipedView.removeFromSuperview()
    }
}

ส่วนขยาย applyCardStyle เพิ่มเงาและมุมโค้งมนให้กับมุมมองใด ๆ — มีประโยชน์สำหรับการ์ดผลิตภัณฑ์ โปรไฟล์ และการแจ้งเตือน เมธอด handleSwipe พร้อมอนิเมชันจะลบรายการเมื่อผู้ใช้ปัดไปทางขวาบนมัน ตัวจัดการถูกเพิ่มไปยังมุมมองผ่าน addGestureRecognizer ด้วยการกำหนดค่า UISwipeGestureRecognizer(direction: .right) การตั้งค่า masksToBounds = false เป็นสิ่งสำคัญเพื่อป้องกันไม่ให้เงาถูกตัดด้วยขอบเขตของมุมมอง

สำหรับอินเทอร์เฟซที่ซับซ้อนยิ่งขึ้น ให้ใช้ UIStackView — คอนเทนเนอร์ที่กระจายมุมมองที่ซ้อนกันโดยอัตโนมัติในแนวนอนหรือแนวตั้ง Stack View ทำให้เลย์เอาต์ง่ายขึ้น: ไม่จำเป็นต้องตั้งค่าข้อจำกัดสำหรับแต่ละองค์ประกอบ เพียงข้อจำกัดเดียวสำหรับสแต็กเองก็พอ