Java 将包含在活动中的 Android 颜色选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16363235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Android color picker to be included in the activity
提问by neknek mouh
I would like to include a color picker in my paint program. So anyone here has already done something like this please give me some tutorials or piece of code to get me started. I really need to get the whole idea of adding this. I already have set up the canvas for the drawing so I'd like to add the color picker to it. Any ideas are welcome. Thanks.
我想在我的绘画程序中包含一个颜色选择器。所以这里的任何人都已经做过这样的事情，请给我一些教程或一段代码让我开始。我真的需要了解添加这个的全部想法。我已经为绘图设置了画布，所以我想向其中添加颜色选择器。欢迎任何想法。谢谢。
采纳答案by Raghunandan
Your class should implement ColorPickerDialog.OnColorChangedListener
你的类应该实现 ColorPickerDialog.OnColorChangedListener
public class MainActivity implements ColorPickerDialog.OnColorChangedListener
{
private Paint mPaint;
mPaint = new Paint();
// on button click
new ColorPickerDialog(this, this, mPaint.getColor()).show();
}
ColorPicker Dialog
颜色选择器对话框
public class ColorPickerDialog extends Dialog {
public interface OnColorChangedListener {
void colorChanged(int color);
}
private OnColorChangedListener mListener;
private int mInitialColor;
private static class ColorPickerView extends View {
private Paint mPaint;
private Paint mCenterPaint;
private final int[] mColors;
private OnColorChangedListener mListener;
ColorPickerView(Context c, OnColorChangedListener l, int color) {
super(c);
mListener = l;
mColors = new int[] {
0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00,
0xFFFFFF00, 0xFFFF0000
};
Shader s = new SweepGradient(0, 0, mColors, null);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setShader(s);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(32);
mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCenterPaint.setColor(color);
mCenterPaint.setStrokeWidth(5);
}
private boolean mTrackingCenter;
private boolean mHighlightCenter;
@Override
protected void onDraw(Canvas canvas) {
float r = CENTER_X - mPaint.getStrokeWidth()*0.5f;
canvas.translate(CENTER_X, CENTER_X);
canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);
if (mTrackingCenter) {
int c = mCenterPaint.getColor();
mCenterPaint.setStyle(Paint.Style.STROKE);
if (mHighlightCenter) {
mCenterPaint.setAlpha(0xFF);
} else {
mCenterPaint.setAlpha(0x80);
}
canvas.drawCircle(0, 0,
CENTER_RADIUS + mCenterPaint.getStrokeWidth(),
mCenterPaint);
mCenterPaint.setStyle(Paint.Style.FILL);
mCenterPaint.setColor(c);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(CENTER_X*2, CENTER_Y*2);
}
private static final int CENTER_X = 100;
private static final int CENTER_Y = 100;
private static final int CENTER_RADIUS = 32;
private int floatToByte(float x) {
int n = java.lang.Math.round(x);
return n;
}
private int pinToByte(int n) {
if (n < 0) {
n = 0;
} else if (n > 255) {
n = 255;
}
return n;
}
private int ave(int s, int d, float p) {
return s + java.lang.Math.round(p * (d - s));
}
private int interpColor(int colors[], float unit) {
if (unit <= 0) {
return colors[0];
}
if (unit >= 1) {
return colors[colors.length - 1];
}
float p = unit * (colors.length - 1);
int i = (int)p;
p -= i;
// now p is just the fractional part [0...1) and i is the index
int c0 = colors[i];
int c1 = colors[i+1];
int a = ave(Color.alpha(c0), Color.alpha(c1), p);
int r = ave(Color.red(c0), Color.red(c1), p);
int g = ave(Color.green(c0), Color.green(c1), p);
int b = ave(Color.blue(c0), Color.blue(c1), p);
return Color.argb(a, r, g, b);
}
private int rotateColor(int color, float rad) {
float deg = rad * 180 / 3.1415927f;
int r = Color.red(color);
int g = Color.green(color);
int b = Color.blue(color);
ColorMatrix cm = new ColorMatrix();
ColorMatrix tmp = new ColorMatrix();
cm.setRGB2YUV();
tmp.setRotate(0, deg);
cm.postConcat(tmp);
tmp.setYUV2RGB();
cm.postConcat(tmp);
final float[] a = cm.getArray();
int ir = floatToByte(a[0] * r + a[1] * g + a[2] * b);
int ig = floatToByte(a[5] * r + a[6] * g + a[7] * b);
int ib = floatToByte(a[10] * r + a[11] * g + a[12] * b);
return Color.argb(Color.alpha(color), pinToByte(ir),
pinToByte(ig), pinToByte(ib));
}
private static final float PI = 3.1415926f;
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX() - CENTER_X;
float y = event.getY() - CENTER_Y;
boolean inCenter = java.lang.Math.sqrt(x*x + y*y) <= CENTER_RADIUS;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mTrackingCenter = inCenter;
if (inCenter) {
mHighlightCenter = true;
invalidate();
break;
}
case MotionEvent.ACTION_MOVE:
if (mTrackingCenter) {
if (mHighlightCenter != inCenter) {
mHighlightCenter = inCenter;
invalidate();
}
} else {
float angle = (float)java.lang.Math.atan2(y, x);
// need to turn angle [-PI ... PI] into unit [0....1]
float unit = angle/(2*PI);
if (unit < 0) {
unit += 1;
}
mCenterPaint.setColor(interpColor(mColors, unit));
invalidate();
}
break;
case MotionEvent.ACTION_UP:
if (mTrackingCenter) {
if (inCenter) {
mListener.colorChanged(mCenterPaint.getColor());
}
mTrackingCenter = false; // so we draw w/o halo
invalidate();
}
break;
}
return true;
}
}
public ColorPickerDialog(Context context,
OnColorChangedListener listener,
int initialColor) {
super(context);
mListener = listener;
mInitialColor = initialColor;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
OnColorChangedListener l = new OnColorChangedListener() {
public void colorChanged(int color) {
mListener.colorChanged(color);
dismiss();
}
};
setContentView(new ColorPickerView(getContext(), l, mInitialColor));
setTitle("Pick a Color");
}
You have to choose the color and click the center circle to pick the color. Set the color to your paint object and use the same to draw.
您必须选择颜色并单击中心圆圈以选择颜色。将颜色设置为您的油漆对象并使用相同的颜色进行绘制。
Snap shot
快照
Edit 2:
编辑2：
Source code can be found at https://code.google.com/p/android-color-picker/
源代码可以在https://code.google.com/p/android-color-picker/找到
Another ColorPickerDialog
另一个 ColorPickerDialog
public class ColorPickerDialog extends AlertDialog implements
ColorPickerView.OnColorChangedListener {
private ColorPickerView mColorPicker;
private ColorPanelView mOldColor;
private ColorPanelView mNewColor;
private OnColorChangedListener mListener;
public ColorPickerDialog(Context myDrawingMenuOptionEventsListener, int initialColor) {
super(myDrawingMenuOptionEventsListener);
init(initialColor);
}
private void init(int color) {
// To fight color branding.
getWindow().setFormat(PixelFormat.RGBA_8888);
setUp(color);
}
private void setUp(int color) {
LayoutInflater inflater = (LayoutInflater) getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = inflater.inflate(R.layout.dialog_color_picker, null);
layout.setBackgroundColor(Color.WHITE);
setView(layout);
setTitle("Choose a Color");
// setIcon(android.R.drawable.ic_dialog_info);
mColorPicker = (ColorPickerView) layout
.findViewById(R.id.color_picker_view);
mOldColor = (ColorPanelView) layout.findViewById(R.id.old_color_panel);
mNewColor = (ColorPanelView) layout.findViewById(R.id.new_color_panel);
((LinearLayout) mOldColor.getParent()).setPadding(Math
.round(mColorPicker.getDrawingOffset()), 0, Math
.round(mColorPicker.getDrawingOffset()), 0);
mColorPicker.setOnColorChangedListener(this);
mOldColor.setColor(color);
mColorPicker.setColor(color, true);
}
@Override
public void onColorChanged(int color) {
mNewColor.setColor(color);
if (mListener != null) {
mListener.onColorChanged(color);
}
}
public void setAlphaSliderVisible(boolean visible) {
mColorPicker.setAlphaSliderVisible(visible);
}
public int getColor() {
return mColorPicker.getColor();
}
}
Usage :
用法 ：
final ColorPickerDialog d= new ColorPickerDialog(ActivityName.this,0xffffffff);
d.setAlphaSliderVisible(true);
d.setButton("Ok", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
mPaint.setColor(d.getColor());
}
});
d.setButton2("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
}
});
d.show();
Snap shot:
快照：
In the above choose the color on the right bar. You also make a choice how dark or light the color choosen should be. Click ok to set the paint to your paint object and use the same to draw. Cancel will dismiss the color picker dialog.
在上面选择右侧栏中的颜色。您还可以选择所选颜色的深浅程度。单击确定将油漆设置为您的油漆对象并使用相同的内容进行绘制。取消将关闭颜色选择器对话框。
Edit 3:
编辑3：
Only change instead of clear function i have added color picker on click of clear button.
仅更改而不是清除功能，我在单击清除按钮时添加了颜色选择器。
public class MainActivity extends Activity implements ColorPickerDialog.OnColorChangedListener {
DrawingView dv ;
RelativeLayout rl;
private Paint mPaint;
private MaskFilter mEmboss;
private MaskFilter mBlur;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
dv = new DrawingView(this);
setContentView(R.layout.activity_main);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setColor(Color.GREEN);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(12);
rl = (RelativeLayout) findViewById(R.id.rl);
rl.addView(dv);
Button b = (Button) findViewById(R.id.button1);
//b.setText(R.string.France);
Button b1 = (Button) findViewById(R.id.button2);
rl.setDrawingCacheEnabled(true);
b.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
// dv.clear();
new ColorPickerDialog(MainActivity.this, MainActivity.this, mPaint.getColor()).show();
}
});
b1.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
AlertDialog.Builder editalert = new AlertDialog.Builder(MainActivity.this);
editalert.setTitle("Please Enter the name with which you want to Save");
final EditText input = new EditText(MainActivity.this);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.FILL_PARENT);
input.setLayoutParams(lp);
editalert.setView(input);
editalert.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {
rl.setDrawingCacheEnabled(true);
String name= input.getText().toString();
Bitmap bitmap =rl.getDrawingCache();
String root = Environment.getExternalStorageDirectory().toString();
File myDir = new File(root + "/MyDraw");
myDir.mkdirs();
File file = new File (myDir, name+".png");
if (file.exists ()) file.delete ();
try
{
if(!file.exists())
{
file.createNewFile();
}
FileOutputStream ostream = new FileOutputStream(file);
bitmap.compress(CompressFormat.PNG, 10, ostream);
// System.out.println("saving......................................................"+path);
ostream.close();
rl.invalidate();
}
catch (Exception e)
{
e.printStackTrace();
}finally
{
rl.setDrawingCacheEnabled(false);
}
}
});
editalert.show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
public class DrawingView extends View {
private static final float MINP = 0.25f;
private static final float MAXP = 0.75f;
private Bitmap mBitmap;
private Canvas mCanvas;
private Path mPath;
private Paint mBitmapPaint;
Context context;
private Paint circlePaint;
private Path circlePath;
public DrawingView(Context c) {
super(c);
context=c;
mPath = new Path();
mBitmapPaint = new Paint(Paint.DITHER_FLAG);
circlePaint = new Paint();
circlePath = new Path();
circlePaint.setAntiAlias(true);
circlePaint.setColor(Color.BLUE);
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint.setStrokeJoin(Paint.Join.MITER);
circlePaint.setStrokeWidth(4f);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.drawPath(mPath, mPaint);
canvas.drawPath(circlePath, circlePaint);
}
private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;
private void touch_start(float x, float y) {
mPath.reset();
mPath.moveTo(x, y);
mX = x;
mY = y;
}
private void touch_move(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
mX = x;
mY = y;
circlePath.reset();
circlePath.addCircle(mX, mY, 30, Path.Direction.CW);
invalidate();
}
}
private void touch_up() {
mPath.lineTo(mX, mY);
circlePath.reset();
// commit the path to our offscreen
mCanvas.drawPath(mPath, mPaint);
// kill this so we don't double draw
mPath.reset();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touch_start(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
touch_move(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
touch_up();
invalidate();
break;
}
return true;
}
}
@Override
public void colorChanged(int color) {
// TODO Auto-generated method stub
mPaint.setColor(color);
}
}
回答by neknek mouh
you have a google code which can help you
你有一个谷歌代码可以帮助你
回答by Vishal Jogiya
I used this link for color picker http://code.google.com/p/android-color-picker/steps:
我将此链接用于颜色选择器http://code.google.com/p/android-color-picker/步骤：
I've added some extra file(like:"android-mvn-push.gradle" ) you can skip that file in step 3 and also remove this "apply from: '../android-mvn-push.gradle' " from your bulid.gradle(Module:liabrary) file if your skipping step 3.
我添加了一些额外的文件（例如："android-mvn-push.gradle"），您可以在步骤 3 中跳过该文件，也可以从如果您跳过第 3 步，您的 bulid.gradle(Module:liabrary) 文件。
Go to the above link and download project as zip file and extract the zip.
Inside Extracted folder you'll see library folder.
Copy that folder into your android Applications main folder where it contains all its gradle n all... and also copy "android-mvn-push.gradle" file to your main project folder.
open bulid.gradle(Module:app) inside that add dependencies like this, "compile project(':library')"
update Settings.Gradle with include ':app', ':library'
go to Tools>Android>Sync with Gradles and then it will show some error like build gradle not matching bla bla....
Click on that open file error option.
In your bulid.gradle(Module:liabrary) change this,
apply plugin: 'com.android.library'
转到上面的链接并将项目下载为 zip 文件并解压缩 zip。
在 Extracted 文件夹中，您将看到 library 文件夹。
将该文件夹复制到您的 android Applications 主文件夹中，其中包含所有 gradle n all... 并将“android-mvn-push.gradle”文件复制到您的主项目文件夹中。
在里面打开 bulid.gradle(Module:app) ，添加这样的依赖项，“compile project(':library')”
使用 include ':app', ':library' 更新 Settings.Gradle
转到 Tools>Android>Sync with Gradles，然后它会显示一些错误，例如 build gradle not matching bla bla ....
单击该打开文件错误选项。
在你的 bulid.gradle(Module:liabrary) 改变这个，
应用插件：'com.android.library'
android { compileSdkVersion propCompileSdkVersion buildToolsVersion propBuildToolsVersion
android { compileSdkVersion propCompileSdkVersion buildToolsVersion propBuildToolsVersion
defaultConfig {
minSdkVersion propMinSdkVersion
targetSdkVersion propTargetSdkVersion
versionCode propVersionCode
versionName propVersionName
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
}
apply from: '../android-mvn-push.gradle'
申请自：'../android-mvn-push.gradle'
To>>>>>>>>>>>
到>>>>>>>>>>>>
apply plugin: 'com.android.library'
android { compileSdkVersion 22 buildToolsVersion "22.0.1"
android { compileSdkVersion 22 buildToolsVersion "22.0.1"
defaultConfig {
minSdkVersion 14
targetSdkVersion 22
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
} apply from: '../android-mvn-push.gradle'
申请自：'../android-mvn-push.gradle'
Finally Tools>Android > Sync with gradle... and Bingo....It Works ....!!!
最后工具>Android>与gradle同步...和Bingo....它有效....!!!
