2013-05-03 75 views
6

我想在我的繪畫程序中包含顏色選擇器。所以這裏的任何人都已經做了這樣的事情,請給我一些教程或一段代碼讓我開始。我真的需要得到加入這個的全部想法。我已經爲繪圖設置了畫布,所以我想將顏色拾取器添加到它。任何想法都歡迎。謝謝。要包含在活動中的Android顏色選擇器

回答

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

    } 

顏色拾取對話框

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

你必須選擇顏色並單擊中心c挑選顏色。將顏色設置爲您的繪畫對象並使用相同的顏色繪製。

快照

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

它不工作...我已經嘗試如下; color.setOnClickListener(新OnClickListener(){ \t \t \t @Override \t \t \t公共無效的onClick(視圖v){ \t \t \t \t // TODO自動生成方法存根 \t \t \t \t myplate.setVisibility( View.VISIBLE); \t \t \t \t新的ColorPicker(MainActivity.this,空,mPaint.getColor())顯示(); \t \t \t} \t \t}); – jigar 2013-07-29 09:09:00

+0

@Raghunandan你可以添加ColorPickerView的源代碼嗎? – 2015-01-01 13:44:54

+0

@ Try_me34它已經在那裏。它的對話 – Raghunandan 2015-01-02 04:10:49

0

我用這個鏈接顏色選擇器http://code.google.com/p/android-color-picker/ 步驟:

我添加了一些額外的文件(如: 「Android的MVN-push.gradle」),你可以跳過在第3步該文件 並刪除該「從適用於:‘../android-mvn-push.gradle’」從你的bulid.gradle(模塊:liabrary)文件,如果你跳過步驟3.

  1. 轉到上面的鏈接並下載項目作爲zip文件並解壓縮。

  2. 在Extracted文件夾裏你會看到庫文件夾。

  3. 將該文件夾複製到您的android應用程序主文件夾中,它包含所有gradle n all ...並將「android-mvn-push.gradle」文件複製到您的主項目文件夾中。

  4. 開放bulid.gradle(模塊:APP)內部的添加依賴這樣, 「編制項目( ':庫')」 與包括

  5. 更新Settings.Gradle ':應用程序',「:庫」

  6. 轉到工具>安卓>同步與Gradles,然後它會顯示類似的gradle構建不匹配喇嘛喇嘛某些錯誤....

  7. 點擊打開文件錯誤選項。

  8. 在你bulid.gradle(模塊:liabrary)改變這一狀況,

    應用插件: 'com.android.library'

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

要>>>>>>>>>>>

apply plugin: 'com.android.library' 

的Android { compileSdkVersion 22 buildToolsVersion「22.0。 '../android-mvn-push.gradle'

最後工具> Androi:1"

defaultConfig { 
    minSdkVersion 14 
    targetSdkVersion 22 
    versionCode 1 
    versionName "1.0" 
} 
buildTypes { 
    release { 
     minifyEnabled false 
     proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 
    } 
} 

} 從應用d>與gradle同步... 和Bingo .... It Works .... !!!