สิ่งแวดล้อม

• macOS มอนเทอเรย์ เวอร์ชัน 12.4
• Xcode เวอร์ชัน 14.0 (14A309)
• ไอโอเอส 16.0

หากคุณกำลังพัฒนาวิดเจ็ต iOS เป็นครั้งแรก เราขอแนะนำให้คุณอ่านเกี่ยวกับวิธีสร้างส่วนขยายวิดเจ็ต ในบทความนี้ ฉันจะเน้นคำอธิบายของฉันเกี่ยวกับวิธีพัฒนา Lock Screen Widget และฉันจะไม่กล่าวถึงวิธีการทำงานของ WidgetKit แต่จะช่วยให้คุณเข้าใจวิธีพัฒนาวิดเจ็ตที่ซับซ้อนมากขึ้นอย่างแน่นอน

เอกสารประกอบของ Apple: การสร้างวิดเจ็ตล็อคหน้าจอ

WWDC2022: ภาวะแทรกซ้อนและวิดเจ็ต: โหลด ใหม่

วิดเจ็ตล็อคหน้าจอคืออะไร?

ด้วยแรงบันดาลใจจากหน้าปัด Apple Watchที่คุณกดค้างไว้เพื่อเข้าสู่โปรแกรมแก้ไข ตอนนี้คุณสามารถกดบนหน้าจอล็อคของ iPhone ของคุณค้างไว้เพื่อเข้าสู่อินเทอร์เฟซการแก้ไขใหม่ ให้คุณปรับแต่งหน้าจอล็อคและเพิ่มวิดเจ็ตได้

มาเริ่มติดตั้งวิดเจ็ตบนหน้าจอล็อคกันเลย!

1 — เพิ่มส่วนขยายวิดเจ็ตในโครงการของคุณ

หากคุณยังใหม่กับวิดเจ็ต iOS คุณต้องเพิ่มเป้าหมายใหม่ในโครงการของคุณก่อน

File > New > Target

Widget Extensionบนแท็ บiOS ให้ค้นหา

เพิ่มชื่อผลิตภัณฑ์ของคุณ (LockScreenWidget สำหรับตัวอย่างนี้) จากนั้นคลิกFinishปุ่ม ActivateXcode อาจขอให้คุณเปิดใช้ งานแบบแผน คลิก

ควรเพิ่มเป้าหมายใหม่ในโครงการของคุณ

2 — มาเพิ่มตระกูล Widget ใหม่กันเถอะ

ก่อนอื่น ในการกำหนดค่าวิดเจ็ตของคุณ ให้เพิ่มตัวแก้ไขตระกูลที่รองรับ.supportedFamilies()และเป็นพารามิเตอร์สำหรับตระกูลใหม่ 3 ตระกูล.supportedFamilies([.accessoryCircular, .accessoryInline, .accessoryRectangular])

วิดเจ็ตมีตระกูลต่างๆ อยู่แล้ว และวิดเจ็ตหน้าจอล็อกเป็น 3 ตระกูลใหม่ที่ถูกเพิ่มเข้าไปในรายการ:

• WidgetFamily.accessoryCircular
• WidgetFamily.accessoryRectangular
• WidgetFamily.accessoryInline

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

struct LockScreenWidget_Previews: PreviewProvider {
    static var previews: some View {
        LockScreenWidgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .accessoryCircular))
	    .previewDisplayName("Accessory Circular")
		
        LockScreenWidgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .accessoryInline))
            .previewDisplayName("Accessory Inline")
		
        LockScreenWidgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .accessoryRectangular))
	    .previewDisplayName("Accessory Rectangular")
    }
}

3 — สร้างมุมมองสำหรับ 3 ตระกูลใหม่นี้

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

struct LockScreenWidgetEntryView : View {
    @Environment(\\.widgetFamily) var widgetFamily // Here
    var entry: Provider.Entry
	
    var body: some View {
        Text(entry.date, style: .time)
    }
}

switch family {
    case .accessoryInline:
        // A flat widget that contains a single row of text and an optional image.
        // <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryinline>
    case .accessoryRectangular:
        // A rectangular widget.
        // <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryrectangular>
    case .accessoryCircular:
        // A circular widget.
        // <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessorycircular>
    default:
        Text("Size not implemented yet.")
}

แต่นี่คือตัวอย่างเนื้อหาที่มีค่าฮาร์ดโค้ด:

switch family {
    case .accessoryInline:
        // A flat widget that contains a single row of text and an optional image.
	// <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryinline>
        HStack {
            Text("Sunrise")
            Image(systemName: "sunrise")
  	}
    case .accessoryRectangular:
	// A rectangular widget.
	// <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryrectangular>
	Gauge(value: 21, in: 16...30) {
	    Text("")
	} currentValueLabel: {
	    Text("")
	} minimumValueLabel: {
	    Text("16")
	} maximumValueLabel: {
	    Text("30")
	}
	.gaugeStyle(.accessoryLinear)
    case .accessoryCircular:
	// A circular widget.
	// <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessorycircular>
	Gauge(value: 80, in: 0...100) {
	    Image(systemName: "drop.fill")
	}
	.gaugeStyle(.accessoryCircular)
    default:
        Text("Size not implemented yet.")
}

หากต้องการเพิ่มวิดเจ็ตที่สร้างขึ้นใหม่ ให้กดล็อคหน้าจอค้างไว้แล้วคลิกปุ่มปรับแต่ง

สามส่วนที่แตกต่างกันควรปรากฏบนหน้าจอ

• ส่วนด้านบนให้คุณเพิ่ม.accessoryInline()วิดเจ็ตได้ ซึ่งจะต่อท้ายวันที่

• ส่วนตรงกลางแสดงเฉพาะการปรับแต่งเวลา
• ส่วนด้านล่างให้คุณเพิ่ม.accessoryRectangular()และ.accessoryCircular()วิดเจ็ต