Môi trường

• macOS Monterey Phiên bản 12.4
• Phiên bản Xcode 14.0 (14A309)
• iOS 16.0

Nếu đây là lần đầu tiên bạn phát triển Widget iOS, tôi khuyên bạn nên đọc về cách tạo tiện ích mở rộng widget . Trong bài viết này, tôi sẽ tập trung giải thích về cách phát triển Tiện ích màn hình khóa và tôi sẽ không đề cập đến cách thức hoạt động của WidgetKit nhưng nó chắc chắn sẽ giúp bạn hiểu cách phát triển các tiện ích phức tạp hơn.

Tài liệu của Apple: Tạo Widget Màn hình Khóa

WWDC2022: Biến chứng và tiện ích: Đã tải lại

Tiện ích Màn hình khóa là gì?

Lấy cảm hứng từ mặt đồng hồ Apple Watch mà bạn giữ lâu để vào trình chỉnh sửa, giờ đây bạn có thể nhấn và giữ trên Màn hình khóa của iPhone để vào giao diện chỉnh sửa mới cho phép bạn tùy chỉnh Màn hình khóa và thêm Tiện ích.

Hãy bắt đầu triển khai một tiện ích trên Màn hình khóa!

1 — Thêm tiện ích mở rộng vào dự án của bạn

Nếu bạn chưa quen với Widget iOS, trước tiên bạn cần thêm mục tiêu mới vào dự án của mình.

File > New > Target

Trên tab iOS tìm kiếm Widget Extension.

Thêm tên sản phẩm của bạn (LockScreenWidget cho ví dụ này) sau đó nhấp vào Finishnút. Xcode có thể yêu cầu bạn kích hoạt lược đồ, nhấp vào Activate.

Một mục tiêu mới nên đã được thêm vào dự án của bạn.

2 — Hãy thêm họ Widget mới

Trước hết, trong cấu hình Widget của bạn, hãy thêm một công cụ sửa đổi họ được hỗ trợ .supportedFamilies()và làm tham số cho 3 họ mới.supportedFamilies([.accessoryCircular, .accessoryInline, .accessoryRectangular])

Các widget đã có các họ khác nhau và các widget màn hình khóa là 3 họ mới được thêm vào danh sách:

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

LƯU Ý : Nếu bạn muốn có thể xem trực tiếp tiện ích của mình trên bản xem trước, điều bạn phải làm là thay đổi họ WidgetPreviewContext thành họ muốn hiển thị. Để có một tổ chức rõ ràng, tôi khuyên bạn nên thêm tên Widget của mình cho họ này vào công cụ .previewDisplayName()sửa đổi.

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 — Tạo chế độ xem cho 3 họ mới này

Tùy thuộc vào kích thước, bạn có thể muốn hiển thị nội dung khác nhau. Vì vậy, hãy lấy widgetFamilytừ môi trường.

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

Nhưng đây là một ví dụ về nội dung có giá trị được mã hóa cứng:

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

Để thêm các Widget vừa tạo, nhấn và giữ Màn hình khóa và nhấp vào nút tùy chỉnh.

Ba phần khác nhau sẽ xuất hiện trên màn hình.

• Phần trên cùng cho phép bạn thêm .accessoryInline()tiện ích, nó sẽ thêm vào ngày.

• Phần giữa chỉ hiển thị tùy chỉnh thời gian.
• Phần dưới cùng cho phép bạn thêm .accessoryRectangular()và .accessoryCircular()widget.