继承view的自定义控件示例

最新推荐文章于 2025-06-16 18:05:34 发布

帅呆sky

最新推荐文章于 2025-06-16 18:05:34 发布

阅读量515

点赞数

CC 4.0 BY-SA版权

分类专栏： AndroidUI相关文章标签： android canvas 自定义控件

本文链接：https://blog.youkuaiyun.com/qq_17387361/article/details/52448361

AndroidUI相关专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用Android自定义View结合Canvas绘制圆环控件，并实现点击事件。通过设置画笔样式、颜色等属性，绘制出特定形状的圆环，并通过计算触屏坐标判断点击位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说一下自定义控件可以分为继承view的用canvas画出来的控件，还有继承Android原生控件来重写出来的控件，还有就是混合控件。今天我来做的是第一种情况，即继承view用canvas画出来的控件，下面我们来实现下图的一个需求：

实现思路：先画一条弧线，在画2个圆形，组成一个圆环，其次给圆环添加点击事件。

先初始化画笔paint的设置，代码如下：

                rectF = new RectF(10, 200, screenWidth - 10, screenWidth - 10);
		paint_Arc = new Paint(Paint.ANTI_ALIAS_FLAG);
		// 设置抗锯齿
		paint_Arc.setAntiAlias(true);
		// 设置画笔宽度
		paint_Arc.setStrokeWidth(3);
		// 设置画笔颜色
		paint_Arc.setColor(Color.BLUE);
		// 设置空心
		paint_Arc.setStyle(Paint.Style.STROKE);
		// 设置模式
		paint_Arc.setXfermode(new PorterDuffXfermode(Mode.DARKEN));

其中这里有一个知识点就是那个设置模式。大家可以戳这里

这里就是图层模式相应的效果图。

再来在onDraw弧线和圆环：代码如下：

                canvas.drawArc(rectF, 180, 180, false, paint_Arc);
		paint_Arc.setStyle(Paint.Style.FILL);
		canvas.drawCircle(screenWidth / 2, 200, 100, paint_Arc);
		canvas.drawCircle(screenWidth / 6, 300, 100, paint_Arc);
		canvas.drawCircle(screenWidth * 5 / 6, 300, 100, paint_Arc);
		paint_Arc.setColor(Color.WHITE);
		canvas.drawCircle(screenWidth / 2, 200, 90, paint_Arc);
		canvas.drawCircle(screenWidth / 6, 300, 90, paint_Arc);
		canvas.drawCircle(screenWidth * 5 / 6, 300, 90, paint_Arc);

最后就是计算点击的坐标是否在圆环中，代码如下：

	@SuppressLint("ClickableViewAccessibility")
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			int x = (int) event.getX();
			int y = (int) event.getY();
			
			if (circleListener != null) {

				if (Math.abs(x - screenWidth / 6) <= 100
						&& Math.abs(y - 300) <= 100
						&& (screenWidth / 6 - x) * (screenWidth / 6 - x)
								+ (300 - y) * (300 - y) <= 100 * 100) {
					
					circleListener.onCircleListener(1);
					return true;
					
				}
				if (Math.abs(x - screenWidth / 2) <= 100
						&& Math.abs(y - 200) <= 100
						&& (screenWidth / 2 - x) * (screenWidth / 2 - x)
								+ (200 - y) * (200 - y) <= 100 * 100) {
					
					circleListener.onCircleListener(2);
					return true;
				}
				if (Math.abs(x - screenWidth * 5 / 6) <= 100
						&& Math.abs(y - 300) <= 100
						&& (screenWidth * 5 / 6 - x)
								* (screenWidth * 5 / 6 - x) + (300 - y)
								* (300 - y) <= 100 * 100) {
					
					circleListener.onCircleListener(3);
					return true;
				}
			}

			break;

		default:
			break;
		}
		return super.onTouchEvent(event);
	}
	
	public void setOnCircleListener(CircleListener circleListener)
	{
		this.circleListener = circleListener;
	}

	public interface CircleListener{
		public abstract void onCircleListener(int circlePos);
	}