Android(安卓)自定义View 慢慢画一个不同颜色扇形的圆，点击圆上不同颜色扇形区域返回不同颜色

最近研究自定义View，于是做了这个demo，供大家参考

参考了一位博主文章：http://blog.csdn.net/lilong85362952/article/details/41447967

自定义View的代码：

public class DrawView extends View implements ViewRefreshInterface, OnTouchListener {private RectF rectF;private List colors;private List mList;// 圆心private Point point;// 半径private int radius = 0;// view刷新private int a = 0;private int refeshAngle = 0;private int number = 0;private boolean isPause;Thread thread = new Thread();private ViewRefreshUtil viewRefreshUtil;private ViewRefreshUtil.ViewRefreshInterfaceEntity viewRefreshInterface;private ViewClickListener viewClickListener;private Context mContext;public DrawView(Context context) {super(context);init(context);}public DrawView(Context context, AttributeSet attrs) {super(context, attrs);init(context);}public DrawView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context);}@SuppressLint("ClickableViewAccessibility")private void init(Context context) {this.mContext = context;colors = new ArrayList();mList = new ArrayList();colors.add(Color.RED);colors.add(Color.GREEN);colors.add(Color.BLUE);colors.add(Color.YELLOW);viewRefreshUtil = ViewRefreshUtil.getRefreshUtil();viewRefreshInterface = viewRefreshUtil.addViewRefreshInterface(this);this.setOnTouchListener(this);DisplayMetrics dm = new DisplayMetrics();((Activity) mContext).getWindowManager().getDefaultDisplay().getMetrics(dm);isPause = false;}@SuppressLint("DrawAllocation")@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);Paint paint = new Paint();paint.setAntiAlias(true);// 抗锯齿paint.setStyle(Style.STROKE);// Style.FILL: 实心, STROKE:空心, FILL_OR_STROKE:同时实心与空心//paint.setStrokeCap(Cap.ROUND);// 画笔样式：圆形 Cap.ROUND, 方形 Cap.SQUARE//paint.setStrokeJoin(Join.ROUND);// 平滑效果paint.setStrokeWidth(15);//paint.setColor(Color.BLUE);// canvas.drawLine(0, 50, 450, 50, paint);// 画线// canvas.drawRect(0, 0, 20, 60, paint);// 画矩形// canvas.drawCircle(100, 50, 50, paint);// 画圆//canvas.drawOval(rectF, paint);// 画椭圆或者圆a += 1;refeshAngle += 1;int temAngle = 0;paint.setStyle(Style.FILL);paint.setStrokeWidth(14);for (int i = 0; i < number; i++) {paint.setColor(colors.get(i));temAngle += mList.get(i).getEndAngle() - mList.get(i).getStartAngle();if (temAngle >= a) {drawMyView(canvas, paint, rectF, mList.get(i).getStartAngle(), refeshAngle);if (refeshAngle == mList.get(i).getEndAngle() - mList.get(i).getStartAngle()) {refeshAngle = 0;number = (number < mList.size()) ? number + 1 : mList.size();}} else {drawMyView(canvas, paint, rectF, mList.get(i).getStartAngle(), Math.abs(mList.get(i).getEndAngle() - mList.get(i).getStartAngle()));}}}private void drawMyView(Canvas canvas, Paint paint, RectF rectF, int startAngle, int endAngle) {paint.setStrokeJoin(Join.MITER);paint.setStrokeCap(Cap.SQUARE);canvas.drawArc(rectF, startAngle, endAngle, true, paint);}@SuppressLint("DrawAllocation")@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int measureWidth = getMeasureWH(widthMeasureSpec);int measureHeigh = getMeasureWH(heightMeasureSpec);if (measureWidth > measureHeigh) {radius = measureHeigh / 2;} else {radius = measureWidth / 2;}if (getMeasuredWidth() != 0 && getMeasuredHeight() != 0) {rectF = new RectF(0, 0, radius * 2, radius * 2);//this.start();}if (measureWidth > measureHeigh) {setMeasuredDimension(measureHeigh, measureHeigh);} else {setMeasuredDimension(measureWidth, measureWidth);}}private int getMeasureWH(int measureSpec) {int specMode = MeasureSpec.getMode(measureSpec);int specSize = MeasureSpec.getSize(measureSpec);return specSize;}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);}public void setData(List list) {if (!viewRefreshInterface.isRefresh() && !isPause) {this.mList = list;this.number = 1;//this.start();}}public boolean isRefresh() {return viewRefreshInterface.isRefresh();}// 开始public void start() {if (isPause) {viewRefreshInterface.setRefresh(true);viewRefreshUtil.startViewRefresh(viewRefreshInterface);isPause = false;}if (!viewRefreshInterface.isRefresh()) {viewRefreshInterface.setRefresh(true);viewRefreshUtil.startViewRefresh(viewRefreshInterface);isPause = false;}}// 暂停public void pause() {if (viewRefreshInterface.isRefresh() && !isPause) {viewRefreshInterface.setRefresh(false);isPause = true;}}// 停止public void stop() {viewRefreshInterface.setRefresh(false);a = 0;refeshAngle = 0;number = 0;init(mContext);postInvalidate();}@Overridepublic void refresh() {if (a >= 360) {viewRefreshInterface.setRefresh(false);} else {postInvalidate();}}@SuppressLint("DrawAllocation")@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);point = new Point((right - left) / 2 + left, (bottom - top) / 2 + top);}@SuppressLint("ClickableViewAccessibility")@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:break;case MotionEvent.ACTION_UP:double x = Math.pow(point.x - event.getRawX(), 2);double y = Math.pow(point.y - event.getRawY(), 2);if (!viewRefreshInterface.isRefresh() && Math.sqrt(x + y) <= radius) {int tanX = (int) Math.abs(event.getRawX() - point.x);int tanY = (int) Math.abs(event.getRawY() - point.y);double clickAngle = getangle(tanX, tanY, (int) event.getRawX() - point.x, point.y - (int) event.getRawY());int mClickAngle = (int) clickAngle - 90;for (int i = 0; i < mList.size(); i++) {if (mClickAngle >= mList.get(i).getStartAngle() && mClickAngle <= mList.get(i).getEndAngle()) {viewClickListener.clickListener(mList.get(i));break;}}}break;}return true;}// 根据点击位置获取夹角private double getangle(int x, int y, int downx, int downy) {double angle = (float) 0.0;if (downx > 0 && downy < 0) {double c = (double) y / (double) x;double d = Math.toDegrees(Math.atan(c));angle = d + 90;} else if (downx <= 0 && downy <= 0) {double c = (double) x / (double) y;double d = Math.toDegrees(Math.atan(c));angle = d + 180;} else if (downx < 0 && downy >= 0) {double c = (double) y / (double) x;double d = Math.toDegrees(Math.atan(c));angle = d + 270;} else {double c = (double) x / (double) y;double d = Math.toDegrees(Math.atan(c));angle = d;}return angle;}public void setViewClickListenrt(ViewClickListener clickListener) {this.viewClickListener = clickListener;}public interface ViewClickListener {public void clickListener(SectorItem item);}}

这里有一些东西需要注意一下（这里不做详细说明）：

1、当你在xml中为这个view设置margin属性的时候，在onLayout中获取的top，left，right，bottom的值都是你设置的2倍，所以再做一些计算时要注意，

2、在使用canvas.drawArc()方法画圆时，是以水平右方向顺时针画的，所以我在画圆的时候起始位置的角度为：-90,，竖直方向开始画圆，

3、onMeasure()这个方法在什么时候调用，调用几次，getMeasuredHeight()、getHeight()这两个方法区别，MeasureSpecMode()中几个不同Mode也是需要注意，

4、在画这个圆时，会有点慢，如果想改变速率，需要注意 refeshAngle 和 a 这两个参数，因为扇形时整数度数，我是一度一度慢慢绘制的，修改时需要注意

如果不需要慢慢绘制这个圆可以直接用for循环调用drawMyView(canvas, paint, rectF, mList.get(i).getStartAngle(), mList.get(i).getEndAngle());直接回执完整的圆，省去了绘制的时间

ViewRefreshUtil代码：

public class ViewRefreshUtil implements Runnable {private Thread thread;private static ViewRefreshUtil viewRefreshUtil;private ArrayList viewRefreshInterfaces;public static ViewRefreshUtil getRefreshUtil() {if (null == viewRefreshUtil) {viewRefreshUtil = new ViewRefreshUtil();}return viewRefreshUtil;}private ViewRefreshUtil() {viewRefreshInterfaces = new ArrayList();}public ViewRefreshInterfaceEntity addViewRefreshInterface(ViewRefreshInterface viewRefreshInterface) {ViewRefreshInterfaceEntity viewRefreshInterfaceEntity = new ViewRefreshInterfaceEntity();viewRefreshInterfaceEntity.setViewRefreshInterface(viewRefreshInterface);viewRefreshInterfaces.add(viewRefreshInterfaceEntity);return viewRefreshInterfaceEntity;}public void startViewRefresh(ViewRefreshInterfaceEntity viewRefreshInterfaceEntity) {viewRefreshInterfaceEntity.setRefresh(true);if (null == thread || !thread.isAlive()) {thread = new Thread(this);            thread.start();}}public void stopViewRefresh(ViewRefreshInterfaceEntity viewRefreshInterfaceEntity) {viewRefreshInterfaceEntity.setRefresh(false);}public interface ViewRefreshInterface {void refresh();}@Overridepublic void run() {int i = 1;        while (i != 0) {            i=0;            for (ViewRefreshInterfaceEntity viewRefreshInterfaceEntity : viewRefreshInterfaces) {                if (viewRefreshInterfaceEntity.isRefresh()) {                viewRefreshInterfaceEntity.getViewRefreshInterface().refresh();                    i++;                }            }            try {                Thread.sleep(20);            } catch (InterruptedException e) {                e.printStackTrace();            }        }}public class ViewRefreshInterfaceEntity {private boolean isRefresh = false;private ViewRefreshInterface viewRefreshInterface;public boolean isRefresh() {return isRefresh;}public void setRefresh(boolean isRefresh) {this.isRefresh = isRefresh;}public ViewRefreshInterface getViewRefreshInterface() {return viewRefreshInterface;}public void setViewRefreshInterface(ViewRefreshInterface viewRefreshInterface) {this.viewRefreshInterface = viewRefreshInterface;}}}

SectorItem代码：

public class SectorItem implements Serializable {private int startAngle;private int endAngle;private String name;public int getStartAngle() {return startAngle;}public void setStartAngle(int startAngle) {this.startAngle = startAngle;}public int getEndAngle() {return endAngle;}public void setEndAngle(int endAngle) {this.endAngle = endAngle;}public String getName() {return name;}public void setName(String name) {this.name = name;}}

mainactivity代码：

public class MainActivity extends Activity implements OnClickListener {private DrawView drawView;private Button start, pause, stop;private List list;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);drawView = (DrawView) findViewById(R.id.dv);start = (Button) findViewById(R.id.start);pause = (Button) findViewById(R.id.pause);stop = (Button) findViewById(R.id.stop);start.setOnClickListener(this);pause.setOnClickListener(this);stop.setOnClickListener(this);drawView.setViewClickListenrt(new ViewClickListener() {@Overridepublic void clickListener(SectorItem item) {Toast.makeText(MainActivity.this, "You Click :" + item.getName() + " Area !", Toast.LENGTH_SHORT).show();}});}private void initData() {list = new ArrayList();SectorItem item = new SectorItem();item.setStartAngle(-90);item.setEndAngle(0);item.setName("Red");list.add(item);item = new SectorItem();item.setStartAngle(0);item.setEndAngle(80);item.setName("Green");list.add(item);item = new SectorItem();item.setStartAngle(80);item.setEndAngle(150);item.setName("BLUE");list.add(item);item = new SectorItem();item.setStartAngle(150);item.setEndAngle(270);item.setName("YELLOW");list.add(item);drawView.setData(list);}@Overrideprotected void onDestroy() {super.onDestroy();if (drawView.isRefresh()) {drawView.stop();}}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.start:initData();drawView.start();break;case R.id.pause:drawView.pause();break;case R.id.stop:drawView.stop();break;}}}

mainactivity 的布局：

功能很简单，进入页面，点击start按钮开始竖直顺时针方向画圆，圆内有四种不同颜色的扇形，点击pause按钮暂停画圆，点击stop按钮停止画圆并清空view，当我们点击圆内不同颜色的扇形时，用Toast打印我们点击的扇形的颜色

最后，未经允许禁止转载

更多相关文章

随机推荐