Виджеты отображают актуальную и удобную информацию и позволяют пользователям быстро получить доступ к приложению для получения дополнительных сведений. Они уже давно присутствуют в других операционных системах, но с введением инфраструктуры WidgetKit во время WWDC 2020 Apple объявила о доступности виджетов для iOS, iPadOS и macOS. Платформа WidgetKit позволяет разработчикам создавать и добавлять виджеты на главный экран, предоставляя пользователям быстрый доступ к важной информации.

Виджеты можно размещать на главном экране iOS, в представлении «Сегодня» или в Центре уведомлений macOS, а также их можно отображать на экране блокировки iPhone и в качестве дополнений в watchOS. С выпуском iOS 14 виджеты могут быть представлены в нескольких размерах.

Примечание. SwiftUI требуется при разработке виджета, хотя расширения виджета можно добавлять в приложения, созданные с помощью UIKit.

Важно понимать основы виджетов, прежде чем внедрять их в свое приложение.

Конфигурация

Статическая конфигурация

Виджеты со статической конфигурацией не позволяют пользователям настраивать переменные для изменения содержимого виджета, например, виджет фитнеса, который предназначен только для отображения вашей активности.

Конфигурация намерения

Виджеты конфигурации Intent позволяют пользователю настраивать определенные переменные для дальнейшего улучшения контента, предоставляя пользователям определенные возможности для отображения нужной им наглядной информации.

Например, приложение To Do позволяет пользователям персонализировать сам виджет.

Семья виджетов

Виджеты могут поддерживать один или несколько размеров, что дает пользователям возможность гибко настраивать виджеты по своему усмотрению. Каждый размер виджета обеспечивает разное количество места для деталей, поэтому подумайте, какие размеры лучше всего подходят для типа информации, отображаемой виджетом. Конкретный вид также может включать одно или несколько поддерживаемых семейств. В iOS есть 3 основных семейства и еще одно в iPadOS.

  • Система Малая
  • Системный носитель
  • Система Большая
  • Очень большой (только в iPadOS)

Пользовательский интерфейс-заполнитель

Пользовательский интерфейс-заполнитель — это содержимое по умолчанию, представляющее тип виджета, но оно не должно содержать никаких пользовательских данных. Он предназначен для того, чтобы дать пользователю общее представление о том, что будет отображать виджет, например:

  • Когда фактические данные загружаются в фоновом режиме
  • Когда функция защиты данных включена для расширения виджета, чтобы скрыть конфиденциальную информацию
  • Когда пользователь выбирает отображение заполнителя в определенных контекстах, например на экране блокировки.

WidgetKit использует этот пользовательский интерфейс-заполнитель для отображения содержимого виджета, когда это необходимо.

Планируете внедрить виджеты в свое приложение? Прежде чем приступить к реализации виджета в приложении, давайте узнаем кое-что о виджетах.

Давайте начнем с рекомендаций, представленных Apple в Руководстве по человеческому интерфейсу, касающемуся виджетов. Я только указал на некоторые важные моменты, упомянутые Apple, но вы всегда можете прочитать полную документацию, предоставленную Apple, ссылка на которую приведена выше для вашего удобства.

Что следует учитывать при разработке и внедрении виджетов

Лучшие практики

  • Простая идея, отражающая функциональность вашего основного приложения.
  • Не делайте виджет только для того, чтобы сделать ярлык для вашего приложения.
  • Создайте размер, который лучше всего подходит для вашего дизайна.
  • Не увеличивайте маленький дизайн ради большого виджета. Вместо этого попробуйте добавить несколько размеров, которые добавляют ценности.
  • Хотя содержимое виджетов не меняется каждую минуту, предпочтительно размещать содержимое, которое периодически меняется, чтобы сделать его более динамичным и полезным для пользователей.

Обновление виджетов

  • Держите ваш виджет в актуальном состоянии с помощью последних данных, полезных для пользователей.
  • Разрешите системе обновлять дату и время в вашем виджете, если ваш виджет должен отображать дату и время, чтобы сохранить ограниченную частоту обновления виджета.
  • Показывайте контент быстро.

Интерактивность

  • Виджеты должны быть редактируемыми и удобными для пользователей.
  • Убедитесь, что взаимодействие с виджетом открывает ваше приложение в нужном месте или на нужной странице в приложении.
  • Избегайте определения слишком большого количества целей взаимодействия.

Дизайн интерфейса

  • Элементы дизайна, связанные с идентичностью вашего бренда, могут помочь пользователям легко узнать ваш виджет.

Примечание. При создании виджета помните, что название приложения не будет отображаться под ним в определенных контекстах, например в Центре уведомлений в macOS или на главном экране в iOS.

  • Чтобы ваш виджет выделялся, используйте цвет эффективно, не перегружая контент.
  • Убедитесь, что вы поддерживаете темный режим и рассмотрите возможность использования системного шрифта и символов SF.
  • Избегайте использования очень маленьких размеров шрифта
  • Создавайте замещающий контент, который поможет пользователям понять, что делает ваш виджет.
  • Предоставьте понятное описание вашего виджета для отображения в галерее виджетов.

Реализация виджета

Представления виджетов разработаны с использованием SwiftUI. Вы всегда можете реализовать виджет в проекте UIKit. SwiftUI требуется только для разработки представлений, которые необходимо отображать в виджетах.

Для этого блога мы создадим простой виджет акций, показывающий рыночный индекс. Мы будем использовать простой дизайн и статический контент для разработки виджета.

Давайте углубимся и посмотрим, как можно использовать структуру WidgetKit для добавления виджетов в приложение iOS.

Добавление расширения виджета

Отправной точкой для создания виджета является шаблон расширения виджета.

  1. Выберите File › New › Target в меню Xcode.

2. Найдите и выберите Расширение виджета.

3. Введите имя расширения.

Примечание. Назовите его и убедитесь, что флажок Включить намерение конфигурации не установлен.

Нажмите Готово и согласитесь с диалоговым окном активации схемы:

Запуск виджета

Шаблон виджета содержит много шаблонного кода, который вам просто нужно настроить. Он работает прямо из коробки, поэтому вы можете настроить все прямо сейчас, чтобы убедиться, что все работает гладко, когда вы будете готовы протестировать свой код.

Сначала я не запускал код, поэтому я предполагаю, что он будет предоставлять вам виджеты, которые показывают время. Пожалуйста, прокомментируйте, если я ошибаюсь. Вы уже можете добавить свой первый виджет. Ура!

Теперь мы будем двигаться вперед к разработке нашего собственного представления виджета с использованием SwiftUI. Давайте начнем с создания нового представления SwiftUI и не забудьте добавить только что созданное расширение виджета в качестве цели, как показано на изображении ниже.

Давайте добавим наш код пользовательского интерфейса для виджета ниже

//
//  NepseWidgetView.swift
//  NepseWidgetExtension
//
//  Created by Mukesh Shakya on 03/01/2023.
//

import SwiftUI

struct NepseWidgetView: View {
    
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text("NEPSE Index")
                .font(.system(size: 14))
                .foregroundColor(.gray)
            VStack(alignment: .leading, spacing: 2) {
                Text("2064.09")
                    .font(.system(size: 16))
                    .foregroundColor(.white)
                Text("17.83 (0.87%)")
                    .font(.system(size: 12))
                    .foregroundColor(.green)
            }
            Text("As of Jan 02, 2023")
                .font(.system(size: 12))
                .foregroundColor(.gray)
        }
        .padding()
        .frame(minWidth: .zero, maxWidth: .infinity, minHeight: .zero, maxHeight: .infinity, alignment: .topLeading)
        .background(Color.black)
    }
    
}

struct NepseWidgetView_Previews: PreviewProvider {
    
    static var previews: some View {
        NepseWidgetView()
    }
    
}

Теперь мы можем вернуться к нашему NepseWidget.swift и добавить это представление, чтобы определить наш пользовательский интерфейс. В WidgetEntryView мы заменим текст по умолчанию классом SwiftUIView ниже.

@main
struct NepseWidget: Widget {
    
    let kind: String = "NepseWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            NepseWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Nepse Widget")
        .description("Market index showing widget of nepse.")
        .supportedFamilies([.systemSmall])
    }
    
}

Наконец, давайте обновим имя и описание нашего виджета. Это отображается при добавлении виджетов из галереи виджетов. Мы можем сделать это, обновив файл StaticConfiguration. На данный момент мы будем поддерживать только небольшой виджет из случаев поддерживаемых семейств, поэтому давайте обновим нашу конфигурацию, чтобы отразить это, добавив также модификатор поддерживаемых семейств.

Примечание. Если нам нужно протестировать только виджет, мы можем сделать это напрямую, выбрав цель виджета и запустив ее. Он будет собираться и работать быстрее, так как работает только цель виджета.

Теперь пришло время протестировать ваш виджет вместе с полным приложением. Запустите основной проект на устройстве или симуляторе. Нажмите и удерживайте на главном экране устройства или симулятора, в левом верхнем углу появится значок добавления для добавления виджетов. Найдите виджет приложения с названием вашего приложения и нажмите кнопку добавления виджета.

После добавления виджета он появится на главном экране, как показано на изображении ниже.

Надеюсь, вам понравился первый виджет, который вы только что создали. Спасибо всем за чтение блога до сих пор. Надеюсь, это чтение помогло вам создать виджет вашего приложения.