Android通知折叠模式显示图片：如何实现YouTube式缩略图效果？

嘿，这个问题我之前折腾过好一阵子！YouTube的这种通知效果，其实是结合了自定义折叠视图 + BigPictureStyle展开视图来实现的——默认的BigPictureStyle确实只会在折叠态显示文本，要实现折叠时带缩略图、展开时放大图的效果，你需要分别设置通知的折叠布局和展开布局。

1. 准备通知布局文件 #

你需要两个布局：一个是折叠状态下显示的紧凑布局（带缩略图），另一个用系统的BigPictureStyle作为展开时的大图布局（兼容性更好，不用自己写大图布局）。

折叠状态布局（res/layout/notification_collapsed.xml） #

这个布局要包含小图标、标题、文本，以及右侧的缩略图，尽量用系统内置的ID来保证兼容性：

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

    <!-- 通知小图标 -->
    <ImageView
        android:id="@android:id/icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/ic_notification_small" />

    <!-- 标题和文本区域 -->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_marginStart="12dp">

        <TextView
            android:id="@android:id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@android:id/text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@android:color/darker_gray" />
    </LinearLayout>

    <!-- 折叠态显示的缩略图 -->
    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:scaleType="centerCrop" />
</LinearLayout>

2. 代码构建通知实例 #

在代码中，我们需要给通知分别绑定折叠视图和展开视图，具体步骤如下：

// 1. 加载缩略图和大图的Bitmap（建议提前压缩，避免内存溢出）
Bitmap thumbnailBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.video_thumbnail);
Bitmap largeBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.video_large);

// 2. 初始化折叠视图的RemoteViews，填充内容
RemoteViews collapsedView = new RemoteViews(getPackageName(), R.layout.notification_collapsed);
collapsedView.setTextViewText(android.R.id.title, "YouTube视频更新");
collapsedView.setTextViewText(android.R.id.text, "点击查看最新发布的视频");
collapsedView.setImageViewBitmap(R.id.thumbnail, thumbnailBitmap);
collapsedView.setImageViewResource(android.R.id.icon, R.drawable.ic_notification_small);

// 3. 配置BigPictureStyle作为展开视图
NotificationCompat.BigPictureStyle bigPictureStyle = new NotificationCompat.BigPictureStyle()
        .bigPicture(largeBitmap) // 设置展开时的大图
        .setContentTitle("YouTube视频更新")
        .setContentText("点击查看最新发布的视频")
        .setSummaryText("来自YouTube");

// 4. 构建最终的通知
NotificationCompat.Builder builder = new NotificationCompat.Builder(this, "YOUTUBE_NOTIFICATION_CHANNEL")
        .setSmallIcon(R.drawable.ic_notification_small) // 强制要求，否则通知无法显示
        .setCustomContentView(collapsedView) // 绑定折叠视图
        .setStyle(bigPictureStyle) // 绑定展开视图
        .setPriority(NotificationCompat.PRIORITY_HIGH)
        .setAutoCancel(true); // 点击后自动取消通知

// 5. 发送通知
NotificationManagerCompat notificationManager = NotificationManagerCompat.from(this);
notificationManager.notify(1, builder.build());

3. 关键注意事项 #

• 必须设置setSmallIcon：这是Android通知的硬性要求，没有的话通知根本不会显示在状态栏。
• RemoteViews兼容性：尽量使用系统内置的ID（比如android.R.id.title），避免自定义ID在不同Launcher上出现布局错乱。
• Bitmap优化：缩略图建议用64x64~96x96的尺寸，大图控制在1080x1920以内，防止占用过多内存导致OOM。
• 极简替代方案：如果你不想自定义布局，可以试试给Builder设置setLargeIcon(thumbnailBitmap)，然后在BigPictureStyle里调用bigLargeIcon(null)。这样折叠态时，largeIcon会显示在通知左侧（部分Launcher可能会放在右侧），展开时只显示大图。但这种方式的布局取决于Launcher实现，不如自定义布局灵活可控。

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