带单选按钮的 Android 颜色选择器

Question

我想创建一组单选按钮来选择颜色。像这样:

我怎样才能实现这样的目标？我没有在原始 RadioButton 上找到任何颜色属性。我必须创建自定义控件吗？如果是，有人可以提示我基本步骤，以便我可以尝试一些新的研究吗？我是 Android 的新手，正在尝试边做边学...

Answer 1

您当然可以尝试自定义单选按钮，或者您可以简单地使用或扩充 View 来实现这种颜色选择器。

使用 xml:您需要在 drawable 文件夹中创建两个 drawable 资源文件。首先是这样的，

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid android:color="#e91e63" />
<size
    android:width="48dp"
    android:height="48dp" />

当您没有收到对 View 的任何点击(可点击)时，这适用。当我们检测到点击时应用第二个文件。

    xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid android:color="#e91e63" />
<size
    android:width="53dp"
    android:height="53dp" />
<stroke
    android:width="5dp"
    android:color="#d2d1d2" />

现在，在 Activity 中，需要将背景可绘制对象设置为 View (无论是图像按钮还是 ImageView )。事情是这样的(只是一个例子):

public class MainActivity extends AppCompatActivity {
private ImageButton img;
private boolean isSelected = false;

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

    img = (ImageButton) findViewById(R.id.img);
    img.setClickable(true);
    img.setBackground(getDrawable(R.drawable.unselected_circle));
    img.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            img.startAnimation(AnimationUtils.loadAnimation(getBaseContext(), android.R.anim.fade_in));
            if (isSelected) {
                isSelected = false;
                img.setBackground(getDrawable(R.drawable.unselected_circle));
            } else {
                isSelected = true;
                img.setBackground(getDrawable(R.drawable.selected_circle));
            }
        }
    });
}

activity_main 布局看起来像这样:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewGroup"
tools:context="com.android.empty.MainActivity">

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:layout_margin="20dp"
    android:clickable="true"
    android:id="@+id/img"/>

但是，使用这种方法最终会为不同的颜色创建多个可绘制对象。为避免这种情况，我们可以以编程方式创建可绘制对象，编写一次代码并使用 setColor(int color) 方法对不同的颜色使用相同的代码:

public class MainActivity extends AppCompatActivity {
private ImageButton img;
private boolean isSelected = false;

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

    final GradientDrawable unselected = new GradientDrawable();
    unselected.setShape(GradientDrawable.OVAL);
    unselected.setColor(Color.parseColor("#e91e63"));
    unselected.setSize(144, 144);

    final GradientDrawable selected = new GradientDrawable();
    selected.setShape(GradientDrawable.OVAL);
    selected.setColor(Color.parseColor("#E91E63"));
    selected.setSize(159, 159);
    selected.setStroke(15, Color.parseColor("#D2D1D2"));

    img = (ImageButton) findViewById(R.id.img);
    img.setBackground(unselected);
    img.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            img.startAnimation(AnimationUtils.loadAnimation(getBaseContext(), android.R.anim.fade_in));
            if (isSelected) {
                isSelected = false;
                img.setBackground(unselected);
            } else {
                isSelected = true;
                img.setBackground(selected);
            }
        }
    });
}

The result looks something like this

注意:这个例子只说明了实现一个选择器的方法，就像问题中提到的那样。要创建多个选择器，需要使用 LayoutInflater 类扩充 View (图像按钮)。