Lingkungan

• macOS Monterey Versi 12.4
• Xcode Versi 14.0 (14A309)
• iOS 16.0

Jika ini pertama kalinya Anda mengembangkan Widget iOS, saya sarankan Anda membaca tentang cara membuat ekstensi widget . Pada artikel ini saya akan memfokuskan penjelasan saya tentang cara mengembangkan Widget Layar Kunci dan saya tidak akan membahas cara kerja WidgetKit tetapi pasti akan membantu Anda memahami cara mengembangkan widget yang lebih kompleks.

Dokumentasi Apple: Membuat Widget Layar Kunci

WWDC2022: Komplikasi dan widget: Dimuat ulang

Apa itu widget Lock Screen?

Terinspirasi oleh tampilan Apple Watch yang sudah lama Anda gunakan untuk masuk ke editor, kini Anda dapat menekan lama Layar Kunci iPhone untuk masuk ke antarmuka pengeditan baru yang memungkinkan Anda menyesuaikan Layar Kunci dan menambahkan Widget.

Mari kita mulai mengimplementasikan widget di Lock Screen!

1 — Tambahkan ekstensi widget ke proyek Anda

Jika Anda baru menggunakan Widget iOS, pertama-tama Anda harus menambahkan target baru ke proyek Anda.

File > New > Target

Pada tab iOS, cari Widget Extension.

Tambahkan nama produk Anda (LockScreenWidget untuk contoh ini) lalu klik Finishtombolnya. Xcode mungkin meminta Anda untuk mengaktifkan skema, klik Activate.

Target baru seharusnya ditambahkan ke proyek Anda.

2 — Mari tambahkan keluarga Widget baru

Pertama-tama, dalam konfigurasi Widget Anda, mari tambahkan pengubah keluarga yang didukung .supportedFamilies()dan sebagai parameter 3 keluarga baru.supportedFamilies([.accessoryCircular, .accessoryInline, .accessoryRectangular])

Widget sudah memiliki keluarga yang berbeda dan widget layar kunci adalah 3 keluarga baru yang ditambahkan ke daftar:

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

CATATAN : Jika Anda ingin dapat langsung melihat widget Anda di pratinjau, yang harus Anda lakukan adalah mengubah keluarga WidgetPreviewContext menjadi yang ingin Anda tampilkan. Untuk memiliki organisasi yang bersih, saya sarankan Anda menambahkan nama Widget Anda untuk keluarga ini di .previewDisplayName()pengubah.

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 — Buat tampilan untuk 3 keluarga baru ini

Bergantung pada ukurannya, Anda mungkin ingin menampilkan konten yang berbeda. Jadi mari kita ambil widgetFamilydari lingkungan.

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.")
}

Tapi berikut adalah contoh konten dengan nilai hard code:

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.")
}

Untuk menambahkan Widget yang baru dibuat, tekan lama Layar Terkunci dan klik tombol sesuaikan.

Tiga bagian berbeda akan muncul di layar.

• Bagian atas memungkinkan Anda untuk menambahkan .accessoryInline()widget, itu akan ditambahkan ke tanggal.

• Bagian tengah hanya menampilkan penyesuaian waktu.
• Bagian bawah memungkinkan Anda untuk menambahkan .accessoryRectangular()dan .accessoryCircular()widget.