В прошлой статье мы познакомились с основами StoreKit 2 и узнали, как легко мы можем монетизировать наши приложения. В этой мы продолжим тему, узнав о представлениях StoreKit в SwiftUI. StoreKit 2 представляет дефолтные представления SwiftUI, позволяющие нам быстро создавать пейволы или экраны для магазинов цифровых товаров.
StoreKit 2 предоставляет тип ProductView, позволяющий легко отображать и обрабатывать покупки в приложении для одного продукта. Для этого достаточно разместить в иерархии представлений экземпляр ProductView с определенным идентификатором товара.
struct ContentView: View {
var body: some View {
ProductView(id: "55667744")
}
}
Как видно из приведенного примера, мы можем вызвать экземпляр ProductView одной строкой кода, но за этой строкой скрывается вся сложность загрузки и покупки товаров в App Store. StoreKit предоставляет нам набор стилей для отображения продукта в различных видах. Мы можем использовать модификатор вида productViewStyle, чтобы использовать определенный стиль. По умолчанию StoreKit использует автоматический стиль, но мы можем использовать стили large, regular или compact.
struct ContentView: View {
var body: some View {
ProductView(id: "55667744")
.productViewStyle(.compact)
}
}
Можно также включить показ изображения, если оно загружено на серверы App Store. Инициализатор ProductView имеет еще один параметр, называемый prefersPromotionalIcon. Его можно использовать для отображения иконки продвигаемого товара.
struct ContentView: View {
var body: some View {
ProductView(id: "55667744", prefersPromotionalIcon: true)
}
}
Если вместо изображения для товара требуется нарисовать пользовательское представление SwiftUI, то это возможно с помощью перегрузки другого инициализатора ProductView.
ProductView(id: "55667744") { _ in
Image(systemName: "crown")
.resizable()
.scaledToFit()
} placeholderIcon: {
ProgressView()
}
.productViewStyle(.large)
Как видно из приведенного примера, можно обрабатывать различные состояния загрузки рекламного изображения и при необходимости заменять его собственным представлением SwiftUI.
Другой вариант — построить полностью индивидуальное представление товара, введя собственный стиль. В этом случае мы должны создать тип, соответствующий протоколу ProductViewStyle.
struct CustomProductStyle: ProductViewStyle {
func makeBody(configuration: Configuration) -> some View {
switch configuration.state {
case .loading:
ProgressView()
case .success(let product):
Button {
configuration.purchase()
} label: {
VStack {
Text(verbatim: product.displayName)
.font(.headline)
Text(verbatim: product.displayPrice)
}
}
.buttonStyle(.borderedProminent)
default:
Text("Something goes wrong...")
}
}
}
struct ContentView: View {
var body: some View {
ProductView(id: "55667744")
.productViewStyle(CustomProductStyle())
}
}
Тут мы определяем тип CustomProductStyle в соответствии с протоколом ProductViewStyle. Протокол ProductViewStyle имеет единственное требование — это функция makeBody. Функция makeBody имеет параметр типа ProductViewStyleConfiguration, предоставляющий нам всю необходимую информацию о товаре, состоянии загрузки и функциональности покупки.
Мы можем использовать различные стили продукта для построения нужной нам схемы. Давайте сделаем пейвол, отображающий варианты подписки и пожизненных покупок в приложении.
struct ContentView: View {
var body: some View {
ScrollView {
ProductView(id: "55667744") { _ in
Image(systemName: "crown")
.resizable()
.scaledToFit()
} placeholderIcon: {
ProgressView()
}
.productViewStyle(.large)
VStack(spacing: 16) {
ForEach(["123456789", "987654321"], id: \.self) { id in
ProductView(id: id)
.productViewStyle(.compact)
}
}
.padding()
}
}
}
Как видите, мы реализуем различные варианты отображения для списка доступных покупок всего в нескольких строках кода. А созданный нами пользовательский интерфейс поддерживает покупки и автоматически отслеживает возврат средств. Но представления StoreKit в SwiftUI на этом не заканчиваются. Он также дает нам представление StoreView, отображающее коллекцию товаров в различных макетах в зависимости от доступного пространства.
struct ContentView: View {
var body: some View {
ScrollView {
ProductView(id: "55667744") { _ in
Image(systemName: "crown")
.resizable()
.scaledToFit()
} placeholderIcon: {
ProgressView()
}
.productViewStyle(.large)
StoreView(
ids: [
"123456789",
"987654321"
]
)
.productViewStyle(.compact)
}
}
}
StoreView отображает макет коллекции товаров. Например, в tvOS StoreView использует сетку для отображения товаров. Вы можете настроить внешний вид продуктов, отображаемых в StoreView, применив к нему модификатор вида productViewStyle.
struct ContentView: View {
var body: some View {
ScrollView {
ProductView(id: "55667744") { _ in
Image(systemName: "crown")
.resizable()
.scaledToFit()
} placeholderIcon: {
ProgressView()
}
.productViewStyle(.large)
StoreView(
ids: [
"123456789",
"987654321"
]
)
.productViewStyle(.compact)
.storeButton(.visible, for: .restorePurchases)
}
}
}
Кроме того, StoreView предоставляет набор кнопок, таких как кнопки восстановления транзакций или отмены, прямо “из коробки”. Вы можете управлять видимостью конкретной кнопки с помощью модификатора вида storeButton.
Сегодня мы познакомились с представлениями SwiftUI, которые StoreKit 2 предоставляет нам для создания пейволов в наших приложениях. Надеюсь, вам понравился этот пост. Спасибо, что прочитали, и до новых встреч!