📌  相关文章
📜  如何使用色轮和滑块在Android中创建拾色器工具?(1)

📅  最后修改于: 2023-12-03 15:38:08.616000             🧑  作者: Mango

在Android中创建拾色器工具

拾色器工具是将颜色转换为16进制或RGB格式的工具。在Android中,我们可以使用色轮和滑块来创建一个拾色器工具。

1. 色轮

色轮可以让用户直观地选择一种颜色。Android提供了ColorPicker库,可以很方便地实现这个功能。在build.gradle文件中添加以下依赖:

implementation 'com.github.QuadFlask:colorpicker:0.0.13'

在布局文件中使用ColorPickerView组件,设置id属性以便在代码中获取:

<com.github.QuadFlask.colorpicker.ColorPickerView
  android:id="@+id/color_picker_view"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />

在代码中获取ColorPickerView的实例,然后设置监听器来获取选中的颜色。以下是一个简单的示例:

ColorPickerView colorPickerView = findViewById(R.id.color_picker_view);

colorPickerView.setOnColorChangedListener(new ColorPickerView.OnColorChangedListener() {
  @Override
  public void onColorChanged(int selectedColor) {
    // 获取选中的颜色
  }
});
2. 滑块

滑块可以让用户调整颜色的饱和度、亮度、透明度等参数。Android提供了androidx.appcompat.widget.AppCompatSeekBar组件,可以很方便地实现这个功能。

在布局文件中使用AppCompatSeekBar组件,设置id属性以便在代码中获取:

<SeekBar
  android:id="@+id/saturation_seek_bar"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

在代码中获取SeekBar的实例,然后设置监听器来获取选中的参数值。以下是一个简单的示例:

SeekBar saturationSeekBar = findViewById(R.id.saturation_seek_bar);

saturationSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
  @Override
  public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    float saturation = progress / 100f; // 将进度值转换为饱和度值(0-1之间)
    // 获取当前选中的颜色,并设置饱和度值
  }

  @Override
  public void onStartTrackingTouch(SeekBar seekBar) {
    // 不需要实现
  }

  @Override
  public void onStopTrackingTouch(SeekBar seekBar) {
    // 不需要实现
  }
});
3. 完整示例代码

以下是一个完整的示例代码,实现了一个颜色转换为16进制格式的拾色器工具:

public class ColorPickerActivity extends AppCompatActivity {
  private ColorPickerView colorPickerView;
  private SeekBar saturationSeekBar;
  private TextView hexTextView;

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

    colorPickerView = findViewById(R.id.color_picker_view);
    saturationSeekBar = findViewById(R.id.saturation_seek_bar);
    hexTextView = findViewById(R.id.hex_text_view);

    colorPickerView.setOnColorChangedListener(new ColorPickerView.OnColorChangedListener() {
      @Override
      public void onColorChanged(int selectedColor) {
        float[] hsv = new float[3];
        Color.colorToHSV(selectedColor, hsv);
        hsv[1] = saturationSeekBar.getProgress() / 100f;
        int color = Color.HSVToColor(hsv);

        String hexColor = String.format("#%06X", (0xFFFFFF & color));
        hexTextView.setText(hexColor);
      }
    });

    saturationSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
      @Override
      public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        float[] hsv = new float[3];
        Color.colorToHSV(colorPickerView.getSelectedColor(), hsv);
        hsv[1] = progress / 100f;
        int color = Color.HSVToColor(hsv);

        String hexColor = String.format("#%06X", (0xFFFFFF & color));
        hexTextView.setText(hexColor);
      }

      @Override
      public void onStartTrackingTouch(SeekBar seekBar) {
        // 不需要实现
      }

      @Override
      public void onStopTrackingTouch(SeekBar seekBar) {
        // 不需要实现
      }
    });
  }
}

在布局文件中添加以下内容:

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <!-- 色轮 -->
  <com.github.QuadFlask.colorpicker.ColorPickerView
    android:id="@+id/color_picker_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

  <!-- 饱和度滑块 -->
  <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Saturation:" />

  <SeekBar
    android:id="@+id/saturation_seek_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

  <!-- 显示16进制颜色值 -->
  <TextView
    android:id="@+id/hex_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="@android:color/white"
    android:background="@color/colorPrimary"
    android:padding="16dp" />

</LinearLayout>