Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应
2013-09-14 09:25
471 查看
Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应
上一篇讲过了主体界面的绘制,这里讲解调色板应用中的另外一个核心: 颜色选择及生成.
ColorPcikerView中不同部分的选择和ColorPickerPanelView中颜色显示是怎样响应的呢?这里当然少不了回调函数:
ColorPickerView:
然后看一下轨迹球的事件处理:
ColorPickerView中关于触摸事件的处理:
使用时,让ColorPickerDialog实现ColorPickerView.OnColorChangedListener接口:
并完成对应方法:
最后看一下ColorPickerPanelView点击后的颜色设置事件处理:
注意一下,这里的OnColorChangedListener是在ColorPickerDialog中定义的:
最终的颜色是怎么显示到ColorPickerPreference上呢,其实实现的方法是一样的:
在ColorPickerPreference中实现对应的回调方法:
调用setPreviewColor()改变ColorPickerPreference中颜色区域的显示:
最后调用getOnPreferenceChangeListener().onPreferenceChange(this, color);改变颜色设置值
然后在下次打开ColorPickerDialog时,传入上面onColorChanged()回调实现中已经改变的mValue参数
相信当分析完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;
public 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调色板应用后,大家会对颜色渲染方面会有一个认识上的提高.
相关文章推荐
- Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应
- Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应
- Android 仿PhotoShop调色板应用(一)概述
- Android 仿PhotoShop调色板应用(一)概述
- Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable
- Android简单手电筒的应用可以设置不同的颜色
- Android 仿PhotoShop调色板应用(三) 主体界面绘制
- Android 仿PhotoShop调色板应用(三) 主体界面绘制
- Android Gradle 相同应用多包名打包,实现测试发布包分离,不同服务器地址以生成不同安装包
- Android中Tab的应用,底部,随选择切换图标和文字颜色
- Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable
- Android 仿PhotoShop调色板应用(一)概述
- android不同环境生成的apk不同名,防止环境渠道选择错误
- Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable
- Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable
- Android 仿PhotoShop调色板应用(三) 主体界面绘制
- Android 自定义View 慢慢画一个不同颜色扇形的圆,点击圆上不同颜色扇形区域返回不同颜色
- Android 仿PhotoShop调色板应用(三) 主体界面绘制
- Intellij Idea 生成不同签名Android应用
- Android TextView设置值时,使一个字符串有不同颜色(多种颜色)