Bir flow, bir veya daha fazla ekrandan oluşur. Her ekran, kullanıcı yolculuğundaki tek bir adımı temsil eder; örneğin bir paywall, bir quiz veya ürün bilgisi içeren bir slayt olabilir.

Her ekrandaki öğeler, bir katman hiyerarşisi şeklinde düzenlenir. Ekranlarınızı, katmanlarınızı ve öğelerinizi yönetmek için varsayılan Screens and Layers görünümünü açın. Bu görünüm, ekran sıranızı ve her ekranın katman yapısını gösterir.

Ekranları yönetme

Sol panelin üst bölümünde, flow’daki tüm ekranlar listelenir. Her giriş, numaralı bir etiket ve küçük resim önizlemesi gösterir.

• Ekran seçme: Bir ekran girişine tıklayarak onu etkin hale getirin. Görsel editör seçili ekranı gösterir ve aşağıdaki Layers bölümü güncellenerek o ekranın katman hiyerarşisini görüntüler.
• Ekran ekleme: Flow’a yeni boş bir ekran eklemek için Screens bölümünün üstündeki düğmesine tıklayın.
• Şablon kütüphanesini açma: Flow şablonlarına göz atmak ve uygulamak için Screens bölümünün üstündeki düğmesine tıklayın.
• Ekranları yeniden sıralama: Ekran girişlerini sürükleyip bırakarak flow’daki sıralarını değiştirin.

Ekran eylemleri

Bağlam menüsünü açmak için ekran girişindeki üç nokta simgesine tıklayın.

Eylem	Kısayol	Açıklama
Animasyonu Oynat		Bu ekranda yapılandırılmış animasyonları önizle
Kopyala	⌘C / Ctrl+C	Ekranı panoya kopyala
Buraya yapıştır	⌘V / Ctrl+V	Daha önce kopyalanmış bir ekranı yapıştır
Çoğalt	⌘D / Ctrl+D	Ekranın bir kopyasını oluştur ve flow’a ekle
Yeniden adlandır		Ekranın görünen adını değiştir
Sil	⌘⌫ / Ctrl+Del	Ekranı flow’dan kaldır

Ekranlar arasında gezinme

Listedeki ekran sırası, gezinmeyi kendi başına belirlemez. Ekranları birbirine bağlamak için element etkileşimlerini kullanın: bir düğmeyi, kullanıcıyı başka bir ekrana yönlendirecek şekilde yapılandırın.

Ekran ayarları

Aktif ekranın özelliklerini ve ayarlarını görüntülemek için ekran önizlemesindeki boş bir alana tıklayın. Sağ panel, ekran ayarları görünümüne geçecektir.

Sistem Arayüzü

Ekranın cihaz donanımıyla nasıl etkileşime girdiğini kontrol eder.

• Safe area, içeriğin çentik ve sistem çubuklarıyla çakışmaması için dolgu ekler.
• Status bar, sistem durum çubuğunu (saat, pil, sinyal simgeleri) gösterir veya gizler.

İlerleme göstergesine ekranı dahil etme

Flow’unuza bir İlerleme Göstergesi öğesi eklerseniz Adapty bunu her ekranda gösterir.

Belirli bir ekranı ilerleme göstergesinden kaldırmak için Include screen in progress indicator seçeneğinin işaretini kaldırın. Karşılama ekranlarını, son paywallı veya ilerleme olarak kaydedilmesini istemediğiniz herhangi bir adımı temizlemek için bunu kullanın.

Ekran düzeni

Layout bölümü, ekranın alt öğelerini nasıl dağıtacağını belirler. Bu özellikler herhangi bir kapsayıcı öğede kullanılabilir.

• Free: Alt öğeler bağımsız olarak konumlandırılır.

• Vertical: Öğeler, flexbox sütunu gibi yukarıdan aşağıya doğru sıralanır.

• Horizontal: Öğeler, flexbox satırı gibi soldan sağa doğru sıralanır. Dikey ve yatay düzenler için aralık ve hizalamayı da yapılandırabilirsiniz.

• Alignment: Öğenin çapraz eksen boyunca konumu.

• Gap: Bitişik öğeler arasındaki boşluk.

• Distribution: Alt öğeler arasındaki ve etrafındaki boşluğun dağılımı.

RTL düzeni

Sağdan sola okunan yazı sistemleri için düzeni yansıtmak üzere Mirror for RTL onay kutusunu etkinleştirin. Yatay kapsayıcılardaki öğelerin sırası ters çevrilir.

Ekran arka planı

Fill, ekran arka planını düz renk, degrade, resim veya video olarak ayarlar. Arka plan, Safe area etkinleştirilmiş olsa bile çentik ve sistem çubukları arkasındaki alanlar dahil tüm cihaz görünüm alanını kaplar.

Arka plan videosunu döngüye al

Arka plan videosunu sürekli döngüde oynatmak için Loop geçişini etkinleştirin.

Özel bir medya kimliği atayın

Herhangi bir görsel veya videoda olduğu gibi, ekran arka planına SDK’nızda referans vermek için özel bir medya ID’si atayabilirsiniz.

Ekran boşluğu

Ekranın her kenarı (üst, sağ, alt, sol) için dolgu miktarını ayarlar.

Kaydırma

Taşma davranışını kontrol eder. Ekran içeriği görüntü alanı yüksekliğini aştığında kaydırılabilir olması için Vertical scroll seçeneğini etkinleştirin.

Seçilebilir gruplar

Selectable groups bölümü, mevcut ekrandaki tüm seçilebilir grupları listeler; bunlar quiz’ler, ürünler, sekmeler, deneme geçişleri veya herhangi bir özel seçilebilir öğeden oluşabilir.

Bir grup girdisine tıklayarak onu yeniden adlandırabilir, türünü değiştirebilir, açığa çıkardığı değişkenleri görüntüleyebilir veya silebilirsiniz.

Katmanları Yönetme

Bir ekrandaki her öğe bir katman olarak temsil edilir. Katmanlar bölümü, aktif ekrandaki öğelerin sırasını gösterir.

Ağaç yapısı, üst-alt ilişkilerini yansıtır. Herhangi bir üst katmanın yanındaki oka tıklayarak alt öğelerini genişletebilir veya daraltabilirsin.

Katmanları doğrudan oluşturamazsın. Öğe ekle görünümü aracılığıyla eklediğin her öğe, ağaçta yeni bir katman olarak görünür.

• Katman seçme: Bir katmanı seçmek için tıklayın. Görsel düzenleyici, tuvaldeki ilgili öğeyi vurgular ve sağ panel, o katmanın tasarım ve etkileşim özelliklerini gösterir.
• Katmanları yeniden sıralama: Katmanları, üst kapsayıcı içindeki sıralarını değiştirmek için ağaç yapısında sürükleyip bırakın. Ağaçtaki sıra, ekrandaki görsel sırayla eşleşir.
• Katmanı gösterme veya gizleme: Göz simgesini ortaya çıkarmak için bir katmanın üzerine gelin. Katmanın görünürlüğünü açıp kapatmak için simgeye tıklayın. Gizlenen katmanlar ağaçta kalmaya devam eder, ancak görsel düzenleyicide veya cihazda görünmez. Çalışma zamanında görünürlüğü mantıkla kontrol etmek için koşullu görünürlük özelliğini kullanın.
• Tüm katmanları daraltma: Tüm ağacı katlamak için Layers bölümünün sağ üst köşesindeki daralt düğmesine tıklayın.

Katman eylemleri

Bağlam menüsünü açmak için üç nokta simgesine tıklayın.

Eylem	Kısayol	Açıklama
Copy	⌘C / Ctrl+C	Katmanı panoya kopyalar
Paste here	⌘V / Ctrl+V	Daha önce kopyalanan katmanı alt öğe olarak yapıştırır
Duplicate	⌘D / Ctrl+D	Katmanın aynı kapsayıcı içinde bir kopyasını oluşturur
Rename		Katmanın görünen adını değiştirir. Varsayılan olarak katmanlar, içeriklerini veya bileşen türlerini ad olarak kullanır
Delete	⌘⌫ / Ctrl+Del	Katmanı ve tüm alt öğelerini kaldırır
Wrap		Katmanı yeni bir kapsayıcıya sarar: Wrap in Horizontal Container veya Wrap in Vertical Container
Unwrap / Ungroup		Sarmalayan kapsayıcıyı kaldırır ve alt öğelerini bir üst seviyeye taşır
Move up	↑	Katmanı üst kapsayıcısında bir konum yukarı taşır
Move down	↓	Katmanı üst kapsayıcısında bir konum aşağı taşır