欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android编程基于自定义view实现公章效果示例【附源码下载】

程序员文章站 2022-05-26 21:56:34
本文实例讲述了android编程基于自定义view实现公章效果。分享给大家供大家参考,具体如下: 上次去一个公司面试,面试官问了一个题,怎么用android的自定义vie...

本文实例讲述了android编程基于自定义view实现公章效果。分享给大家供大家参考,具体如下:

上次去一个公司面试,面试官问了一个题,怎么用android的自定义view实现一个公章的效果,据说这是华为之前的面试题,我想了下,要是公章的效果,最外层是一个圆,里面是一个五角星,但是这文字怎么画呢,比较难搞,后来回来看了下java的api,发现人家的path里面本来就提供了这么一个方法:

public void addarc(rectf oval, float startangle, float sweepangle) {
 addarc(oval.left, oval.top, oval.right, oval.bottom, startangle, sweepangle);
}

然后人家解释说了,根据狐线的角度生成相应的路径,所以我们就可以给文字设置一个相应绘制区域,使其绘制的文字都在这个区域内,

path.addarc(oval,-(firstrad-textpadding*i/2), textpadding);

接下来我们只需要在这个区域内把文字绘制上去就行了。

好的,下面是全部代码:

首先继承自view,我们在构造里面初始化,同样为了方便程序的扩展性,我们用自定义属性,

<declare-styleable name="seal">
 <attr name="scale_text_size" format="dimension" />
 <attr name="scale_text_color" format="color" />
 <attr name="scale_text" format="string" />
 <attr name="scale_text_padding" format="float" />
 <attr name="circle_stroke_width" format="dimension" />
 <attr name="circle_color" format="color" />
 <attr name="circle_radius" format="dimension" />
</declare-styleable>

然后我们初始化的时候主要初始化文字,文字大小,文字间距,文字颜色等等,

private void initviews(attributeset attrs, int defstyle) {
 typedarray typedarray = getcontext().obtainstyledattributes(attrs, r.styleable.seal, defstyle, 0);
 circletext = typedarray.getstring(r.styleable.seal_scale_text);
 textsize = typedarray.getdimension(r.styleable.seal_scale_text_size, 20);
 scaletextcolor = typedarray.getcolor(r.styleable.seal_scale_text_color, getresources().getcolor(r.color.c9));
 textpadding=typedarray.getfloat(r.styleable.seal_scale_text_padding,50);
 circlestrokewidth = typedarray.getdimensionpixelsize(r.styleable.seal_circle_stroke_width, 3);
 circlecolor = typedarray.getcolor(r.styleable.seal_circle_color, getresources().getcolor(r.color.c9));
 circleradius = typedarray.getdimensionpixelsize(r.styleable.seal_circle_radius, 7);
 typedarray.recycle();
}

接下来我们在重写ondraww(canvas canvas)

@override
protected void ondraw(canvas rootcanvas) {
 super.ondraw(rootcanvas);
 bitmap image = bitmap.createbitmap(getwidth(), getheight(), bitmap.config.argb_8888);
 canvas canvas = new canvas(image);
 paint paint=new paint();
 drawring(canvas,paint);
 drawstar(canvas);
 drawtext(canvas);
 rootcanvas.drawbitmap(image, 0, 0, null);
}

接下来是对应的三个方法:画圆环(ring),五角星(star),文字(text)

//圆环
private void drawring(canvas canvas, paint paint) {
 centre = canvas.getwidth() / 2; // 获取圆心的x坐标
 radius = (int) (centre - circlestrokewidth / 2); // 圆环的半径
 paint.setcolor(color.red); // 设置圆环的颜色
 paint.setstyle(paint.style.stroke); // 设置空心
 paint.setstrokewidth(circlestrokewidth); // 设置圆环的宽度
 paint.setantialias(true); // 消除锯齿
 canvas.drawcircle(centre, centre, radius, paint); // 画出圆环
}
//绘制五角星
private void drawstar(canvas canvas){
 float start_radius = (float) ((radius / 2)*1.1);
 int x = centre, y = centre;
 float x1,y1,x2,y2,x3,y3,x4,y4,x5,y5;
 float r72 = (float) math.toradians(72);
 float r36 = (float) math.toradians(36);
 //顶点
 x1 = x;
 y1 = y - start_radius;
 //左1
 x2 = (float) (x - start_radius*math.sin(r72));
 y2 = (float) (y - start_radius*math.cos(r72));
 //右1
 x3 = (float) (x + start_radius*math.sin(r72));
 y3 = (float) (y - start_radius*math.cos(r72));
 //左2
 x4 = (float) (x - start_radius*math.sin(r36));
 y4 = (float) (y + start_radius*math.cos(r36));
 //右2
 x5 = (float) (x + start_radius*math.sin(r36));
 y5 = (float) (y + start_radius*math.cos(r36));
 //连接各个节点,绘制五角星
 path path = new path();
 path.moveto(x1, y1);
 path.lineto(x5, y5);
 path.lineto(x2, y2);
 path.lineto(x3, y3);
 path.lineto(x4, y4);
 path.close();
 paint paint = new paint();
 paint.setcolor(color.red);
 canvas.drawpath(path, paint);
}
//文字
private void drawtext(canvas canvas){
 paint paint = new paint();
 paint.setcolor(color.red);
 paint.settypeface(typeface.default_bold);
 paint.settextalign(paint.align.center);
 paint.settextsize(radius/5+5);
 //圆弧文字所在矩形范围
 rectf oval=new rectf(0, 0, 2*radius, (float) (2*radius));
 //第一个文字偏移角度,其中padding/2为文字间距
 float firstrad = 90 + textpadding * (circletext.length()) / 4 - textpadding/8;
 for(int i = 0; i < circletext.length(); i++){
  path path = new path();
  //根据角度生成弧线路径
  path.addarc(oval,-(firstrad-textpadding*i/2), textpadding);
  canvas.drawtextonpath(string.valueof(circletext.charat(i)), path, -(float) (radius/3),(float) (radius/3), paint);
 }
}

最后在我们需要的视图中引用下就好了

<com.xzh.sealmaster.view.sealview
 android:layout_width="200dp"
 android:layout_height="200dp"
 android:layout_gravity="center"
 app:scale_text_size="16sp"
 app:scale_text_padding="50"
 app:scale_text="华为上海有限公司"
 />

完整实例代码点击此处本站下载

更多关于android相关内容感兴趣的读者可查看本站专题:《android图形与图像处理技巧总结》、《android开发入门与进阶教程》、《android调试技巧与常见问题解决方法汇总》、《android基本组件用法总结》、《android视图view技巧总结》、《android布局layout技巧总结》及《android控件用法总结

希望本文所述对大家android程序设计有所帮助。