作者:燕潇洒
导读:最近在项目中遇到在标题栏右侧按钮点击时,弹出一个顶部是三角形的菜单,可是ui并没有给图,于是,我只能自己画一个了.
先看一下效果图:
下面说一下实现过程吧:
创建类继承View类,重写onDraw方法,所有的代码,都在onDraw方法中,我们需要一步一步的去画出来:
在这个过程中,我用到了paint(画笔),Path(路径类),和Canvas(画布);
,初始化我们的画笔和路径类,以便下面使用:
//初始化画笔,
final Paint p = new Paint();
//设置画笔颜色
p.setColor(Color.WHITE);
//初始化路径类,用于点与点之间的连线
Path path = new Path();
我把上面的效果分为两个部分(应该使用path就能完成,但是我没试过):一个三角形一个圆角矩形。
先画出三角形:
//获取屏幕宽度,此处减去100是为了直接确定三角形顶部点的位置
int x = ScreenUtils.getScreenWidth(getContext())-100;
//留出标题栏的高度,画出的图形要在标题栏下方
int titleHeight = PxUtils.dp2px(getContext(),50);
//设置所画三角形下面两个点的纵坐标
int y2 = titleHeight+30;
//先画出一个小的三角形
path.moveTo(x, titleHeight);//x就是三角形顶点纵坐标
//三角形右边的点,之所以加上20,是因为我们画的是三角形,右边的点的横坐标肯定大于顶点的横坐标
path.lineTo(x+20, y2);
//三角形左边的点,之所以减去20,是因为我们画的是三角形,左边的点的横坐标肯定小于顶点的横坐标
path.lineTo(x-20, y2);
//使这些点构成封闭的多边形
path.close();
//用画笔画出所连接的图形
canvas.drawPath(path, p);
一个三角形就出现了:
现在三角形已经画出来了,紧接着我们以三角形的底边坐标也就是三角形底部两点的纵坐标作为圆角矩形的起始坐标,开始画圆角矩形。
// 然后绘制矩形放在三角形下方,三界性底边的y坐标就是矩形的顶部坐标
canvas.drawRoundRect(x/2+30, y2, x+100-20, 1000,10,10, p);
使用drawRoundRect(float left,float top,float right,float bottom,float rx,float ry,Paint paint);
第一个参数:左边坐标
第二个参数:上边坐标
第三个参数:右边坐标
第四个参数:底边坐标
第五个参数:x轴方向上的圆角
第六个参数:y轴方向上的圆角
第七个参数:画笔
一个圆角矩形也出来了,具体的大小,自己可以调节:
这样,一个三角形和一个圆角矩形就出来了,样子已经出来了,现在,就差几条分割线了,我们还需要用到Path这个类,来画出分割线:
//重新设置画笔颜色,用来设置分割线颜色
p.setColor(Color.GRAY);
//路径的宽度,也就分割线的高度
p.setStrokeWidth(2);
//将事先决定好的每一个item高度转换成px,每一段px距离出现一条分割线
int value = PxUtils.dp2px(getContext(),45);
//使用for循环画出分割线
for (int i = 0; i < 5; i++) {
//从矩形的左边横坐标开始,每一个value值后画出一条分割线
canvas.drawLine(x/2+30, y2+value*(i+1), x+100-20, y2+value*(i+1), p);//参数为起点和终点的XY坐标
}
OK,完成了!