Android颜色选择器将包含在活动中

时间:2013-05-03 16:07:23

标签: java android colors paint

我想在我的绘画程序中加入一个颜色选择器。所以这里的任何人都已经做过这样的事情,请给我一些教程或一些代码来启动我。我真的需要得到添加这个的全部想法。我已经为绘图设置了画布,所以我想添加颜色选择器。欢迎任何想法。感谢。

3 个答案:

答案 0 :(得分:19)

您的课程应该实现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对话

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");
}

您必须选择颜色并单击中心圆以选择颜色。将颜色设置为绘制对象并使用相同的颜色绘制。

快照

enter image description here

编辑2:

可以在https://code.google.com/p/android-color-picker/

找到源代码

另一个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();
}

 }

用法:

        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();

快照:

Snap2

在上面选择右侧栏上的颜色。您还可以选择颜色选择的暗或亮程度。单击确定将绘制设置为绘制对象并使用相同的绘制。取消将关闭颜色选择器对话框。

编辑3:

只更改而不是清除功能我在点击清除按钮时添加了颜色选择器。

   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);
}
  }

enter image description here

答案 1 :(得分:1)

你有一个可以帮助你的谷歌代码

http://code.google.com/p/android-color-picker/

答案 2 :(得分:0)

我将此链接用于颜色选择器http://code.google.com/p/android-color-picker/ 步骤进行:

我添加了一些额外的文件(例如:“android-mvn-push.gradle”),您可以在第3步中跳过该文件 如果你跳过第3步,还要从你的bulid.gradle(Module:liabrary)文件中删除“apply from:'../android-mvn-push.gradle'”。

  1. 转到上面的链接并以zip文件的形式下载项目并解压缩。

  2. 在Extracted文件夹中,您将看到库文件夹。

  3. 将该文件夹复制到Android应用程序主文件夹中,其中包含所有gradle n all ...并将“android-mvn-push.gradle”文件复制到主项目文件夹中。

    < / LI>
  4. 打开bulid.gradle(Module:app)里面添加依赖项,如下所示, “编译项目(':library')”

  5. 使用include':app',':library'更新Settings.Gradle

  6. 转到工具&gt; Android&gt;与Gradles同步然后它会显示一些错误,例如build gradle不匹配bla bla ....

  7. 点击该打开文件错误选项。

  8. 在你的bulid.gradle(模块:liabrary)中更改此内容,

    申请插件:'com.android.library'

  9. 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'
        }
    }
    

    }

    申请来自:'.. / android-mvn-push.gradle'

    到大于;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;&GT;

    apply plugin: 'com.android.library'
    

    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'
        }
    }
    

    } 申请自:'../ android-mvn-push.gradle'

    终于工具&gt; Android&gt;与gradle同步... 和宾果....它的工作...... !!!