版权声明:本文为博主原创文章,未经博主允许不得转载。
Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应
上一篇讲过了主体界面的绘制,这里讲解调色板应用中的另外一个核心: 颜色选择及生成.
ColorPcikerView中不同部分的选择和ColorPickerPanelView中颜色显示是怎样响应的呢?这里当然少不了回调函数:
ColorPickerView:
- public interface OnColorChangedListener {
- public void onColorChanged(int color);
- }
然后看一下轨迹球的事件处理:
- @Override
- public boolean onTrackballEvent(MotionEvent event) {
- float x = event.getX();
- float y = event.getY();
- boolean update = false;//是否需要更新颜色
- if(event.getAction() == MotionEvent.ACTION_MOVE){
- switch(mLastTouchedPanel){
- case PANEL_SAT_VAL://饱和度&亮度选择区域
- float sat, val;
- sat = mSat + x/50f;
- val = mVal - y/50f;
- if(sat < 0f){
- sat = 0f;
- }
- else if(sat > 1f){
- sat = 1f;
- }
- if(val < 0f){
- val = 0f;
- }
- else if(val > 1f){
- val = 1f;
- }
- mSat = sat;
- mVal = val;
- update = true;
- break;
- case PANEL_HUE://色相选择区域
- float hue = mHue - y * 10f;
- if(hue < 0f){
- hue = 0f;
- }
- else if(hue > 360f){
- hue = 360f;
- }
- mHue = hue;
- update = true;
- break;
- case PANEL_ALPHA://透明度选择区域
- if(!mShowAlphaPanel || mAlphaRect == null){
- update = false;
- }
- else{
- int alpha = (int) (mAlpha - x*10);
- if(alpha < 0){
- alpha = 0;
- }
- else if(alpha > 0xff){
- alpha = 0xff;
- }
- mAlpha = alpha;
- update = true;
- }
- break;
- }
- }
- if(update){//如果需要更新,调用对用的回调函数并重新绘制
- if(mListener != null){//参数需要由HSV格式的float数组转换为ARGB格式的 int 参数
- mListener.onColorChanged(Color.HSVToColor(mAlpha, new float[]{mHue, mSat, mVal}));
- }
- invalidate();
- return true;
- }
- return super.onTrackballEvent(event);
- }
ColorPickerView中关于触摸事件的处理:
- @Override
- public boolean onTouchEvent(MotionEvent event) {
- boolean update = false;
- switch(event.getAction()){
- case MotionEvent.ACTION_DOWN:
- mStartTouchPoint = new Point((int)event.getX(), (int)event.getY());
- update = moveTrackersIfNeeded(event);
- break;
- case MotionEvent.ACTION_MOVE:
- update = moveTrackersIfNeeded(event);
- break;
- case MotionEvent.ACTION_UP:
- mStartTouchPoint = null;
- update = moveTrackersIfNeeded(event);
- break;
- }
- if(update){
- if(mListener != null){
- mListener.onColorChanged(Color.HSVToColor(mAlpha, new float[]{mHue, mSat, mVal}));
- }
- invalidate();
- return true;
- }
- return super.onTouchEvent(event);
- }
- //判断是否触发事件,更新区域颜色
- private boolean moveTrackersIfNeeded(MotionEvent event){
- if(mStartTouchPoint == null) return false;
- boolean update = false;
- //获取触摸点X,Y坐标值
- int startX = mStartTouchPoint.x;
- int startY = mStartTouchPoint.y;
- //判断 X,Y坐标是否在对应的区域内,并做相应的处理
- if(mHueRect.contains(startX, startY)){
- mLastTouchedPanel = PANEL_HUE;
- mHue = pointToHue(event.getY());
- update = true;
- }
- else if(mSatValRect.contains(startX, startY)){
- mLastTouchedPanel = PANEL_SAT_VAL;
- float[] result = pointToSatVal(event.getX(), event.getY());
- mSat = result[0];
- mVal = result[1];
- update = true;
- }
- else if(mAlphaRect != null && mAlphaRect.contains(startX, startY)){
- mLastTouchedPanel = PANEL_ALPHA;
- mAlpha = pointToAlpha((int)event.getX());
- update = true;
- }
- return update;
- }
使用时,让ColorPickerDialog实现ColorPickerView.OnColorChangedListener接口:
并完成对应方法:
- @Override
- public void onColorChanged(int color) {
- mNewColor.setColor(color);// mNewColor即为右下角实时显示颜色的ColorPickerPanelView
- if (mHexValueEnabled)
- updateHexValue(color);
- /*
- if (mListener != null) {
- mListener.onColorChanged(color);
- }
- */
- }
- private void updateHexValue(int color) {
- if (getAlphaSliderVisible()) {
- mHexVal.setText(ColorPickerPreference.convertToARGB(color).toUpperCase(Locale.getDefault()));
- } else {
- mHexVal.setText(ColorPickerPreference.convertToRGB(color).toUpperCase(Locale.getDefault()));
- }
- mHexVal.setTextColor(mHexDefaultTextColor);
- /** 转化为ARGB格式字符串
- * For custom purposes. Not used by ColorPickerPreferrence
- * @param color
- * @author Unknown
- */
- public static String convertToARGB(int color) {
- String alpha = Integer.toHexString(Color.alpha(color));
- String red = Integer.toHexString(Color.red(color));
- String green = Integer.toHexString(Color.green(color));
- String blue = Integer.toHexString(Color.blue(color));
- if (alpha.length() == 1) {
- alpha = "0" + alpha;
- }
- if (red.length() == 1) {
- red = "0" + red;
- }
- if (green.length() == 1) {
- green = "0" + green;
- }
- if (blue.length() == 1) {
- blue = "0" + blue;
- }
- return "#" + alpha + red + green + blue;
- }
最后看一下ColorPickerPanelView点击后的颜色设置事件处理:
- @Override
- public void onClick(View v) {
- if (v.getId() == R.id.new_color_panel) {
- if (mListener != null) {
- mListener.onColorChanged(mNewColor.getColor());
- }
- }
- dismiss();
- }
注意一下,这里的OnColorChangedListener是在ColorPickerDialog中定义的:
- private OnColorChangedListener mListener;
- ublic interface OnColorChangedListener {
- public void onColorChanged(int color);
最终的颜色是怎么显示到ColorPickerPreference上呢,其实实现的方法是一样的:
- implements ColorPickerDialog.OnColorChangedListener
在ColorPickerPreference中实现对应的回调方法:
- @Override
- public void onColorChanged(int color) {
- if (isPersistent()) {
- persistInt(color);
- }
- mValue = color;
- setPreviewColor();
- try {
- getOnPreferenceChangeListener().onPreferenceChange(this, color);
- } catch (NullPointerException e) {
- }
- }
调用setPreviewColor()改变ColorPickerPreference中颜色区域的显示:
- private void setPreviewColor() {
- if (mView == null) return;
- ImageView iView = new ImageView(getContext());
- LinearLayout widgetFrameView = ((LinearLayout)mView.findViewById(android.R.id.widget_frame));
- if (widgetFrameView == null) return;
- widgetFrameView.setVisibility(View.VISIBLE);
- widgetFrameView.setPadding(
- widgetFrameView.getPaddingLeft(),
- widgetFrameView.getPaddingTop(),
- (int)(mDensity * 8),
- widgetFrameView.getPaddingBottom()
- );
- // remove already create preview image
- int count = widgetFrameView.getChildCount();
- if (count > 0) {
- widgetFrameView.removeViews(0, count);
- }
- widgetFrameView.addView(iView);
- widgetFrameView.setMinimumWidth(0);
- iView.setBackgroundDrawable(new AlphaPatternDrawable((int)(5 * mDensity)));
- iView.setImageBitmap(getPreviewBitmap());
- }
最后调用getOnPreferenceChangeListener().onPreferenceChange(this, color);改变颜色设置值
然后在下次打开ColorPickerDialog时,传入上面onColorChanged()回调实现中已经改变的mValue参数
- mDialog = new ColorPickerDialog(getContext(), mValue);
至此,PS调色板应用中颜色交互的事件讲解完毕.
相信当分析完PhotoShop调色板应用后,大家会对颜色渲染方面会有一个认识上的提高.