Flow ve paywallları görüntüleme - Android

Adapty tarafından oluşturulan bir flow veya eski Paywall Builder’da oluşturulan bir paywall varsa, bunu kullanıcıya göstermek için mobil uygulama kodunuzda ayrıca render etmeniz gerekmez. Böyle bir flow veya paywall, içinde neyin gösterileceğini ve nasıl gösterileceğini zaten içerir.

Warning

Bu rehber, Adapty tarafından render edilen flow’lar ve paywall’lar için geçerlidir. Remote config paywall’lar ve Observer modu için süreç farklıdır.

Remote config paywall’larını sunmak için bkz. Remote config ile tasarlanmış paywall’ı göster.
Observer mode paywall’larını sunmak için bkz. Android - Observer mode’da flow’ları sun

Aşağıda kullanılan flowConfiguration nesnesini almak için bkz. Flow’ları ve paywall’ları al.

Cihaz ekranında görsel flow’u görüntüleyebilmek için önce yapılandırmanız gerekir. Bunun için AdaptyUI.getFlowView() metodunu çağırın veya AdaptyFlowView’ı doğrudan oluşturun:

   val flowView = AdaptyUI.getFlowView(
       activity,
       flowConfiguration,
       products,
       eventListener,
       insets,
       customAssets,
       tagResolver,
       timerResolver,
   )

   val flowView =
        AdaptyFlowView(activity) // or retrieve it from xml
   ...
   with(flowView) {
       showFlow(
           flowConfiguration,
           products,
					 eventListener,
           insets,
           customAssets,
           tagResolver,
           timerResolver,
       )
   }

AdaptyFlowView flowView = AdaptyUI.getFlowView(
        activity,
        flowConfiguration,
        products,
        eventListener,
        insets,
        customAssets,
        tagResolver,
        timerResolver
);

AdaptyFlowView flowView =
  new AdaptyFlowView(activity); //gerekirse view hiyerarşisine ekleyin veya xml'den alın
...
flowView.showFlow(flowConfiguration, products, eventListener, insets, customAssets, tagResolver, timerResolver);

<com.adapty.ui.AdaptyFlowView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

View başarıyla oluşturulduktan sonra view hiyerarşisine ekleyebilir ve cihaz ekranında gösterebilirsiniz.

AdaptyFlowView’ı AdaptyUI.getFlowView() çağrısı yapmadan edinirseniz, ayrıca .showFlow() metodunu da çağırmanız gerekir.

Görsel flow’u cihaz ekranında gösterebilmek için önce yapılandırmanız gerekir. Bunun için şu composable fonksiyonu kullanın:

AdaptyFlowScreen(
    flowConfiguration,
    products,
    eventListener,
    insets,
    customAssets,
    tagResolver,
    timerResolver,
)

İstek parametreleri:

Parametre	Zorunluluk	Açıklama
flowConfiguration	zorunlu	Flow’un görsel ayrıntılarını içeren bir `AdaptyUI.FlowConfiguration` nesnesi sağlayın. Bunu yüklemek için `AdaptyUI.getFlowConfiguration(flow)` metodunu kullanın. Daha fazla ayrıntı için Görünüm yapılandırmasını getirme konusuna bakın.
products	isteğe bağlı	Ekrandaki ürünlerin görüntülenme süresini optimize etmek için bir `AdaptyPaywallProduct` dizisi sağlayın. `null` değeri geçilirse AdaptyUI gerekli ürünleri otomatik olarak getirir.
eventListener	isteğe bağlı	Flow olaylarını izlemek için bir `AdaptyFlowEventListener` sağlayın. Kullanım kolaylığı açısından `AdaptyFlowDefaultEventListener` sınıfını genişletmeniz önerilir. Daha fazla ayrıntı için Flow ve paywall olaylarını yönetme konusuna bakın.
insets	isteğe bağlı	Inset’ler, tıklanabilir öğelerin sistem çubuklarının arkasında gizlenmesini önlemek için flow’un etrafındaki boşluklardır. Varsayılan: `Unspecified` — bu, Adapty’nin inset’leri otomatik olarak ayarlayacağı anlamına gelir; bu ayar uçtan uca flow’lar için mükemmel çalışır. Flow’unuz uçtan uca değilse özel inset’ler ayarlamak isteyebilirsiniz. Bunun nasıl yapılacağını aşağıdaki Flow inset’lerini değiştirme bölümünde okuyabilirsiniz.
customAssets	isteğe bağlı	Flow veya paywall’unuzdaki görselleri ve videoları çalışma zamanında değiştirmek için bir `AdaptyCustomAssets` nesnesi geçirin. Daha fazla ayrıntı için Varlıkları özelleştirme konusuna bakın.
tagResolver	isteğe bağlı	Flow metnindeki özel etiketleri çözümlemek için `AdaptyUiTagResolver` kullanın. Bu çözümleyici bir etiket parametresi alır ve bunu karşılık gelen bir dizeye dönüştürür.
timerResolver	isteğe bağlı	Özel zamanlayıcı işlevselliği kullanacaksanız çözümleyiciyi buraya geçirin.

Tip

Adapty SDK’nın bir mobil uygulamaya nasıl entegre edildiğini gerçek dünyadan bir örnekle görmek ister misiniz? Paywall gösterme, satın alma yapma ve diğer temel işlevler dahil olmak üzere tam kurulumu sergileyen örnek uygulamalarımıza göz atın.

Flow inset’lerini değiştirme

Inset’ler, flow’un etrafındaki boşluklardır ve tıklanabilir öğelerin sistem çubuklarının arkasında gizlenmesini önler. Adapty varsayılan olarak inset’leri otomatik olarak ayarlar; bu, kenardan kenara flow’larda mükemmel çalışır.

Flow’unuz kenardan kenara değilse, özel inset’ler ayarlamak isteyebilirsiniz:

AdaptyFlowView üst durum çubuğuyla da alt gezinme çubuğuyla da çakışmıyorsa AdaptyFlowInsets.None kullanın.
Flow’unuz üst durum çubuğuyla çakışıyor ancak altla çakışmıyorsa gibi daha özel durumlar için yalnızca bottomInset değerini aşağıdaki örnekte gösterildiği gibi 0 olarak ayarlayabilirsiniz:


//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
    ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
        val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        ViewCompat.setOnApplyWindowInsetsListener(this, null)
        action(systemBarInsets)
        insets
    }
}
//and then use it with the view
flowView.onReceiveSystemBarsInsets { insets ->
    val flowInsets = AdaptyFlowInsets.vertical(insets.top, 0)
    flowView.showFlow(
           flowConfiguration,
           products,
					 eventListener,
           flowInsets,
           customAssets,
           tagResolver,
           timerResolver,
       )
}


...

ViewCompat.setOnApplyWindowInsetsListener(flowView, (view, insets) -> {
    Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
    ViewCompat.setOnApplyWindowInsetsListener(flowView, null);

    AdaptyFlowInsets flowInsets =
                AdaptyFlowInsets.vertical(systemBarInsets.top, 0);
    flowView.showFlow(flowConfiguration, products, eventListener, flowInsets);

    return insets;
});

Geliştirici tanımlı zamanlayıcı kullanımı

Mobil uygulamanızda geliştirici tanımlı zamanlayıcılar kullanmak için bir timerResolver nesnesi oluşturun; bu nesne, özel zamanlayıcıları flow oluşturulduğunda yerlerine geçecek string değerlerle eşleştiren bir sözlük veya haritadır. İşte bir örnek:


...

val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to Calendar.getInstance(TimeZone.getDefault()).apply { set(2025, 0, 1) }.time, // New Year 2025
)
val timerResolver = AdaptyUiTimerResolver { timerId ->
    customTimers.getOrElse(timerId, { Date(System.currentTimeMillis() + 3600 * 1000L) /* in 1 hour */ } )
}


...

Map<String, Date> customTimers = new HashMap<>();
customTimers.put(
        "CUSTOM_TIMER_NY",
        new Calendar.Builder().setTimeZone(TimeZone.getDefault()).setDate(2025, 0, 1).build().getTime()
);
AdaptyUiTimerResolver timerResolver = new AdaptyUiTimerResolver() {
    @NonNull
    @Override
    public Date timerEndAtDate(@NonNull String timerId) {
        Date date = customTimers.get(timerId);
        return date != null ? date : new Date(System.currentTimeMillis() + 3600 * 1000L); /* in 1 hour */
    }
};

Bu örnekte, CUSTOM_TIMER_NY, Adapty kontrol panelinde ayarladığınız geliştirici tanımlı zamanlayıcının Timer ID’sidir. timerResolver, uygulamanızın zamanlayıcıyı doğru değerle (örneğin 13d 09h 03m 34s gibi — zamanlayıcının bitiş zamanından, yani Yılbaşı gibi bir tarihten, mevcut zamanın çıkarılmasıyla hesaplanan) dinamik olarak güncellemesini sağlar.

Özel etiketleri kullanma

Mobil uygulamanızda özel etiketler kullanmak için bir tagResolver nesnesi oluşturun; bu nesne, özel etiketleri flow oluşturulduğunda onların yerine geçecek string değerlerle eşleştiren bir sözlük ya da haritadır. İşte bir örnek:

val customTags = mapOf("USERNAME" to "John")
val tagResolver = AdaptyUiTagResolver { tag -> customTags[tag] }

Map<String, String> customTags = new HashMap<>();
customTags.put("USERNAME", "John");
AdaptyUiTagResolver tagResolver = customTags::get;

Bu örnekte, USERNAME Adapty kontrol panelinde <USERNAME/> olarak girdiğiniz özel bir etikettir. tagResolver, uygulamanızın bu özel etiketi dinamik olarak belirtilen değerle—örneğin John—değiştirmesini sağlar.

tagResolver’ı flow’unuzu sunmadan hemen önce oluşturup doldurmanızı öneririz. Hazır olduğunda, flow’u sunmak için kullandığınız AdaptyUI metoduna iletin.

Flow yükleme göstergesi rengini değiştirme

Yükleme göstergesinin varsayılan rengini aşağıdaki şekilde geçersiz kılabilirsiniz:


<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">

    <item name="adapty_progressIndicatorColor">@color/yourColor</item>
</style>

Paywall Builder ile özelleştirilmiş bir paywall oluşturduysanız, kullanıcıya göstermek için mobil uygulama kodunuzda bu paywall’ı oluşturma konusunda endişelenmenize gerek yoktur. Böyle bir paywall, hem paywall içinde nelerin gösterileceğini hem de nasıl gösterileceğini içerir.

Warning

Bu kılavuz yalnızca Adapty SDK 3.x için eski Paywall Builder’da oluşturulmuş paywallları kapsar. SDK v3.0 gerektirir. SDK 2.x veya öncesi için oluşturulmuş bir paywall, remote config paywall veya Observer mode içindeki bir paywall sunmak farklı şekilde çalışır.

Remote config paywallları sunmak için bkz. Remote config ile tasarlanan paywall’ı render etme.
Observer mode paywallları sunmak için bkz. Android - Observer mode’da Paywall Builder paywalllarını sunma

Aşağıda kullanılan viewConfiguration nesnesini almak için bkz. Paywall Builder paywalllerini ve yapılandırmalarını getirme.

Görsel paywall’ı cihaz ekranında göstermek için önce yapılandırmanız gerekir. Bunu yapmak için AdaptyUI.getPaywallView() metodunu çağırın veya AdaptyPaywallView’i doğrudan oluşturun:

   val paywallView = AdaptyUI.getPaywallView(
       activity,
       viewConfiguration,
       products,
       eventListener,
       insets,
       personalizedOfferResolver,
       tagResolver,
       timerResolver,
   )

   val paywallView =
        AdaptyPaywallView(activity) // or retrieve it from xml
   ...
   with(paywallView) {
       showPaywall(
           viewConfiguration,
           products,
					 eventListener,
           insets,
           personalizedOfferResolver,
           tagResolver,
           timerResolver,
       )
   }

AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
        activity,
        viewConfiguration,
        products,
        eventListener,
        insets,
        personalizedOfferResolver,
        tagResolver,
        timerResolver
);

AdaptyPaywallView paywallView =
  new AdaptyPaywallView(activity); //gerekirse görünüm hiyerarşisine ekleyin veya xml'den alın
...
paywallView.showPaywall(viewConfiguration, products, eventListener, insets, personalizedOfferResolver, tagResolver, timerResolver);

<com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Görünüm başarıyla oluşturulduktan sonra, onu görünüm hiyerarşisine ekleyebilir ve cihaz ekranında gösterebilirsiniz.

AdaptyPaywallView’ı AdaptyUI.getPaywallView() çağrısı dışında bir yöntemle aldıysanız, .showPaywall() metodunu da çağırmanız gerekir.

Görsel paywallı cihaz ekranında göstermek için önce yapılandırmanız gerekir. Bunun için şu composable fonksiyonu kullanın:

AdaptyPaywallScreen(
    viewConfiguration,
    products,
    eventListener,
    insets,
    personalizedOfferResolver,
    tagResolver,
    timerResolver,
)

İstek parametreleri:

Parametre	Varlık	Açıklama
viewConfiguration	zorunlu	Paywallın görsel ayrıntılarını içeren bir `AdaptyUI.LocalizedViewConfiguration` nesnesi sağlayın. Bunu yüklemek için `Adapty.getViewConfiguration(paywall)` metodunu kullanın. Daha fazla bilgi için Paywallın görsel yapılandırmasını getirme konusuna bakın.
products	isteğe bağlı	Ekrandaki ürünlerin görüntülenme zamanlamasını optimize etmek için bir `AdaptyPaywallProduct` dizisi sağlayın. `null` geçilirse AdaptyUI gerekli ürünleri otomatik olarak getirir.
eventListener	isteğe bağlı	Paywall olaylarını izlemek için bir `AdaptyUiEventListener` sağlayın. Kullanım kolaylığı açısından AdaptyUiDefaultEventListener’ı genişletmeniz önerilir. Daha fazla bilgi için Paywall olaylarını yönetme konusuna bakın.
insets	isteğe bağlı	Insets, tıklanabilir öğelerin sistem çubuklarının arkasına gizlenmesini önleyen paywall etrafındaki boşluklardır. Varsayılan: `UNSPECIFIED` — bu, Adapty’nin inset’leri otomatik olarak ayarlayacağı anlamına gelir; bu ayar kenardan kenara paywalllar için mükemmel çalışır. Paywallınız kenardan kenara değilse özel inset’ler ayarlamak isteyebilirsiniz. Bunun nasıl yapılacağını aşağıdaki Paywall inset’lerini değiştirme bölümünde okuyabilirsiniz.
personalizedOfferResolver	isteğe bağlı	Kişiselleştirilmiş fiyatlandırmayı (daha fazla bilgi) belirtmek için `AdaptyUiPersonalizedOfferResolver` uygulayın ve `AdaptyPaywallProduct`’ı, ürünün fiyatı kişiselleştirilmişse `true`, değilse `false` olarak eşleyen kendi mantığınızı geçirin.
tagResolver	isteğe bağlı	Paywall metnindeki özel etiketleri çözümlemek için `AdaptyUiTagResolver` kullanın. Bu çözümleyici bir etiket parametresi alır ve bunu karşılık gelen bir dizeye dönüştürür. Daha fazla bilgi için Paywall Builder’daki Özel Etiketler konusuna bakın.
timerResolver	isteğe bağlı	Özel zamanlayıcı işlevselliği kullanacaksanız çözümleyiciyi buraya geçirin.

Tip

Paywall insets’lerini değiştirme

Insets, tıklanabilir öğelerin sistem çubukları arkasında gizlenmesini engelleyen paywall etrafındaki boşluklardır. Varsayılan olarak Adapty, kenar-kenara paywalllar için harika çalışan insets’leri otomatik olarak ayarlar.

Paywallınız kenar-kenara değilse özel insets ayarlamak isteyebilirsiniz:

AdaptyPaywallView ile ne durum çubuğu ne de gezinme çubuğu çakışmıyorsa AdaptyPaywallInsets.NONE kullanın.
Paywallınız üst durum çubuğuyla çakışıyor ama alt kısımla çakışmıyorsa gibi daha özel durumlarda, aşağıdaki örnekte gösterildiği gibi yalnızca bottomInset’i 0 olarak ayarlayabilirsiniz:


//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
    ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
        val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        ViewCompat.setOnApplyWindowInsetsListener(this, null)
        action(systemBarInsets)
        insets
    }
}
//and then use it with the view
paywallView.onReceiveSystemBarsInsets { insets ->
    val paywallInsets = AdaptyPaywallInsets.vertical(insets.top, 0)
    paywallView.showPaywall(
           viewConfiguration,
           products,
					 eventListener,
           paywallInsets,
           personalizedOfferResolver,
           tagResolver,
           timerResolver,
       )
}


...

ViewCompat.setOnApplyWindowInsetsListener(paywallView, (view, insets) -> {
    Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
    ViewCompat.setOnApplyWindowInsetsListener(paywallView, null);

    AdaptyPaywallInsets paywallInsets =
                AdaptyPaywallInsets.of(systemBarInsets.top, 0);
    paywallView.showPaywall(paywall, products, viewConfiguration, paywallInsets, productTitleResolver);

    return insets;
});

Geliştirici tanımlı zamanlayıcı kullanma

Mobil uygulamanızda geliştirici tanımlı zamanlayıcılar kullanmak için bir timerResolver nesnesi oluşturun; bu nesne, özel zamanlayıcıları paywall oluşturulduğunda onların yerine geçecek string değerleriyle eşleştiren bir sözlük ya da haritadır. İşte bir örnek:


...

val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to Calendar.getInstance(TimeZone.getDefault()).apply { set(2025, 0, 1) }.time, // New Year 2025
)
val timerResolver = AdaptyUiTimerResolver { timerId ->
    customTimers.getOrElse(timerId, { Date(System.currentTimeMillis() + 3600 * 1000L) /* in 1 hour */ } )
}


...

Map<String, Date> customTimers = new HashMap<>();
customTimers.put(
        "CUSTOM_TIMER_NY",
        new Calendar.Builder().setTimeZone(TimeZone.getDefault()).setDate(2025, 0, 1).build().getTime()
);
AdaptyUiTimerResolver timerResolver = new AdaptyUiTimerResolver() {
    @NonNull
    @Override
    public Date timerEndAtDate(@NonNull String timerId) {
        Date date = customTimers.get(timerId);
        return date != null ? date : new Date(System.currentTimeMillis() + 3600 * 1000L); /* in 1 hour */
    }
};

Bu örnekte, CUSTOM_TIMER_NY, Adapty kontrol panelinde ayarladığınız geliştirici tanımlı zamanlayıcının Timer ID’sidir. timerResolver, uygulamanızın zamanlayıcıyı doğru değerle dinamik olarak güncellemesini sağlar; örneğin 13d 09h 03m 34s (zamanlayıcının bitiş zamanı, Yeni Yıl günü gibi, eksi mevcut zaman olarak hesaplanır).

Özel etiketleri kullanma

Mobil uygulamanızda özel etiketler kullanmak için bir tagResolver nesnesi oluşturun; bu nesne, özel etiketleri paywall render edildiğinde onların yerini alacak dize değerleriyle eşleştiren bir sözlük veya haritadır. İşte bir örnek:

val customTags = mapOf("USERNAME" to "John")
val tagResolver = AdaptyUiTagResolver { tag -> customTags[tag] }

Map<String, String> customTags = new HashMap<>();
customTags.put("USERNAME", "John");
AdaptyUiTagResolver tagResolver = customTags::get;

Bu örnekte USERNAME, Adapty kontrol panelinde <USERNAME/> olarak girdiğiniz özel bir etikettir. tagResolver, uygulamanızın bu özel etiketi dinamik olarak belirtilen değerle (örneğin John) değiştirmesini sağlar.

tagResolver’ı paywall’ı göstermeden hemen önce oluşturup doldurmanızı öneririz. Hazır olduğunda, paywall’ı sunmak için kullandığınız AdaptyUI metoduna aktarın.

Yükleme göstergesinin rengini değiştirme

Yükleme göstergesinin varsayılan rengini aşağıdaki şekilde geçersiz kılabilirsiniz:


<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">

    <item name="adapty_progressIndicatorColor">@color/yourColor</item>
</style>