Android自定义实现六边形按钮绘制
龙旋
共 2857字,需浏览 6分钟
· 2021-11-14
今天逛酷安的时候,发现酷安的设置按钮(截图的右上角),是一个六边形 + 中心圆的图标,所以又是一个自定义View练习对象了。画圆很简单,知道半径即可,而重点就在画出六边形。
最终效果:
原理:
1、中心画一个小圆
2、再画一个六边形(难点)
怎样才能画六边形,?只要我们计算出6个角的坐标点,用Path连接即可。至于怎么计算,就要使用三角函数。我们这样分析:
在六边形中心画一个内切圆,6个角都在圆上。360被六边形的6个角平分,每个角就为60度,而每个角的2条腰的长都是圆的半径。如下图所示:
至于三角函数,可能我们会忘记,我们对着这张图解图来回忆一下。
只要我们计算出中心角的角度,用三角函数中的cos()就可以计算出点的x坐标,sin()就可以计算出y坐标(注意这个2个方法传入的角度需要转为弧度)。重点计算代码在drawPolygon()方法。
完整代码:
自定义属性
Java代码
public class PolygonSettingView extends View {
/**
* View默认最小宽度
*/
private static final int DEFAULT_MIN_WIDTH = 100;
/**
* 画笔
*/
private Paint mPaint;
/**
* 控件宽
*/
private int mViewWidth;
/**
* 控件高
*/
private int mViewHeight;
/**
* 多边形的边数
*/
private int mNum;
/**
* 最小的多边形的半径
*/
private float mRadius;
/**
* 360度对应的弧度(为什么2π就是360度?弧度的定义:弧长 / 半径,一个圆的周长是2πr,如果是一个360度的圆,它的弧长就是2πr,如果这个圆的半径r长度为1,那么它的弧度就是,2πr / r = 2π)
*/
private final double mPiDouble = 2 * Math.PI;
/**
* 多边形中心角的角度(每个多边形的内角和为360度,一个多边形2个相邻角顶点和中心的连线所组成的角为中心角
* 中心角的角度都是一样的,所以360度除以多边形的边数,就是一个中心角的角度),这里注意,因为后续要用到Math类的三角函数
* Math类的sin和cos需要传入的角度值是弧度制,所以这里的中心角的角度,也是弧度制的弧度
*/
private float mCenterAngle;
/**
* 颜色
*/
private int mColor;
/**
* 中心小圆的半径
*/
private float mSmallCircleRadius;
/**
* 线宽
*/
private float mLineWidth;
public PolygonSettingView(Context context) {
this(context, null);
}
public PolygonSettingView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public PolygonSettingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
initAttr(context, attrs, defStyleAttr);
//取消硬件加速
setLayerType(LAYER_TYPE_SOFTWARE, null);
//画笔
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(mColor);
mPaint.setStrokeWidth(mLineWidth);
}
private void initAttr(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
//默认边数和最小边数
int defaultNum = 6;
int minNum = 3;
int defaultColor = Color.argb(255, 0, 0, 0);
int defaultLineWidth = dip2px(context, 1.5f);
if (attrs != null) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PolygonSettingView, defStyleAttr, 0);
mColor = array.getColor(R.styleable.PolygonSettingView_psv_color, defaultColor);
int num = array.getInt(R.styleable.PolygonSettingView_psv_num, defaultNum);
mNum = num <= minNum ? minNum : num;
mLineWidth = array.getDimension(R.styleable.PolygonSettingView_psv_line_width, defaultLineWidth);
array.recycle();
} else {
mColor = defaultColor;
mNum = defaultNum;
}
//计算中心角弧度
mCenterAngle = (float) (mPiDouble / mNum);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mViewWidth = w;
mViewHeight = h;
//计算最小的多边形的半径
mRadius = (Math.min(mViewWidth, mViewHeight) / 2f) * 0.95f;
//计算中心小圆的半径
mSmallCircleRadius = (Math.min(mViewWidth, mViewHeight) / 2f) * 0.3f;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//将画布中心移动到中心点
canvas.translate(mViewWidth / 2, mViewHeight / 2);
//画小圆
drawSmallCircle(canvas);
//画多边形
drawPolygon(canvas);
}
/**
* 画小圆
*/
private void drawSmallCircle(Canvas canvas) {
canvas.drawCircle(0, 0, mSmallCircleRadius, mPaint);
}
/**
* 画多边形
*/
private void drawPolygon(Canvas canvas) {
//多边形边角顶点的x坐标
float pointX;
//多边形边角顶点的y坐标
float pointY;
//总的圆的半径,就是全部多边形的半径之和
Path path = new Path();
//画前先重置路径
path.reset();
for (int i = 1; i <= mNum; i++) {
//cos三角函数,中心角的邻边 / 斜边,斜边的值刚好就是半径,cos值乘以斜边,就能求出邻边,而这个邻边的长度,就是点的x坐标
pointX = (float) (Math.cos(i * mCenterAngle) * mRadius);
//sin三角函数,中心角的对边 / 斜边,斜边的值刚好就是半径,sin值乘以斜边,就能求出对边,而这个对边的长度,就是点的y坐标
pointY = (float) (Math.sin(i * mCenterAngle) * mRadius);
//如果是一个点,则移动到这个点,作为起点
if (i == 1) {
path.moveTo(pointX, pointY);
} else {
//其他的点,就可以连线了
path.lineTo(pointX, pointY);
}
}
path.close();
canvas.drawPath(path, mPaint);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(handleMeasure(widthMeasureSpec), handleMeasure(heightMeasureSpec));
}
/**
* 处理MeasureSpec
*/
private int handleMeasure(int measureSpec) {
int result = DEFAULT_MIN_WIDTH;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
//处理wrap_content的情况
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
public static int dip2px(Context context, float dipValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
}
}
简单使用
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="10dp"
app:psv_color="@android:color/black"
app:psv_line_width="1.5dp"
app:psv_num="6" />
到这里就结束了。
评论
使用 YOLO 进行自定义对象检测
点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达我们知道我们可以专门检测一些对象。那么我们如何训练系统检测自定义对象呢?让我们一步一步来。1. 创建数据集机器是通过数据集学习的。数据集必须包含图像和标签。例如,让我的目标是创建一个检测坦克的系统。我准备了从网上下载的坦克图片。然
小白学视觉
0
三个优秀的PyTorch实现语义分割框架
点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达转自 | 机器学习AI算法工程使用的VOC数据集链接开放在文章中,预训练模型已上传Github,环境我使用Colab pro,大家下载模型做预测即可。代码链接: https://github.com/lixiang007
小白学视觉
0
15种时间序列预测方法总结(包含多种方法代码实现)
向AI转型的程序员都关注了这个号👇👇👇在这篇文章中,我们将深入探讨时间序列预测的基本概念和方法。我们将首先介绍单元预测和多元预测的概念,然后详细介绍各种深度学习和传统机器学习方法如何应用于时间序列预测,包括循环神经网络(RNN)、一维卷积神经网络(1D-CNN)、Transformer、自回归模型(
机器学习AI算法工程
0
SpringBoot 实现图片防盗链功能
程序员的成长之路互联网/程序员/技术/资料共享 关注阅读本文大概需要 4 分钟。来自:blog.csdn.net/weixin_46157208/article/details/138051737前言出于安全考虑,我们需要后端返回的图片只允许在某个网站内展示,不想被爬虫拿到图片地
程序员的成长之路
0
一站式解决方案:基于 Arthas 实现服务发现和权限控制
来源:juejin.cn/post/7281849496983994383👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接
小哈学Java
0
用 Shader 实现旗帜飘扬动画效果
我觉得对于刚入门 3D 编程的朋友来说,如果能够完成代码创建模型数据->创建材质->编写Shader动画这一系列,想必会有满满的成就感。今天就用 Cocos Creator 的 utils.MeshUtils.createMesh 接口,带大家感受一下这个流程。这个流程不仅可以用于新手学
COCOS
2
SpringBoot+Minio实现上传凭证、分片上传、秒传和断点续传
关注我们,设为星标,每天7:40不见不散,架构路上与您共享回复架构师获取资源大家好,我是你们的朋友架构君,一个会写代码吟诗的架构师。Spring Boot整合Minio后,前端的文件上传有两种方式:1、文件上传到后端,由后端保存到Minio这种方式好处是完全由后端集中管理,可以很好的做到、身份验证、
Java架构师社区
0
超越原生,散点图实现华夫饼图
之前我们介绍过了如何使用新卡片图实现华夫饼图。参考:超越原生,PowerBI 华夫饼图实现但是利用卡片图实现的华夫饼图有一些缺点,形状之间的大小跟间距不太好把握,而且有时形状大一点的话显示就会不正常,需要做出二次调整。今天给大家介绍一种原生视觉对象生成华夫饼图的更佳方案,既简单又美观。上图是利用散点
PowerBI战友联盟
2