Question

我想要一个包含图标的ToggleButton矩形，一旦点击，背景应该会改变颜色，但图标应保持可见。

到目前为止，我可以点击一个矩形更改颜色，如下所示：

<ToggleButton
   android:background="@drawable/toggle_selector"
   android:id="@+id/toggle"
   android:checked="false"
   android:textOn=""
   android:textOff=""
   android:layout_width="60dp"
   android:layout_height="60dp" />

toggle_selector.xml：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:drawable="@drawable/toggle_state_on"
      android:state_checked="true" />
  <item
      android:drawable="@drawable/toggle_state_off"
      android:state_checked="false" />
</selector>

toggle_state_on.xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <!-- Draw a 5dp width border around shape -->
            <stroke
                android:color="#4c975d"
                android:width="5dp"
                />
        </shape>
    </item>
    <!-- Overlap the left, top and right border using background color  -->
    <item
        android:bottom="5dp"
        >
        <shape android:shape="rectangle">
            <solid android:color="#6dd988"/>
        </shape>
    </item>
</layer-list>

toggle_state_off与on相同但颜色不同。

我无法找到如何将图标放在我创建的按钮的中心，这可以实现吗？怎么样？

Answer 1

您可能需要根据需要修改以下内容，但是这将有一个图标作为状态开启和关闭的中心。添加行toggle_state_off和toggle_state_on android:drawable="@drawable/ic_attach_money_black_24dp"

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <!-- Draw a 5dp width border around shape -->
            <stroke
                android:color="#2c125d"
                android:width="5dp"
                />
        </shape>
    </item>
    <!-- Overlap the left, top and right border using background color  -->
    <item
        android:bottom="5dp"
        android:drawable="@drawable/ic_attach_money_black_24dp">
        <shape android:shape="rectangle">
            <solid android:color="#2c125d"/>
        </shape>
    </item>
</layer-list>

如果这有帮助，请将其标记为已解答

包含图标的ToggleButton矩形

1 个答案: