如何在Android中实现拾色器

大家好! —本文是关于使用ColorPickerPreference的“如何在android中实现拾色器”。

ColorPickerPreference使您可以轻松实现ColorPicker,ColorPickerDioalg和ColorPickerPreference。

在您的android项目的build.gradle中,添加以下依赖项。

 编译'com.github.skydoves:colorpickerpreference:1.0.2' 

如果要在布局上实现ColorPicker,则可以使用ColorPickerView轻松实现。

在您的layout.xml中添加一个ColorPickerView

  <com.skydoves.colorpickerpreference.ColorPickerView 
android:id =“ @ + id / colorPickerView”
android:layout_width =“ 300dp”
android:layout_height =“ 300dp”
app:palette =“ @ drawable / palette”
app:selector =“ @ drawable / wheel” />

您可以设置两个属性分别是调色板和选择器可绘制图像。

app:palette="@drawable/palette" // set palette image 
app:selector="@drawable/wheel" // set selector image. This isn't required always. If you don't need, don't use.

只需添加一个ColorListener即可。 而已。

  colorPickerView.setColorListener(new ColorListener(){ 
@Override
public void onColorSelected(ColorEnvelope colorEnvelope){
LinearLayout linearLayout = findViewById(R.id.linearLayout);
linearLayout.setBackgroundColor(colorEnvelope.getColor());
}
});

当用户移动选择器时,将调用ColorListener。

它为我们提供了ColorEnvelope的实例。 我们可以从ColorEnvelope获取HSV颜色,html颜色代码,rgb。

  colorEnvelope.getColor() //整数 
colorEnvelope.getHtmlCode()
//字串
colorEnvelope.getRgb()
// int [3]

如果要保存选择器的位置并在过去获得选择的颜色,则应使用setPreferenceName方法设置ColorPicker的首选项名称。

  colorPickerView.setPreferenceName(“ MyColorPickerView”); 

并且您应该在需要时保存数据。
创建ColorPickerView时,将恢复选择器的位置。

  @Override 
受保护的void onDestroy(){
super.onDestroy();
colorPickerView.saveData();
}

最后,您还可以使用以下方法获得保存的颜色。 下面的方法需要默认颜色(如果未保存任何颜色,它将返回默认颜色)作为参数。

  int color = colorPickerView.getSavedColor(Color.WHITE); 
字符串htmlColor = colorPickerView.getSavedColorHtml(Color.WHITE);
int [] colorRGB = colorPickerView.getSavedColorRGB(Color.WHITE);

如果要在Dialog上实现ColorPicker,请使用ColorPickerDialog。

ColorPickerDialo扩展了AlertDialog,因此您可以根据自己的喜好自定义主题,如下所示。

  ColorPickerDialog.Builder builder =新的ColorPickerDialog.Builder(this,AlertDialog.THEME_DEVICE_DEFAULT_DARK); 
builder.setTitle(“ ColorPicker对话框”);
builder.setPreferenceName(“ MyColorPickerDialog”);
builder.setFlagView(new CustomFlag(this,R.layout.layout_flag));
builder.setPositiveButton(getString(R.string.confirm),new ColorListener(){
@Override
public void onColorSelected(ColorEnvelope colorEnvelope){
TextView textView = findViewById(R.id.textView);
textView.setText(“#” + colorEnvelope.getHtmlCode());

LinearLayout linearLayout = findViewById(R.id.linearLayout);
linearLayout.setBackgroundColor(colorEnvelope.getColor());
}
});
builder.setNegativeButton(getString(R.string.cancel),新DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface dialogInterface,int i){
dialogInterface.dismiss();
}
});
builder.show();

如果要保存选择器的位置并在过去获得选择的颜色,则应使用setPreferenceName方法设置ColorPicker的首选项名称。 但是对于ColorPickerDialog, 当选择PositiveButton时,将自动调用saveData()方法 。 然后在创建ColorPickerDialog时将恢复选择器的位置。 所以只需设置setPreferenceName就可以了。

  ColorPickerView colorPickerView = builder.getColorPickerView(); 
colorPickerView.setPreferenceName(“ MyColorPickerDialog”);

如果要在PreferenceScreen上实现ColorPicker,则可以使用ColorPickerPreference轻松实现。

使用示例如下:

  <com.skydoves.colorpickerpreference.ColorPickerPreference 
android:key =“ @ string / ToolbarColorPickerPreference”
android:title =“工具栏颜色”
android:summary =“更改工具栏颜色”
app:preference_dialog_title =“工具栏ColorPickerDialog”
app:preference_dialog_positive =“ @ string / confirm”
app:preference_dialog_negative =“ @ string / cancel”
app:preference_palette =“ @ drawable / palette”
app:preference_selector =“ @ drawable / wheel”
app:default_color =“ @ color / colorPrimary” />

您可以设置五个属性以自定义对话框。

  //设置对话框的标题 
app:preference_dialog_title =“工具栏ColorPickerDialog”
//设置肯定按钮的文本
app:preference_dialog_positive =“ @ string / confirm”
//设置否定按钮的文本
app:preference_dialog_negative =“ @ string / cancel”
//设置ColorPicker调色板的drawable
app:preference_palette =“ @ drawable / palette”
//设置ColorPicker选择器的drawable
app:preference_selector =“ @ drawable / wheel”
//设置默认的首选项颜色值
app:default_color =“ @ color / colorPrimary”

FlagView使您可以在选择器上方添加标志。 但是,如果您不想这样做,请跳过本节。

首先,按照您的喜好创建Flag布局,如下所示。

   
<LinearLayout xmlns:android =“ http://schemas.android.com/apk/res/android”
xmlns:tools =“ http://schemas.android.com/tools”
android:layout_width =“ 100dp”
android:layout_height =“ 40dp”
android:background =“ @ drawable / flag”
android:orientation =“ horizo​​ntal”>

<LinearLayout
android:id =“ @ + id / flag_color_layout”
android:layout_width =“ 20dp”
android:layout_height =“ 20dp”
android:layout_marginTop =“ 6dp”
android:layout_marginLeft =“ 5dp”
android:orientation =“ vertical” />

<TextView
android:id =“ @ + id / flag_color_code”
android:layout_width =“ wrap_content”
android:layout_height =“ wrap_content”
android:layout_marginTop =“ 6dp”
android:layout_marginLeft =“ 10dp”
android:layout_marginRight =“ 5dp”
android:textSize =“ 14dp”
android:textColor =“ @ android:color / white”
android:maxLines =“ 1”
android:ellipsize =“ end”
android:textAppearance =“?android:attr / textAppearanceSmall”
工具:text =“#ffffff” />

其次,创建CustomFlagView扩展FlagView。

 公共类CustomFlag扩展FlagView { 

私有TextView textView;
私人视图视图;

public CustomFlag(Context context,int layout){
超级(上下文,布局);
textView = findViewById(R.id.flag_color_code);
view = findViewById(R.id.flag_color_layout);
}

@Override
public void onRefresh(int color){
textView.setText(“#” + String.format(“%06X”,(0xFFFFFF&color)));;
view.setBackgroundColor(color);
}
}

最后设置ColorPickerView或ColorPickerDialog.Builder上的FlagView。

  //对于ColorPickerView 
colorPickerView.setFlagView(new CustomFlag(this,R.layout.layout_flag));
//用于ColorPickerDialog
ColorPickerDialog.Builder builder =新的ColorPickerDialog.Builder(this,AlertDialog.THEME_DEVICE_DEFAULT_DARK);
builder.setFlagView(new CustomFlag(this,R.layout.layout_flag));

您还可以设置FlagView的显示模式。

  colorPickerView.setFlagMode(FlagMode.ALWAYS);  //始终显示flagView 
colorPickerView.setFlagMode(FlagMode.LAST);
//触摸Action_UP时显示flagView

您可以看到不同的模式。 “工具栏颜色”首选项的模式为始终。 “背景色”首选项的模式为Action_UP。

您可以在下面的链接中显示更多信息。

感谢您的阅读!

skydoves / ColorPickerPreference

一个使您可以实现ColorPicker,ColorPickerDialog,ColorPickerPreference的

github.com