Android按钮状态切换：变更内部Drawable位置与文本

针对需求（ON状态时显示右侧图标+文本"ON"，OFF状态时显示左侧图标+文本"OFF"），提供三种常用实现方式：

方法一：代码直接控制（快速实现） #

步骤1：修改布局，给按钮添加ID #

<Button
    android:id="@+id/toggle_btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="32px"
    android:layout_marginTop="32px"
    android:layout_marginRight="32px"
    android:background="#44C4C5"
    android:drawableEnd="@drawable/ic_ON"
    android:gravity="center"
    android:text="ON"
    android:textFontWeight="300"
    android:textSize="32px"/>

步骤2：在Activity/Fragment中处理点击事件 #

Kotlin代码

private var isOn = true

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val toggleBtn = findViewById<Button>(R.id.toggle_btn)
    toggleBtn.setOnClickListener {
        isOn = !isOn
        if (isOn) {
            // 切换至ON状态
            toggleBtn.text = "ON"
            // 清除左侧图标，设置右侧图标
            toggleBtn.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_ON, 0)
        } else {
            // 切换至OFF状态
            toggleBtn.text = "OFF"
            // 设置左侧图标，清除右侧图标
            toggleBtn.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_Off, 0, 0, 0)
        }
    }
}

Java代码

private boolean isOn = true;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Button toggleBtn = findViewById(R.id.toggle_btn);
    toggleBtn.setOnClickListener(v -> {
        isOn = !isOn;
        if (isOn) {
            toggleBtn.setText("ON");
            toggleBtn.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_ON, 0);
        } else {
            toggleBtn.setText("OFF");
            toggleBtn.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_Off, 0, 0, 0);
        }
    });
}

方法二：DataBinding双向绑定（MVVM架构适配） #

步骤1：启用DataBinding #

在app模块的build.gradle中开启DataBinding：

android {
    ...
    buildFeatures {
        dataBinding true
    }
}

步骤2：编写DataBinding布局 #

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="isOn"
            type="android.databinding.ObservableBoolean" />
    </data>

    <Button
        android:id="@+id/toggle_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="32px"
        android:layout_marginTop="32px"
        android:layout_marginRight="32px"
        android:background="#44C4C5"
        android:drawableLeft="@{isOn.get() ? 0 : @drawable/ic_Off}"
        android:drawableEnd="@{isOn.get() ? @drawable/ic_ON : 0}"
        android:gravity="center"
        android:text="@{isOn.get() ? `ON` : `OFF`}"
        android:textFontWeight="300"
        android:textSize="32px"
        android:onClick="@{() -> isOn.set(!isOn.get())}" />
</layout>

步骤3：在Activity中绑定数据 #

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)

    // 初始化状态为ON
    binding.isOn = ObservableBoolean(true)
    binding.lifecycleOwner = this
}

方法三：自定义View（复用场景推荐） #

如果该按钮需要在多个页面复用，可以封装成自定义View：

class ToggleButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : androidx.appcompat.widget.AppCompatButton(context, attrs, defStyleAttr) {

    private var isOn = true

    init {
        setOnClickListener { toggleState() }
        updateViewState()
    }

    private fun toggleState() {
        isOn = !isOn
        updateViewState()
    }

    private fun updateViewState() {
        text = if (isOn) "ON" else "OFF"
        setCompoundDrawablesWithIntrinsicBounds(
            if (isOn) 0 else R.drawable.ic_Off,
            0,
            if (isOn) R.drawable.ic_ON else 0,
            0
        )
    }

    // 对外暴露状态设置方法
    fun setOnState(on: Boolean) {
        isOn = on
        updateViewState()
    }
}

布局中直接使用：

<com.yourpackage.ToggleButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="32px"
    android:layout_marginTop="32px"
    android:layout_marginRight="32px"
    android:background="#44C4C5"
    android:gravity="center"
    android:textFontWeight="300"
    android:textSize="32px"/>

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