android 自定义View【2】对话框取色&色盘取色的实现

<span style="font-size:18px;">/*
 * Copyright (C) 2007 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package demo.dim.getcolordemo;

import android.os.Bundle;
import android.app.Dialog;
import android.content.Context;
import android.graphics.*;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

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;
        private String TAG="ColorPicker-->>";
        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) {
        	//只有在 0 0 200 200 范围内。定义视图大小。
        	//就是200*200的正方形范围内。 
            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];
            
           
            /**
             * 四舍五入 
             *         private int ave(int s, int d, float p) {
            return s + java.lang.Math.round(p * (d - s));
        }
             */
            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) {
        	//setMeasuredDimension(CENTER_X*2, CENTER_Y*2);
        	//这决定了 event.getX() <=200;event.getY()<=200
            float x = event.getX() - CENTER_X;
            float y = event.getY() - CENTER_Y;
            
            Log.i(TAG, "x="+ event.getX()+"  y="+event.getY());
            //如果半径小于等于32 则认为是中心区域。
            // java.lang.Math.sqrt(x*x + y*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]
                        //将角度 转换为【0,1】区间的值。如果为负数则加1，。
                        float unit = angle/(2*PI);
                        if (unit < 0) {
                            unit += 1;
                        }
                        //取色的关键部位
                        mCenterPaint.setColor(interpColor(mColors, unit));
                        invalidate();
                    }
                    break;
                case MotionEvent.ACTION_UP:
                	//监听松手动作时，如果是从中心部位松手，则取消对话框。否则中心标志位置false
                	//然后重新绘图。
                    if (mTrackingCenter) {
                        if (inCenter) {
                            mListener.colorChanged(mCenterPaint.getColor());
                        }
                        mTrackingCenter = false;    // so we draw w/o halo
                        invalidate();
                    }
                    break;
            }
            return true;
        }
    }

    /**
     * 
     * @param context :always is the context of activity
     * @param listener: the OnColorChangedListener listen the change of color
     * @param initialColor: initial the color of the ColorPickerDialog
     */
    public ColorPickerDialog(Context context,
                             OnColorChangedListener listener,
                             int initialColor) {
        super(context);

        mListener = listener;
        mInitialColor = initialColor;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //dismiss the dialog if the color is selected.
        //对话框取色中间被点击时，监听到颜色已经选定，则消失对话框。
        OnColorChangedListener l = new OnColorChangedListener() {
            public void colorChanged(int color) {
                mListener.colorChanged(color);
                dismiss();
            }
        };

        //set the colorPickerView to the content view of dialog 
        setContentView(new ColorPickerView(getContext(), l, mInitialColor));
       //set title of dialog
        setTitle("Pick a Color");
    }
}
</span>

<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    

    <Button
        android:id="@+id/btnGetColorDia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:textSize="20dp"
        android:text="对话框方式获取颜色" />
 

</RelativeLayout></span>

<span style="font-size:18px;">package demo.dim.getcolordemo;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import demo.dim.getcolordemo.ColorPickerDialog.OnColorChangedListener;

public class MainActivity extends Activity {

	private final static String TAG="GET COLOR DEMO-->>";
	private ColorPickerDialog ColorPicker=null;
	private Button btnGetColorDia=null;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		btnGetColorDia=(Button)findViewById(R.id.btnGetColorDia);
		
		btnGetColorDia.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				ColorPicker.show();
			}
		});
<strong>		ColorPicker=new ColorPickerDialog(this, new OnColorChangedListener() {
			
			@Override
			public void colorChanged(int color) {
				// TODO Auto-generated method stub
				btnGetColorDia.setBackgroundColor(color);
			}
		}, Color.BLUE);</strong>
	}

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

}
</span>

<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    

    <Button
        android:id="@+id/btnGetColorDia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:textSize="20dp"
        android:text="对话框方式获取颜色" />

 <strong>   <Button
        android:id="@+id/btnColorDisk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/btnGetColorDia"
        android:text="从色盘吸管获取颜色" />

    <demo.dim.getcolordemo.ColorPickerView
        android:id="@+id/colorPickerDisk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_below="@+id/btnColorDisk"
        android:layout_alignParentTop="true"
        android:layout_marginTop="150dp"
        android:visibility="invisible"
          /></strong>

</RelativeLayout></span>

<span style="font-size:18px;">package demo.dim.getcolordemo;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import demo.dim.getcolordemo.ColorPickerDialog.OnColorChangedListener;
import demo.dim.getcolordemo.ColorPickerView .OnColorChangedListenerD;
public class MainActivity extends Activity {

	/**
	 * Tag of this class, more clear and convenient when you debugging 
	 */
	private final static String TAG="GET COLOR DEMO-->>";
	/**
	 * the object of the ColorPickerDialog
	 */
	private ColorPickerDialog ColorPicker=null;
	/**
	 * btnGetColorDia   use to trigger the dialog of color when the button is click 
	 */
	private Button btnGetColorDia=null;
<span style="color:#ff6666;">	/**
	 * color Disk 
	 */
	ColorPickerView colorPickerDisk=null;
	/**
	 * button of colorDisk
	 */
	Button btnColorDisk=null;</span>
	/**
	 * 
	 */
	int intChange=1;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
<span style="color:#ff6666;">		colorPickerDisk=new ColorPickerView(this);
		
		//find the ID of View
		colorPickerDisk=(ColorPickerView)findViewById(R.id.colorPickerDisk); 
		btnColorDisk=(Button)findViewById(R.id.btnColorDisk);</span>
		
		btnGetColorDia=(Button)findViewById(R.id.btnGetColorDia);
		
		btnGetColorDia.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				ColorPicker.show();
			}
		});
		
		<span style="color:#ff6666;">//how to use ColorPickerDialog Class  ,the default color is blue ,here is Color.BLUE
		ColorPicker=new ColorPickerDialog(this, new OnColorChangedListener() {
			
			@Override
			public void colorChanged(int color) {
				// TODO Auto-generated method stub
				//change the background  of button when the color is changed .
				btnGetColorDia.setBackgroundColor(color);
			}
		}, Color.BLUE);
		
		colorPickerDisk.setOnColorChangedListennerD(new OnColorChangedListenerD() {
			
			@Override
			public void onColorChanged(int color, String hexStrColor) {
				// TODO Auto-generated method stub
				btnColorDisk.setBackgroundColor(color);
				btnColorDisk.setText("Color is "+hexStrColor);
			}
		});
		
		 
		btnColorDisk.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				 if(intChange%2==0)
				 { 
					 colorPickerDisk.setVisibility(View.INVISIBLE);
				 }else
				 {
					 colorPickerDisk.setVisibility(View.VISIBLE);
				 }
				 intChange++;
			}
		});
	}</span>
	@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;
	}

}
</span>