Question

我正在尝试制作自定义切换按钮，其中图标比原始内置按钮大得多。我希望实现这样的目标：

    *-------------------*
    *  *------------*   *
    *  *            *   *
    *  *   Icon     *   *
    *  *            *   *
    *  *------------*   *
    *  *------------*   *
    *  *    Text    *   *
    *  *------------*   *
    *-------------------*

所以这是我的按钮：

    <ToggleButton
            android:id="@+id/tb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="18dp"
            android:background="@drawable/custom_toggle_layer"
            android:gravity="bottom | center_horizontal"
            android:textAppearance="@style/CustomTBText"
            android:textColor="@color/white"
            android:textOff="@string/tb_off"
            android:textOn="@string/tb_on" />

自定义背景在drawable/custom_toggle_layer.xml中定义：

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
        <item android:id="@+android:id/background"   
              android:drawable="@drawable/custom_toggle_bg" /> 
        <item android:id="@+android:id/toggle" 
              android:drawable="@drawable/custom_toggle_icon" /> 
    </layer-list>

custom_toggle_bg和custom_toggle_icon都是选择器并且工作正常。

问题是文本与图标的底部重叠。文本与底部对齐，如果我使图标变大，文本会正确地粘贴到按钮的底部。

我首先尝试在切换按钮上设置填充，但这只会将文本移动到图标内部，但还需要更多。

我尝试独立于按钮设置文本样式，因此我定义了自定义样式：

    <style name="CustomTBText">
        <item name="android:textSize">14sp</item><!-- This works -->
        <item name="android:textColor">@color/white</item><!-- This works -->

        <item name="android:paddingTop">15dp</item><!-- This does not work -->
    </style>

并尝试仅为文本设置顶部填充，但该属性不起作用（样式中的其他属性正常工作）。

我该如何解决这个问题？我可以做一个黑客将按钮的文本设置为空并使用外部TextView，但如果可能的话，我想使用自定义的ToggleButton来做所有事情。

Answer 1

自定义切换按钮的大多数教程都是将图层列表设置为整个按钮的背景：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:id="@+android:id/background"   
          android:drawable="@drawable/custom_toggle_bg" /> 
    <item android:id="@+android:id/toggle" 
          android:drawable="@drawable/custom_toggle_icon" /> 
</layer-list>

这会导致文本出现问题（这也是大多数教程不显示文本的原因）。所以我所做的是将custom_toggle_bg设置为背景，将custom_toggle_icon设置为drawableTop，现在它可以正常工作。这是固定的按钮：

<ToggleButton
        android:id="@+id/tb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="18dp"
        android:background="@drawable/custom_toggle_bg"
        android:drawableTop="@drawable/custom_toggle_icon"
        android:gravity="bottom | center_horizontal"
        android:textAppearance="@style/CustomTBText"
        android:textColor="@color/white"
        android:textOff="@string/tb_off"
        android:textOn="@string/tb_on" />

Answer 2

你可以使用drawable的位置，比如drawableLeft，drawableTop，drawabeRight，drawableBottom和drawableStart，具体取决于你想看到的图标。

问候！

自定义切换按钮：如何防止文本与图标重叠

2 个答案: