Android 同心圆的遥控器的自定义

自定义的遥控器






import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import com.we_smart_zxd.customwidget.R;
import com.we_smart_zxd.customwidget.Util.UiUtil;


/**
 * Created by zxd on 2016/6/27.
 */
public class DiskMenuViewEight extends View {

   //内圆边框的宽度
   private float innerCircleWidth = 10;

   //外围圆的边框的宽度
   private float outerCircleWidth = 15;

   //画笔对象
   private Paint mPaint;

   //圆心的X坐标
   private float centerX;

   //圆心的Y坐标
   private float centerY;

   //内圆半径的颜色
   private int outerCircleColor = 0xFFD8D9D9;

   //外围半径的颜色
   private int innererCircleColor = 0xFFF1F1F1;

   //37°正弦值
   private float mSin45 = (float) Math.sin(45 * Math.PI / 180);

   //37°的余弦值

   private float mCos45 = (float) Math.cos(45 * Math.PI / 180);


   private float outerCircleRadius, innerCircleRadius;


   private AREA mArea;

   public DiskMenuViewEight(Context context) {
      super(context);
      inint();
   }

   public DiskMenuViewEight(Context context, AttributeSet attrs, int defStyleAttr) {
      super(context, attrs, defStyleAttr);
   }

   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
      super.onMeasure(widthMeasureSpec, heightMeasureSpec);

      int w = getWidth();
      int h = getHeight();

      centerX = w / 2;

      centerY = h / 2;

      outerCircleRadius = centerX - outerCircleWidth;

      innerCircleRadius = centerX / 3;

   }

   private void inint() {
      mPaint = new Paint();
   }

   //定义接口
   public interface ChangeStateListener {
      void onChangeState(AREA area);
   }

   ChangeStateListener mChangeStateListener = null;

   public void setChangeStateListener(ChangeStateListener changeStateListener) {
      mChangeStateListener = changeStateListener;
   }

   @Override
   protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);

      mPaint.setAntiAlias(true);
      //画圆
      drawCircle(canvas);
      //花直线
      drawLine(canvas);
      //画背景选择器
      drawOnclikColor(canvas, mArea);
      //画文字
      drawText(canvas);
      //画图
      drawImgaview1(canvas);
      drawImgaview2(canvas);
      //画灯泡
      drawImgaviewCenter(canvas);
   }


   //画图
   private void drawImgaview1(Canvas canvas) {
      Paint imgPaint = new Paint();
      imgPaint.setAntiAlias(true);
      Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.reversal);

      Matrix matrix = new Matrix();
      matrix.postScale(0.3f, 0.3f);
      Bitmap dstbmp = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),
            bitmap.getHeight(), matrix, true);

      RectF mRectF = new RectF((float) (centerX - (mSin45 * outerCircleRadius) / 3-UiUtil.Dp2Px(20)), (float) (centerY + (0.55f * outerCircleRadius)-UiUtil.Dp2Px(10)),
            (float) ((centerX - (mSin45 * outerCircleRadius) / 3)+UiUtil.Dp2Px(20)), (float) (centerY + (0.55f * outerCircleRadius) + UiUtil.Dp2Px(30)));
      canvas.drawBitmap(dstbmp, null, mRectF, imgPaint);
   }

   //画图
   private void drawImgaview2(Canvas canvas) {
      Paint imgPaint = new Paint();
      imgPaint.setAntiAlias(true);
      Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.wind_speed);

      Matrix matrix = new Matrix();
      matrix.postScale(0.3f, 0.3f);
      Bitmap dstbmp = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),
            bitmap.getHeight(), matrix, true);

      RectF mRectF = new RectF((float) (centerX + (mSin45 * outerCircleRadius) / 3-UiUtil.Dp2Px(20)), (float) (centerY + (0.55f * outerCircleRadius)-UiUtil.Dp2Px(10)),
            (float) ((centerX + (mSin45 * outerCircleRadius) / 3)+UiUtil.Dp2Px(20)), (float) (centerY + (0.55f * outerCircleRadius) + UiUtil.Dp2Px(30)));
      canvas.drawBitmap(dstbmp, null, mRectF, imgPaint);
   }

   //画图
   private void drawImgaviewCenter(Canvas canvas) {
      Paint imgPaint = new Paint();
      imgPaint.setAntiAlias(true);
      Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.off_light);

      Matrix matrix = new Matrix();
      matrix.postScale(0.4f, 0.4f);
      Bitmap dstbmp = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),
            bitmap.getHeight(), matrix, true);

      RectF mRectF = new RectF((float) (centerX -UiUtil.Dp2Px(30)), (float) (centerY -UiUtil.Dp2Px(30)),
            (float) (centerX + UiUtil.Dp2Px(30)), (float) (centerY  + UiUtil.Dp2Px(30)));
      canvas.drawBitmap(dstbmp, null, mRectF, imgPaint);
   }

   //写文字
   private void drawText(Canvas canvas) {
      Paint paint = new Paint();
      paint.setAntiAlias(true);
      paint.setTextSize(100);
      paint.setColor(innererCircleColor);
      paint.setTextAlign(Paint.Align.CENTER);


      //1
      canvas.drawText("1", centerX - mSin45 * (outerCircleRadius / 2) - (outerCircleRadius - innerCircleRadius) * 2 / 5,
            centerY + mSin45 * (outerCircleRadius / 2) - (outerCircleRadius - innerCircleRadius) / 20, paint);

      //2
      canvas.drawText("2", centerX - mSin45 * (outerCircleRadius / 2) - (outerCircleRadius - innerCircleRadius) * 2 / 5,
            centerY - mCos45 * (outerCircleRadius / 4), paint);
      //3
      canvas.drawText("3", centerX - (mSin45 * outerCircleRadius) / 3, centerY - (0.55f * outerCircleRadius), paint);

      //4
      canvas.drawText("4", centerX + mSin45 * (outerCircleRadius / 3),
            centerY - (0.55f * outerCircleRadius), paint);
      //5
      canvas.drawText("5", centerX + mSin45 * (outerCircleRadius / 2) + (outerCircleRadius - innerCircleRadius) * 2 / 5,
            centerY - mCos45 * (outerCircleRadius / 4), paint);
      //6
      canvas.drawText("6", centerX + mSin45 * (outerCircleRadius / 2) + (outerCircleRadius - innerCircleRadius) * 2 / 5,
            centerY + mSin45 * (outerCircleRadius / 2) - (outerCircleRadius - innerCircleRadius) / 20, paint);

   }

   //画圆
   private void drawCircle(Canvas canvas) {
      mPaint.setColor(Color.WHITE);
      mPaint.setStyle(Paint.Style.FILL);
      canvas.drawCircle(centerX, centerY, outerCircleRadius, mPaint);

      mPaint.setColor(outerCircleColor);
      mPaint.setStrokeWidth(outerCircleWidth);
      mPaint.setStyle(Paint.Style.STROKE);
      canvas.drawCircle(centerX, centerY, outerCircleRadius, mPaint);

      mPaint.setColor(outerCircleColor);
      mPaint.setStrokeWidth(10);
      mPaint.setStyle(Paint.Style.STROKE);
      canvas.drawCircle(centerX, centerY, innerCircleRadius, mPaint);

      mPaint.setColor(Color.WHITE);
      mPaint.setStyle(Paint.Style.FILL);
      canvas.drawCircle(centerX, centerY, innerCircleRadius, mPaint);


   }

   //画直线
   private void drawLine(Canvas canvas) {
      mPaint.setColor(outerCircleColor);
      mPaint.setStrokeWidth(5);
      //第一条
      canvas.drawLine(centerX, centerY - innerCircleRadius, centerX, centerY - outerCircleRadius, mPaint);
      //第二条
      canvas.drawLine(centerX - (mSin45 * outerCircleRadius), centerY - (mSin45 * outerCircleRadius),
            centerX - (mSin45 * innerCircleRadius), centerY - (mSin45 * innerCircleRadius), mPaint);
      //第三条
      canvas.drawLine(centerX - innerCircleRadius, centerY, centerX - outerCircleRadius, centerY, mPaint);
      //第四条
      canvas.drawLine(centerX - (mSin45 * outerCircleRadius), centerY + (mSin45 * outerCircleRadius),
            centerX - (mSin45 * innerCircleRadius), centerY + (mSin45 * innerCircleRadius), mPaint);
      //第五条
      canvas.drawLine(centerX - (mSin45 * outerCircleRadius), centerY + (mSin45 * outerCircleRadius),
            centerX - (mSin45 * innerCircleRadius), centerY + (mSin45 * innerCircleRadius), mPaint);
      //第六条
      canvas.drawLine(centerX, centerY + innerCircleRadius, centerX, centerY + outerCircleRadius, mPaint);
      //第七条
      canvas.drawLine(centerX + (mSin45 * outerCircleRadius), centerY + (mSin45 * outerCircleRadius),
            centerX + (mSin45 * innerCircleRadius), centerY + (mSin45 * innerCircleRadius), mPaint);
      //第八条
      canvas.drawLine(centerX + innerCircleRadius, centerY, centerX + outerCircleRadius, centerY, mPaint);
      //第九条
      canvas.drawLine(centerX + (mSin45 * outerCircleRadius), centerY - (mSin45 * outerCircleRadius),
            centerX + (mSin45 * innerCircleRadius), centerY - (mSin45 * innerCircleRadius), mPaint);
   }


   /**
    * 清空画布
    *
    * @param canvas
    */
   private void clearCanvas(Canvas canvas) {
      canvas.drawColor(Color.WHITE);
   }

   //按下时的XY坐标
   float mDownX, mDownY;
   //松开时的X,Y坐标
   float mUpX, mUpY;

   //触摸事件 即点击事件的处理


   @Override
   public boolean onTouchEvent(MotionEvent event) {
      switch (event.getAction()) {
         case MotionEvent.ACTION_DOWN:
            mDownX = event.getX();
            mDownY = event.getY();
            Log.i("custom", "mDown==" + mDownX);
            Log.i("custom", "mDown==" + judgeArea(mDownX, mDownY));
            mArea = judgeArea(mDownX, mDownY);
            invalidate();
            mChangeStateListener.onChangeState(mArea);
            break;
         case MotionEvent.ACTION_UP:
//                clearCanvas(mCanvas);
            mArea = null;
            invalidate();
            break;
         default:
            break;
      }

      return true;
   }


   //判断区域
   public AREA judgeArea(float x, float y) {
      //判断是是否在大圆内
      if ((x - centerX) * (x - centerX) + (y - centerY) * (y - centerY) <= outerCircleRadius * outerCircleRadius) {
         //判断是否在小圆内
         if ((x - centerX) * (x - centerX) + (y - centerY) * (y - centerY) > innerCircleRadius * innerCircleRadius) {
            x = x - centerX;
            y = y - centerY;
            float tan = y / x;
            if (tan > Math.tan(45 * Math.PI / 180) && tan < Integer.MAX_VALUE && x < 0 && y < 0) {
               return AREA.NUMBER_ONE;
            } else if (tan > 0 && tan < Math.tan(45 * Math.PI / 180) && x < 0 && y < 0) {
               return AREA.NUMBER_TWO;
            } else if (tan < 0 && tan > -Math.tan(45 * Math.PI / 180) && x < 0 && y > 0) {
               return AREA.NUMBER_THREE;
            } else if (tan < -Math.tan(45 * Math.PI / 180) && tan > Integer.MIN_VALUE && x < 0 && y > 0) {
               return AREA.NUMBER_FOUR;
            } else if (tan > Math.tan(45 * Math.PI / 180) && tan < Integer.MAX_VALUE && x > 0 && y > 0) {
               return AREA.NUMBER_FIVE;
            } else if (tan > 0 && tan < Math.tan(45 * Math.PI / 180) && x > 0 && y > 0) {
               return AREA.NUMBER_SIX;
            } else if (tan > -Math.tan(45 * Math.PI / 180) && tan < 0 && x > 0 && y < 0) {
               return AREA.NUMBER_SEVEN;
            } else if (tan > Integer.MIN_VALUE && tan < -Math.tan(45 * Math.PI / 180) && x > 0 && y < 0) {
               return AREA.NUMBER_EIGHT;
            }
         } else {
            return AREA.CENTER;
         }
      } else {
         return null;
      }
      return null;
   }


   /**
    * 点击的时候绘制深色的扇形
    *
    * @param canvas
    * @param area
    */
   private void drawOnclikColor(Canvas canvas, AREA area) {
      //先诀条件
      if (area == null) {
         return;
      }
      //设置点击之后的颜色
      mPaint.setColor(outerCircleColor);
      mPaint.setStyle(Paint.Style.STROKE);
      mPaint.setStrokeWidth(outerCircleRadius - innerCircleRadius);

      switch (area) {
         case NUMBER_ONE:
            canvas.drawArc(new RectF(centerX - (outerCircleRadius - innerCircleRadius) - innerCircleWidth, centerY - (outerCircleRadius - innerCircleRadius) - innerCircleWidth,
                  centerX + (outerCircleRadius - innerCircleRadius) + innerCircleWidth, centerY
                  + (outerCircleRadius - innerCircleRadius) + innerCircleWidth), 225, 45, false, mPaint);
            break;
         case NUMBER_TWO:
            canvas.drawArc(new RectF(centerX - (outerCircleRadius - innerCircleRadius) - innerCircleWidth, centerY - (outerCircleRadius - innerCircleRadius) - innerCircleWidth,
                  centerX + (outerCircleRadius - innerCircleRadius) + innerCircleWidth, centerY
                  + (outerCircleRadius - innerCircleRadius) + innerCircleWidth), 180, 45, false, mPaint);
            break;
         case NUMBER_THREE:
            canvas.drawArc(new RectF(centerX - (outerCircleRadius - innerCircleRadius) - innerCircleWidth, centerY - (outerCircleRadius - innerCircleRadius) - innerCircleWidth,
                  centerX + (outerCircleRadius - innerCircleRadius) + innerCircleWidth, centerY
                  + (outerCircleRadius - innerCircleRadius) + innerCircleWidth), 135, 45, false, mPaint);
            break;
         case NUMBER_FOUR:
            canvas.drawArc(new RectF(centerX - (outerCircleRadius - innerCircleRadius) - innerCircleWidth, centerY - (outerCircleRadius - innerCircleRadius) - innerCircleWidth,
                  centerX + (outerCircleRadius - innerCircleRadius) + innerCircleWidth, centerY
                  + (outerCircleRadius - innerCircleRadius) + innerCircleWidth), 90, 45, false, mPaint);
            break;
         case NUMBER_FIVE:
            canvas.drawArc(new RectF(centerX - (outerCircleRadius - innerCircleRadius) - innerCircleWidth, centerY - (outerCircleRadius - innerCircleRadius) - innerCircleWidth,
                  centerX + (outerCircleRadius - innerCircleRadius) + innerCircleWidth, centerY
                  + (outerCircleRadius - innerCircleRadius) + innerCircleWidth), 45, 45, false, mPaint);
            break;
         case NUMBER_SIX:
            canvas.drawArc(new RectF(centerX - (outerCircleRadius - innerCircleRadius) - innerCircleWidth, centerY - (outerCircleRadius - innerCircleRadius) - innerCircleWidth,
                  centerX + (outerCircleRadius - innerCircleRadius) + innerCircleWidth, centerY
                  + (outerCircleRadius - innerCircleRadius) + innerCircleWidth), 0, 45, false, mPaint);
            break;
         case NUMBER_SEVEN:
            canvas.drawArc(new RectF(centerX - (outerCircleRadius - innerCircleRadius) - innerCircleWidth, centerY - (outerCircleRadius - innerCircleRadius) - innerCircleWidth,
                  centerX + (outerCircleRadius - innerCircleRadius) + innerCircleWidth, centerY
                  + (outerCircleRadius - innerCircleRadius) + innerCircleWidth), -45, 45, false, mPaint);
            break;
         case NUMBER_EIGHT:
            canvas.drawArc(new RectF(centerX - (outerCircleRadius - innerCircleRadius) - innerCircleWidth, centerY - (outerCircleRadius - innerCircleRadius) - innerCircleWidth,
                  centerX + (outerCircleRadius - innerCircleRadius) + innerCircleWidth, centerY
                  + (outerCircleRadius - innerCircleRadius) + innerCircleWidth), -90, 45, false, mPaint);
            break;
         case CENTER:
            mPaint.setStrokeWidth(0);
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(centerX, centerY, innerCircleRadius, mPaint);
            break;
         default:
            break;
      }

   }

   /**
    * 关于不同区域的枚举,逆时针方向
    */
   public enum AREA {
      //第一区域
      NUMBER_ONE,
      //第二区域
      NUMBER_TWO,
      //第三区域
      NUMBER_THREE,
      //第四区域
      NUMBER_FOUR,
      //第五区域
      NUMBER_FIVE,
      //第六区域
      NUMBER_SIX,
      //第七区域
      NUMBER_SEVEN,
      //第八区域
      NUMBER_EIGHT,
      //中心区域
      CENTER,
   }
}


使用案例
public class MainActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      UiUtil.setContext(this);
      RelativeLayout view         = (RelativeLayout) findViewById(R.id.rlRoot);
      DiskMenuViewEight   mDisMenuView = new DiskMenuViewEight(this);
      mDisMenuView.setWidthAndHeight(800,800);
      mDisMenuView.setChangeStateListener(new DiskMenuViewEight.ChangeStateListener() {
         @Override
         public void onChangeState(DiskMenuViewEight.AREA area) {
            Log.i("AREA",area+"");
         }
      });
      view.addView(mDisMenuView);

   }
}
 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值