Jetpack Compose项目中带操作的自定义通知布局实现方法问询

一、实现自定义布局（Compose转Bitmap方案） #

Android通知系统暂不支持直接将Compose作为RemoteViews使用，因此可以先将Compose布局渲染为Bitmap，再通过RemoteViews展示：

1. 编写Compose布局内容

@Composable
fun CustomNotificationContent(title: String, message: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .background(Color.White),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = title, fontSize = 18.sp, fontWeight = FontWeight.Bold)
        Spacer(modifier = Modifier.height(8.dp))
        Text(text = message, fontSize = 14.sp, color = Color.Gray)
    }
}

2. 将Compose布局转换为Bitmap

fun composeToBitmap(context: Context, content: @Composable () -> Unit): Bitmap {
    val density = context.resources.displayMetrics.density
    // 按通知建议尺寸设置宽高
    val width = (320 * density).toInt()
    val height = (120 * density).toInt()

    val composeView = ComposeView(context).apply {
        setContent(content)
        layoutParams = ViewGroup.LayoutParams(width, height)
        measure(
            View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
            View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY)
        )
        layout(0, 0, measuredWidth, measuredHeight)
    }

    return Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888).apply {
        composeView.draw(Canvas(this))
    }
}

3. 创建承载Bitmap的RemoteViews
   先在res/layout下创建notification_container.xml：

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/notification_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"/>

再生成RemoteViews：

fun createCustomRemoteViews(context: Context, bitmap: Bitmap): RemoteViews {
    return RemoteViews(context.packageName, R.layout.notification_container).apply {
        setImageViewBitmap(R.id.notification_content, bitmap)
    }
}

二、添加通知标准操作按钮 #

通过NotificationCompat.Builder添加底部操作按钮，点击触发自定义逻辑：

fun buildCustomNotification(context: Context): Notification {
    // 生成Compose布局的Bitmap
    val bitmap = composeToBitmap(context) {
        CustomNotificationContent("自定义通知标题", "这是带操作的自定义通知内容")
    }
    val remoteViews = createCustomRemoteViews(context, bitmap)

    // 创建操作意图
    val actionIntent = Intent(context, YourBroadcastReceiver::class.java).apply {
        action = "NOTIFICATION_ACTION_CLICK"
        putExtra("notification_id", 1)
    }
    val pendingIntent = PendingIntent.getBroadcast(
        context,
        0,
        actionIntent,
        PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
    )

    return NotificationCompat.Builder(context, "your_channel_id")
        .setSmallIcon(R.drawable.ic_notification)
        .setCustomContentView(remoteViews)
        .setCustomBigContentView(remoteViews) // 展开通知时显示相同布局
        .addAction(R.drawable.ic_action, "操作按钮", pendingIntent) // 添加操作按钮
        .setPriority(NotificationCompat.PRIORITY_DEFAULT)
        .build()
}

三、实现自定义布局内的交互（可选） #

若需要布局内控件可点击，需使用传统XML布局配合RemoteViews（Bitmap无法支持交互）：

1. 创建带交互控件的XML布局custom_notification_layout.xml：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/notification_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/notification_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:textColor="@android:color/darker_gray"
        android:layout_marginTop="8dp"/>

    <Button
        android:id="@+id/btn_in_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="布局内按钮"
        android:layout_marginTop="16dp"/>
</LinearLayout>

2. 绑定布局内控件的点击事件

fun createInteractiveRemoteViews(context: Context): RemoteViews {
    val remoteViews = RemoteViews(context.packageName, R.layout.custom_notification_layout).apply {
        setTextViewText(R.id.notification_title, "带交互的自定义通知")
        setTextViewText(R.id.notification_message, "点击布局内按钮触发操作")

        // 绑定布局内按钮的点击意图
        val btnIntent = Intent(context, YourBroadcastReceiver::class.java).apply {
            action = "LAYOUT_BUTTON_CLICK"
        }
        val btnPendingIntent = PendingIntent.getBroadcast(
            context,
            1,
            btnIntent,
            PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
        )
        setOnClickPendingIntent(R.id.btn_in_layout, btnPendingIntent)
    }
    return remoteViews
}

3. 构建带双操作的通知

fun buildInteractiveNotification(context: Context): Notification {
    val remoteViews = createInteractiveRemoteViews(context)

    // 添加标准操作按钮
    val standardActionIntent = Intent(context, YourBroadcastReceiver::class.java).apply {
        action = "STANDARD_ACTION_CLICK"
    }
    val standardPendingIntent = PendingIntent.getBroadcast(
        context,
        2,
        standardActionIntent,
        PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
    )

    return NotificationCompat.Builder(context, "your_channel_id")
        .setSmallIcon(R.drawable.ic_notification)
        .setCustomContentView(remoteViews)
        .setCustomBigContentView(remoteViews)
        .addAction(R.drawable.ic_action, "标准操作", standardPendingIntent)
        .setPriority(NotificationCompat.PRIORITY_DEFAULT)
        .build()
}

四、注意事项 #

• Android 8.0及以上版本必须提前创建通知渠道，否则通知无法显示。
• 不同操作的PendingIntent需使用唯一的requestCode，避免意图被覆盖。
• Compose转Bitmap适合静态布局，动态交互场景建议使用XML+RemoteViews方案。
• 自定义通知宽度建议不超过320dp，适配不同设备屏幕。

内容的提问来源于stack exchange，提问作者A.G