Bu şablon, tek bir ekranda aynı teklifin iki varyantı arasında geçiş yapmak için sekmeleri kullanır. Her sekme kendi özellik listesini, ürün listesini ve satın alma düğmesini içerir. Bir sekmeye dokunulduğunda ekrandan çıkmadan görünen içerik değişir; bu da planları katmana, fatura dönemine veya kitle segmentine göre ayırmak için oldukça kullanışlıdır.

Başlamadan önce

• Adapty Kontrol Paneli’nde ürün oluşturun.
• Adapty’yi App Store ve Google Play’e bağlayın.

1. Ekran düzenini ayarla

Ekran; kapat düğmesi, başlık, sekmeler ve sekme içerikleri için bir kapsayıcı görevi görür. Bu örnekte arka plan bir görsel kullanılarak ayarlanmıştır, ancak düz renk veya gradyan da aynı şekilde çalışır.

Ekran özelliklerinin tam listesi için bkz. Ekranlar ve katmanlar — Ekran ayarları.

Ekranı yapılandırmak için:

1. Kanvasın boş bir alanına tıklayarak ekranı seçin.
2. System UI altında, arka planın ekranın kenarlarına kadar uzanması için Safe area seçeneğini devre dışı bırakın.
3. Fill altında bir arka plan türü seçin ve yapılandırın. Bu örnekte bir Image Image kullanılmıştır; ancak düz renk veya gradyan da aynı şekilde çalışır.
4. Layout altında yönü Vertical Vertical olarak ayarlayın; sekme içeriği kalan alanı dolduracak şekilde öğelerin üstten alta sıralanması için boşluk ve hizalamayı yapılandırın.

2. Kapat butonunu ekleyin

Kapat butonu, paywall’ı kapatır. Close ön ayarı önceden yapılandırılmıştır — herhangi bir eylem ayarı gerekmez.

1. Canvas üzerinde + simgesine tıklayın.
2. Buttons > Close seçeneğini seçin.

3. Başlığı ekleyin ve kapat düğmesiyle eşleştirin

Başlık, ekranın üst kısmında kapat düğmesinin yanında yer alır. İkisini yatay olarak hizalamak için her ikisini de bir yatay yığına sarın.

Başlığı eklemek için:

1. + > Text > H1 seçeneğine tıklayın.
2. H1 seçiliyken Design sekmesini açın ve Content alanındaki metni düzenleyin.

Başlığı kapat düğmesiyle gruplandırmak için:

1. Layers panelinde, kapat düğmesi katmanındaki üç nokta menüsüne Context menu tıklayın ve Wrap > Wrap in Horizontal Stack seçeneğini seçin.

2. H1 katmanını yeni yatay stack’e sürükleyin.

İki öğeyi hizalamak için:

1. Kapatma düğmesi boyutunu ve H1 font boyutunu, ikisi aynı satırda rahatça yer alacak şekilde ayarlayın.
2. Yatay yığın seçiliyken, öğelerin doğru hizalanması için sağ paneldeki hizalama ve dağılım ayarlarını yapın.

4. Sekmeleri ekleyin ve etiketlerini yapılandırın

Sekmeler elementi, bir ekran bölümünü birbirine geçiş yapılabilir içerik panellerine böler. Her sekme, kullanıcı o sekmeyi seçtiğinde görünen kendi içerik kapsayıcısına sahiptir.

Sekmeler elementi hakkında daha fazla bilgi için bkz. Elementler — Sekmeler. Seçilebilir gruplar hakkında daha fazla bilgi için bkz. Seçilebilir elementler ve gruplar.

Sekmeleri eklemek için:

1. + > Tabs seçeneğine tıklayın ve bir ön ayar seçin — Segment control, Button Tabs veya Underline.
2. Her sekmenin adı canvas üzerinde veya Layers panelinde seçiliyken, etiketi değiştirmek için Design sekmesindeki Content alanını düzenleyin — örneğin Premium ve Pro.

5. İlk sekmeye özellik listesi ekle

İlk sekmenin içinde kısa ve sade bir özellik listesi, kullanıcılara o planın neler sunduğunu gösterir.

Listenin tüm hazır şablonları için Öğeler — List sayfasına bakın.

Özellik listesini eklemek için:

1. + > List seçeneğine tıklayın ve bir liste şablonu seçin. Paywall’lar için en sade seçenek Icon List’tir. Öğe, katman ağacının sonuna eklenir.
2. Her satırı seçerek başlığı Content alanından düzenleyin.

3. Katmanlar panelinde, listeyi ilk sekmenin Content kapsayıcısına sürükleyin.

6. İlk sekmeye ürün listesini ekleyin

Ürün listesi, ilk sekmedeki abonelik seçeneklerini gösterir. Products öğesi, ekrana atanan her ürün için bir kart oluşturur ve kendi seçilebilir grubunu yaratır.

Ürün yönetimi hakkında daha fazla bilgi için bkz. Satın almaları ayarlama.

Ürün eklemek ve yapılandırmak için:

1. + > Products seçeneğine tıklayın ve bir düzen ön ayarı seçin. Dikey Liste, üst üste sıralanmış planlar için iyi çalışır. Öğe, katman ağacının sonunda görünür.
2. Tuvaldeki her ürün kartını seçin ve Design sekmesindeki açılır menüden bir ürün seçin.

3. Layers panelinde, Products katmanını ilk sekmenin Content kapsayıcısına sürükleyin.

7. Satın alma butonunu ilk sekmeye ekle

Satın alma butonu, kullanıcının ilk sekmede seçtiği ürün için uygulama içi satın almayı başlatır. Butonun etiketi, seçili ürünün fiyatını gösterdiğinden kullanıcının seçimiyle her zaman senkronize kalır.

Satın alma eylemi hakkında daha fazla bilgi için bkz. Eylemler — Satın Alma.

Satın alma butonunu eklemek ve yapılandırmak için:

1. + > Buttons seçeneğine tıklayın ve bir buton ön ayarı seçin. Öğe, katman ağacının sonunda görünür.
2. Butonu seçili durumdayken Design sekmesini açın ve imleci Content alanına getirin. Değişken simgesine tıklayın, products.selectedProduct seçeneğini, ardından prod_price özelliğini seçin — tam değişken products.selectedProduct.prod_price olarak çözümlenir. Etiketin geri kalanıyla çevreyin — örneğin, Subscribe for {prod_price}.

3. Interactions sekmesine geçin ve Add trigger > On tap > Add action seçeneğine tıklayın.
4. Action kısmını Purchase, Product kısmını ise products.selectedProduct olarak ayarlayın.

5. Layers panelinde, butonu birinci sekmenin Content container’ına sürükleyin.

8. İlk sekmenin içeriğini ikinci sekmeye kopyalayın

Aynı yapıyı sıfırdan yeniden oluşturmak yerine, birinci sekmedeki özellik listesini, ürün listesini ve satın alma düğmesini ikinci sekmeye kopyalayın. Bundan sonra yalnızca değerleri güncellemeniz yeterli olacak.

İçeriği kopyalamak için:

1. Layers panelinde, birinci sekmenin Content kapsayıcısını genişletin.
2. İçindeki her öğeyi (özellik listesi, ürünler, satın alma butonu) seçin, ⌘C / Ctrl+C ile kopyalayın ve ⌘V / Ctrl+V ile yapıştırın. Kopyalar katman ağacının sonunda görünür.
3. Kopyalanan her öğeyi ikinci sekmenin Content kapsayıcısına sürükleyin.

9. İkinci sekmenin içeriğini güncelleme

İkinci sekme şu an birincinin aynısını gösteriyor. Her öğeyi ikinci planı yansıtacak şekilde güncelleyin.

İkinci sekmeyi güncellemek için:

1. İkinci sekmedeki özellik listesini düzenleyerek satırların ikinci planın özelliklerini yansıtmasını sağlayın.
2. İkinci sekmedeki Products öğesinde her bir ürün kartını seçin ve açılır menüden ikinci planın ürünlerini atayın. Bu Products öğesi otomatik olarak ayrı bir seçilebilir grup (products2) haline gelir.
3. İkinci sekmedeki satın alma düğmesini seçin. Design sekmesindeki Content alanında fiyat değişkenini products.selectedProduct.prod_price yerine products2.selectedProduct.prod_price olarak değiştirin.
4. Interactions sekmesine geçin ve Purchase eylemindeki Product değerini products.selectedProduct yerine products2.selectedProduct olarak güncelleyin.

10. Alt bilgi bağlantılarını ekle

Kullanım koşulları, gizlilik politikası ve satın almaları geri yükle bağlantıları, hangi sekme aktif olursa olsun her zaman görünür kalır. Bu bağlantıları her iki sekme içerik kapsayıcısının da dışına — ekran düzeyine — ekle ki her iki sekme arasında ortak kullanılsın.

Alt bilgi bağlantılarını eklemek için:

1. + > Buttons > Links seçeneğine tıklayın. Bu, katman ağacının sonuna Restore Purchases, Terms of Use ve Privacy Policy içeren bir satır ekler; tam olarak istediğiniz yer burasıdır — bir sekmenin içinde değil, ekranın kökünde.
2. Terms of Use bağlantısını seçin, Interactions sekmesini açın ve koşullar URL’nizi Open URL alanına yapıştırın.
3. Privacy Policy bağlantısı için de aynı adımı gizlilik URL’niz ile tekrarlayın.
4. Restore Purchases bağlantısını olduğu gibi bırakın. Bu bağlantının eylemi önceden yapılandırılmıştır.

Sonraki adımlar

• Flow’unuzu kaydedin ve yayınlayın.
• Flow’u bir placement’a ekleyin ve kullanıcılara göstermeye başlayın.