Взгляните на новый UIPageControl в iOS 14

На WWDC 20 Apple анонсировала несколько новых интересных API для старого и скучного UIPageControl.

В этой статье мы обсудим следующие новые изменения в UIPageControl в iOS 14:

• Стиль фона
• Изображение пользовательского индикатора
• Изображение пользовательского индикатора по определенному индексу
• Бесконечные страницы (новое поведение очистки)

Стиль фона

У нас есть новый вариант стиля для нашего UIPageControl под названием BackgroundStyle. Это перечисление с тремя значениями:

Использование довольно простое. По умолчанию это minimal:

pageControl.backgroundStyle = .prominent

Примечание. Когда состояние взаимодействия continuous, стиль фона изменяется автоматически, если для backgroundStyle установлено значение automatic. Я расскажу об API взаимодействия позже в этой статье.

Изображение пользовательского индикатора

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

Я помню, что для достижения этой цели было приложено много усилий, написав собственный класс UIPageControl. Название свойства ниже:

/// The preferred image for indicators. Symbol images are recommended. Default is nil.
 @available(iOS 14.0, *)
 open var preferredIndicatorImage: UIImage?

Использование довольно простое. Я использовал SF Symbol для этой демонстрации:

pageControl.preferredIndicatorImage = UIImage.init(systemName: “heart.fill”)

Изображение настраиваемого индикатора по определенному индексу

/**
 * @abstract Returns the override indicator image for the specific page, nil if no override image was set.
 * @param page Must be in the range of 0..numberOfPages
 */
 @available(iOS 14.0, *)
 open func indicatorImage(forPage page: Int) -> UIImage?

Вы помните приложение Yahoo Weather , которое было предустановлено на вашем iPhone? Он имеет UIPageControl внизу, где первый значок - это значок местоположения, обозначающий текущее местоположение. Интересно то, что у них был этот контроль с самого начала. Я всегда думал о реализации и усилиях, необходимых только для этого.

Теперь это проще простого, потому что iOS 14 предоставила нам новый API, с помощью которого вы можете установить собственный значок для каждого индекса вашего UIPageControl.

Я использовал SF Symbol для этой демонстрации:

pageControl.setIndicatorImage(UIImage.init(systemName: “location.fill”),
 forPage: 0)

Только представьте, какую настройку вы можете сделать с помощью возможности установить каждый значок и пользовательский опыт, который вы можете предоставить нашему пользователю.

Ниже приведен пример, в котором настраиваемый значок настроен для управления страницей в зависимости от различных дождливых погодных условий.

Бесконечные страницы (новое поведение при очистке)

С новым UIPageControl вы можете установить бесконечное количество страниц. Ну, не творите бесконечно ... но как это круто?

Использование довольно простое. Я установил здесь 400 для этой демонстрации:

pageControl.numberOfPages = 400

До iOS 14 мы могли устанавливать любое количество страниц. Так что же Apple сделала в этом году для улучшения подобных сценариев?

Что ж, он представил новый API и совершенно новый UX для решения этой самой проблемы.

Apple предоставила пользовательское взаимодействие для нашего нового UIPageControl в iOS14 под названием InteractionState. Это перечисление с двумя типами взаимодействия:

• Дискретный
• Непрерывный

В iOS 14 значение по умолчанию для взаимодействия UIPageControl - continuous:

Вы можете изменить состояние взаимодействия на discrete, установив для свойства ниже false:

/// Returns YES if the continuous interaction is enabled, NO otherwise. Default is YES.
 @available(iOS 14.0, *)
 open var allowsContinuousInteraction: Bool

Вы также можете добавить наблюдателя, чтобы изменить значение свойства interactionState и проверить текущее состояние взаимодействия с помощью свойства ниже:

/// The current interaction state for when the current page changes. Default is UIPageControlInteractionStateNone
 @available(iOS 14.0, *)
 open var interactionState: UIPageControl.InteractionState { get }

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

Заключение

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