求基于最新API的Kotlin Compose实现AdMob NativeAds最简代码

1. 添加依赖 #

在app级build.gradle.kts中引入最新AdMob及Compose相关依赖：

dependencies {
    implementation("com.google.android.gms:play-services-ads:22.6.0") // 请使用官方最新版本
    implementation("androidx.compose.ui:ui:1.5.4") // 匹配你的Compose版本
}

2. 配置Manifest #

在AndroidManifest.xml的<application>标签内添加AdMob应用ID：

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="你的AdMob应用ID"/>

3. 初始化AdMob #

在自定义Application类或启动Activity中完成初始化：

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        MobileAds.initialize(this) {}
    }
}

4. 广告加载ViewModel #

用ViewModel管理广告生命周期，避免内存泄漏：

import android.content.Context
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.google.android.gms.ads.AdLoader
import com.google.android.gms.ads.AdRequest
import com.google.android.gms.ads.nativead.NativeAd
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.launch

class NativeAdViewModel : ViewModel() {
    private val _nativeAd = MutableStateFlow<NativeAd?>(null)
    val nativeAd: StateFlow<NativeAd?> = _nativeAd

    fun loadNativeAd(context: Context, adUnitId: String) {
        val adLoader = AdLoader.Builder(context, adUnitId)
            .forNativeAd { ad -> _nativeAd.value = ad }
            .build()

        viewModelScope.launch {
            adLoader.loadAd(AdRequest.Builder().build())
        }
    }

    override fun onCleared() {
        super.onCleared()
        _nativeAd.value?.destroy()
    }
}

5. Compose广告展示组件 #

用Compose原生组件构建广告UI，直接绑定广告数据：

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.google.android.gms.ads.nativead.NativeAd

@Composable
fun NativeAdView(adUnitId: String) {
    val viewModel: NativeAdViewModel = viewModel()
    val nativeAd = viewModel.nativeAd.collectAsState().value
    val context = LocalContext.current

    if (nativeAd == null) {
        viewModel.loadNativeAd(context, adUnitId)
        Text(text = "加载广告中...", modifier = Modifier.padding(16.dp))
        return
    }

    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            nativeAd.headline?.let {
                Text(text = it, modifier = Modifier.padding(bottom = 8.dp))
            }
            nativeAd.body?.let {
                Text(text = it, modifier = Modifier.padding(bottom = 8.dp))
            }
            nativeAd.callToAction?.let {
                Button(
                    onClick = { nativeAd.performClick() },
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text(text = it)
                }
            }
            nativeAd.icon?.drawable?.let { icon ->
                Image(
                    painter = painterResource(id = icon),
                    contentDescription = "广告图标",
                    modifier = Modifier.size(48.dp)
                )
            }
        }
    }
}

6. 使用示例 #

在你的Compose页面中直接调用组件：

@Composable
fun HomeScreen() {
    Column {
        // 页面其他内容
        NativeAdView(adUnitId = "你的原生广告单元ID")
    }
}

内容的提问来源于stack exchange，提问作者Robert Jamison