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

版权声明：本文为博主原创文章，未经博主允许不得转载。

 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调色板应用后，大家会对颜色渲染方面会有一个认识上的提高.