如何通过 Jetpack compose 展示原生广告？答案

【问题标题】：How to display Native ads via Jetpack compose?如何通过 Jetpack compose 展示原生广告？
【发布时间】：2022-07-11 23:46:52
【问题描述】：

我一直在寻找有关如何在 compose 上显示原生广告的示例应用程序，但我找不到任何示例应用程序。有什么解决办法吗？

【问题讨论】：

标签： admob android-jetpack-compose native-ads

【解决方案1】：

您应该使用 AndroidView 来包装 AdMob AdView

来自docs：

要包含视图元素或层次结构，请使用 AndroidView 组合。 AndroidView 传递了一个返回视图的 lambda。 AndroidView 还提供了在视图膨胀时调用的更新回调。每当回调中读取的State 发生变化时，AndroidView 就会重新组合。

AndroidView(
    factory = { context: Context ->
        AdView(context).apply {
            // config AdView 
        }
    },
    update = { adview ->
    }
)

【讨论】：

我已经看到另一个使用这种方法处理横幅广告的 SO 答案，但我不确定它是否适用于原生广告。我的应用仍在审核中，我暂时无法测试此方法。

【解决方案2】：

使用AndroidViewBinding 包裹NativeAdView。

// build.gradle.kts
dependencies {
    implementation("androidx.compose.ui:ui-viewbinding:1.2.0-beta03")
}

创建包含 NativeAdView 的 ViewBinding。

@Composable
fun NativeMediumAd() {
    AndroidViewBinding(factory = LayoutNativeAdBinding::inflate) {
        // Initialize NativeAdView
        val adView = root.also { adView ->
            adView.advertiserView = tvAdvertiser
            adView.bodyView = tvBody
            adView.callToActionView = btnCta
            adView.headlineView = tvHeadline
            adView.iconView = ivAppIcon
            adView.priceView = tvPrice
            adView.starRatingView = rtbStars
            adView.storeView = tvStore
            adView.mediaView = mvContent
        }

        // Request Ad
        val adLoader = AdLoader.Builder(adView.context, "NATIVE_AD_KEY")
            .forNativeAd { nativeAd ->
                nativeAd.advertiser?.let { advertiser ->
                    tvAdvertiser.text = advertiser
                }

                nativeAd.body?.let { body ->
                    tvBody.text = body
                }

                nativeAd.callToAction?.let { cta ->
                    btnCta.text = cta
                }

                nativeAd.headline?.let { headline ->
                    tvHeadline.text = headline
                }

                nativeAd.icon?.let { icon ->
                    ivAppIcon.setImageDrawable(icon.drawable)
                }

                nativeAd.price?.let { price ->
                    tvPrice.text = price
                }

                nativeAd.starRating?.let { rating ->
                    rtbStars.rating = rating.toFloat()
                }

                nativeAd.store?.let { store ->
                    tvStore.text = store
                }

                adView.setNativeAd(nativeAd)
            })
            .withNativeAdOptions(NativeAdOptions.Builder().build())
            .build()
        adLoader.loadAd(AdRequest.Builder().build())
    }
}

完整源代码：

【讨论】：