Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应

Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应

上一篇讲过了主体界面的绘制，这里讲解调色板应用中的另外一个核心: 颜色选择及生成.

ColorPcikerView中不同部分的选择和ColorPickerPanelView中颜色显示是怎样响应的呢？这里当然少不了回调函数:

ColorPickerView:

 public interface OnColorChangedListener {public void onColorChanged(int color);}

然后看一下轨迹球的事件处理：

 @Overridepublic 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中关于触摸事件的处理:

@Overridepublic 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接口:

并完成对应方法：

 @Overridepublic void onColorChanged(int color) {mNewColor.setColor(color);// mNewColor即为右下角实时显示颜色的ColorPickerPanelViewif (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点击后的颜色设置事件处理:

        @Overridepublic 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中实现对应的回调方法:

@Overridepublic 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 imageint 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调色板应用(三) 主体界面绘制关于PhotoShop调色板应用的实现我总结了两个最核心的部分: 1 ...
Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable
版权声明:本文为博主原创文章,未经博主允许不得转载. Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable 这里讲一下如何实现PS调色板中的透明度 ...
android 通讯录首字母索引,android仿微信通讯录搜索(匹配拼音,字母,索引位置标记颜色)...
前言: 仿微信通讯录搜索功能,通过汉字或拼音首字母找到匹配的联系人并显示匹配的位置一:先看效果图字母索引搜索匹配二:功能分析 1:汉字转拼音通讯录汉字转拼音(首个字符当考虑姓氏多音字), 现 ...
android仿微信图片视频选择器，视频图片选择分离。视频选择一个图片选择9个。
先上效果图,无图无真相,如果是你需要的,那么继续往下看. 下面我将分两块给大家讲一下怎么解决的问题. 第一块就是快速定位问题所在,并解决选择问题. 第二块就是按照思路来定位问题 ...
Android自定义圆形调色板，可设置属性
最近做项目需要用到调色板功能,本着不重复造轮子的想法,找到一个比较好的实现方式:Android 仿PhotoShop调色板应用.拿给老大看,老大说要做成RGB效果,不要HSV,因为不需要黑白色.好吧, ...
android 自定义取色器,【Android自定义View】仿Photoshop取色器ColorPicker(二)
ColorPicker 一款仿Photoshop取色器的Android版取色器. 前言上一篇已经简单介绍了ColorPicker的项目结构以及两种颜色空间,接下来我们详细解析一下ColorPicke ...
Android 颜色渲染(二) 颜色区域划分原理与实现思路
在前面的系列我已经将Android中颜色渲染的原理及使用做了一个整体上概述. 现在开始根据一个比较复杂的实现进行具体的分析,这就是PhotoShop中的调色板应用首先还是看一下最终的实现效果: ...
android放微信@功能,Android仿微信语音消息的录制和播放功能
一.简述效果: 实现功能: 长按Button时改变Button显示文字,弹出Dialog(动态更新音量),动态生成录音文件,开始录音: 监听手指动作,规定区域.录音状态下手指划出规定区域取消录音,删 ...
Android 仿知乎创意广告
代码地址如下: http://www.demodashi.com/demo/14904.html ###一.概述貌似前段时间刷知乎看到的一种非常有特色的广告展现方式,即在列表页,某一个Item显示背 ...

Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应

Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应相关推荐

最新文章

热门文章