嘿，这个需求很实用！我刚好在项目里折腾过类似的自定义Quick Settings Tile，来给你一步步拆解怎么实现这种自定义背景的效果~

核心原理 #

首先得明确：Android系统默认的Quick Settings Tile样式是由系统控制的，想要突破自带样式、设置自定义背景，在Android 12（API 31）及以上才有官方支持的灵活方案——通过TileService提供的setQsTileView()方法，直接替换整个Tile的视图，这样你就能完全自定义背景、布局、图标甚至交互逻辑。而在更低版本的系统上，只能通过修改Tile的图标、颜色来间接模拟，没法做到完全自定义背景布局。

具体实现步骤 #

1. 先在Manifest里注册Tile服务 #

首先得让系统识别你的自定义Tile，在AndroidManifest.xml里添加权限和TileService组件：

<uses-permission android:name="android.permission.BIND_QUICK_SETTINGS_TILE"/>

<service
    android:name=".CustomTileService"
    android:label="@string/custom_tile_label"
    android:icon="@drawable/ic_custom_tile"
    android:permission="android.permission.BIND_QUICK_SETTINGS_TILE">
    <intent-filter>
        <action android:name="android.service.quicksettings.action.QS_TILE"/>
    </intent-filter>
    <meta-data
        android:name="android.service.quicksettings.ACTIVE_TILE"
        android:value="true"/>
</service>

2. 设计自定义Tile的布局 #

接下来创建你想要的Tile布局，比如在res/layout/qs_custom_tile.xml里写一个带圆角背景的布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/tile_background"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="8dp">

    <ImageView
        android:id="@+id/tile_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_custom_tile"/>

    <TextView
        android:id="@+id/tile_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/custom_tile_label"
        android:textColor="@android:color/white"
        android:textSize="12sp"/>
</LinearLayout>

这里的tile_background可以用一个shape drawable来实现带圆角的纯色背景（res/drawable/tile_background.xml）：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FF6200EE"/>
    <corners android:radius="12dp"/>
</shape>

3. 实现自定义TileService类 #

这一步是核心，我们要继承TileService，加载自定义布局并替换系统默认的Tile视图：

class CustomTileService : TileService() {
    private lateinit var customTileView: View

    override fun onCreate() {
        super.onCreate()
        // 提前加载自定义布局
        customTileView = LayoutInflater.from(this).inflate(R.layout.qs_custom_tile, null)
        // 给自定义视图设置点击事件
        customTileView.setOnClickListener {
            val tile = qsTile ?: return@setOnClickListener
            // 切换Tile的激活状态
            tile.state = if (tile.state == Tile.STATE_ACTIVE) Tile.STATE_INACTIVE else Tile.STATE_ACTIVE
            // 更新自定义视图的外观
            updateTileAppearance(tile.state)
            // 通知系统更新Tile
            tile.updateTile()
        }
    }

    override fun onStartListening() {
        super.onStartListening()
        val tile = qsTile ?: return
        // 初始化Tile的外观状态
        updateTileAppearance(tile.state)
        
        // 针对Android 12+设置自定义视图
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            setQsTileView(customTileView)
        } else {
            // 低版本兼容：只能修改系统默认Tile的图标和描述
            tile.icon = Icon.createWithResource(this, 
                if (tile.state == Tile.STATE_ACTIVE) R.drawable.ic_custom_tile_active else R.drawable.ic_custom_tile)
            tile.contentDescription = getString(
                if (tile.state == Tile.STATE_ACTIVE) R.string.tile_active_desc else R.string.tile_inactive_desc)
            tile.updateTile()
        }
    }

    // 根据状态更新自定义视图的样式
    private fun updateTileAppearance(state: Int) {
        val icon = customTileView.findViewById<ImageView>(R.id.tile_icon)
        val label = customTileView.findViewById<TextView>(R.id.tile_label)
        val background = customTileView.background as GradientDrawable
        
        if (state == Tile.STATE_ACTIVE) {
            icon.setImageResource(R.drawable.ic_custom_tile_active)
            label.text = getString(R.string.tile_active_label)
            background.setColor(Color.parseColor("#FF3700B3"))
        } else {
            icon.setImageResource(R.drawable.ic_custom_tile)
            label.text = getString(R.string.custom_tile_label)
            background.setColor(Color.parseColor("#FF6200EE"))
        }
    }
}

几个关键注意点 #

• 版本兼容：自定义视图只在Android 12及以上生效，低版本只能退而求其次，通过修改Tile的图标、颜色来模拟效果。
• 性能优化：自定义Tile的布局要尽量简单，避免嵌套过深或者使用复杂控件，毕竟快速设置面板需要快速加载和响应。
• 主题适配：记得适配系统的深色/浅色模式，可以通过AppCompatDelegate.getDefaultNightMode()判断当前主题，动态调整背景颜色，避免视觉违和。

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