如何制作带有单独按钮的颜色选择器？

Posted 2023-04-19

【中文标题】如何制作带有单独按钮的颜色选择器？

【英文标题】：How to make a color picker with separate buttons?

【发布时间】：2021-12-16 22:14:48

【问题描述】：

我想在我的图像上制作一个颜色选择器。例如，我们有 6 个按钮。当我们按下按钮选择器颜色时，获得 1dp 帧以显示选择的颜色。我认为最好的方法是将 RadioGroup 与 RadioButtons 一起使用，但我怎样才能使单选按钮成为正方形并在其中着色？还是我错了？

感谢任何帮助:) image with colors

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

【参考方案1】：

您可以在一个 LinearLayout 中使用多个 ToggleButtons。

确保 ToggleButtons 既没有 OnText 也没有 OffText。

将 ToggleButtons 的背景设置为如下所示。

bg_toggle.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_active_red" android:state_checked="true" />
    <item android:drawable="@drawable/bg_red">
</selector>

bg_red.xml：

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:bottom="5dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp">
    
            <shape android:shape="rectangle">
                <solid android:color="#F00" />
            </shape>
        </item>
    </layer-list>

bg_red_active.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke
                android:
                android:color="#000" />
        </shape>
    </item>

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">

        <shape android:shape="rectangle">
            <solid android:color="#F00" />
        </shape>
    </item>
</layer-list>

Android 现在会根据天气切换背景资源，是否选中切换。您可能想使用 ClickListeners 来停用未单击的按钮。这里可以进行很多优化，但是由于您提出了一个相当模糊的问题，因此您得到的答案也很模糊。

您可以将其封装到自定义视图中，并创建可以与自定义颜色一起重复使用的内容。

更新： 下面将向您展示如何使用该背景。如果选中 Toggle，则黑色边框可见。

<LinearLayout
    android:layout_
    android:layout_
    android:orientation="horizontal">

    <ToggleButton
        android:id="@+id/toggle_red"
        android:layout_
        android:layout_
        android:layout_weight="1"
        android:background="@drawable/bg_toggle_red" />

    <ToggleButton
        android:id="@+id/toggle_blue"
        android:layout_
        android:layout_
        android:layout_weight="1"
        android:background="@drawable/bg_toggle_blue" />
</LinearLayout>

【讨论】：

我只想获得与图像上显示的相似的输出。颜色：像其中的 8 种。当我选择颜色时，它会变成黑色。此颜色选择将出现在一个对话框中，当您完成并按“保存”后，此颜色应设置为 Google 地图上的标记颜色。

好的。我提供的答案向您展示了如何创建一个按钮。我不会用不同的颜色为你重复 8 次答案。

我还添加了一个使用示例。