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

【问题标题】：Custom Toggle Button: How to prevent text overlapping with icon自定义切换按钮：如何防止文本与图标重叠
【发布时间】：2014-11-30 23:21:27
【问题描述】：

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

    *-------------------*
    *  *------------*   *
    *  *            *   *
    *  *   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 进行 hack，但如果可能的话，我想使用自定义的 ToggleButton 完成所有操作。

【问题讨论】：

标签： android user-interface padding android-drawable togglebutton

【解决方案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" />

【讨论】：

【解决方案2】：

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

问候！

【讨论】：