Flow ve paywall'ları görüntüleme - Android

Bir flow veya paywall oluşturduysanız, bunu kullanıcıya göstermek için mobil uygulama kodunuzda render etme konusunda endişelenmenize gerek yok. Böyle bir flow veya paywall, içinde ne gösterileceğini ve nasıl gösterileceğini zaten barındırır.

Bu kılavuz, Adapty tarafından render edilen flow’ları ve yeni Paywall Builder paywalllarını kapsar. Remote config paywallları ve Observer mode 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 Paywall Builder paywall’larını sunma

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 detaylarını içeren bir `AdaptyUI.FlowConfiguration` nesnesi sağlayın. Yüklemek için `AdaptyUI.getFlowConfiguration(flow)` metodunu kullanın. Daha fazla bilgi 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 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ı	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 bilgi 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 arkasına gizlenmesini önlemek için flow’un çevresindeki boşluklardır. Varsayılan: `Unspecified` — yani Adapty inset’leri otomatik olarak ayarlar; bu, kenardan kenara flow’lar için idealdir. Flow’unuz kenardan kenara değilse özel inset’ler ayarlamak isteyebilirsiniz. Bunun nasıl yapılacağını öğrenmek için aşağıdaki Flow inset’lerini değiştirme bölümünü okuyun.
customAssets	isteğe bağlı	Flow veya paywall’ınızdaki görsel ve videoları çalışma zamanında değiştirmek için bir `AdaptyCustomAssets` nesnesi geçin. Daha fazla bilgi 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 buna karşılık gelen bir dizeye dönüştürür. Daha fazla bilgi için Paywall Builder’da özel etiketler konusuna bakın.
timerResolver	isteğe bağlı	Özel zamanlayıcı işlevselliği kullanacaksanız çözümleyiciyi buraya geçin.

Adapty SDK’nın bir mobil uygulamaya nasıl entegre edildiğini gerçek bir örnekle görmek ister misiniz? Tam kurulumu, paywall’ların gösterimini, satın alma işlemlerini ve diğer temel işlevleri içeren ö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.

Bu kılavuz yalnızca SDK v3.0 gerektiren yeni Paywall Builder paywallları için geçerlidir. Paywall sunma süreci, farklı Paywall Builder sürümleriyle tasarlanan paywalllar, remote config paywalllar ve Observer modu için farklılık gösterir.

Remote config paywalllarını sunmak için bkz. Remote config ile tasarlanan paywall’ı render etme.
Observer modu paywalllarını sunmak için bkz. Android - Observer modunda 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.

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>