Android重写View实现全新的控件
通常情况下,android实现自定义控件无非三种方式。
ⅰ、继承现有控件,对其控件的功能进行拓展。
ⅱ、将现有控件进行组合,实现功能更加强大控件。
ⅲ、重写view实现全新的控件
本文来讨论最难的一种自定义控件形式,重写view来实现全新的控件。
首先,我们要明白在什么样的情况下,需要重写view来实现一种全新的控件,一般当我们遇到了原生控件无法满足我们现有的需求的时候,我们此时就可以考虑创建一个全新的view来实现我们所需要的功能。创建一个全新view实现自定义控件,无非分成这么几步:
ⅰ、在onmeasure()方法中,测量自定义控件的大小,使自定义控件能够自适应布局各种各样的需求。
ⅱ、在ondraw()方法中,利用哼哈二将(canvas与paint)来绘制要显示的内容。
ⅲ、在onlayout()方法中来确定控件显示位置。
ⅳ、在ontouchevent()方法处理控件的触摸事件。
相应的思维导图如下:
多说无益,我们通过几个小案例,来讲解到底如何实现自定义控件。
一、一个带有比例进度的环形控件
首先看一下这个控件的示意图:
通过这个简单的示意图,我们对于项目所完成的比例,就一目了然了。通过这个简单的示意图,我们可以很快速的把这个图形分成三个部分。ⅰ、外层的环,ⅱ、里面的园,三、相应文字。有了这个思路以后,我们只需要在ondraw()方法中一个个进行绘制罢了。我这里为了简单起见,把这个控件的宽度设置为屏幕的宽度。
首先,还是老样子,为自定义控件设置一些自定义属性,便于调用者对其进行扩展,自定义属性的设置代码为:
<declare-styleable name="circleview"> <attr name="textsize" format="dimension" /> <attr name="text" format="string" /> <attr name="circlecolor" format="color" /> <attr name="arccolor" format="color" /> <attr name="textcolor" format="color" /> <attr name="startangle" format="integer" /> <attr name="sweepangle" format="integer" /> </declare-styleable>
ⅰ、textsize——对应中间文本文字的大小
ⅱ、text——对应中间文本
ⅲ、circlecolor——对应内圆的颜色
ⅳ、arccolor——对应外环的颜色
ⅴ、textcolor——对应文本的颜色
ⅵ、startangle——对应外环的起始角度
ⅶ、sweepangle——对应外环扫描角度
紧接着,就是在自定义控件的初始化方法中来获取这些自定义属性:
typedarray ta = context.obtainstyledattributes(attrs, r.styleable.circleview); if (ta != null) { circlecolor = ta.getcolor(r.styleable.circleview_circlecolor, 0); arccolor = ta.getcolor(r.styleable.circleview_arccolor, 0); textcolor = ta.getcolor(r.styleable.circleview_textcolor, 0); textsize = ta.getdimension(r.styleable.circleview_textsize, 50); text = ta.getstring(r.styleable.circleview_text); startangle = ta.getint(r.styleable.circleview_startangle, 0); sweepangle = ta.getint(r.styleable.circleview_sweepangle, 90); ta.recycle(); }
这里在多说一嘴子,为了释放更多的资源,一定要将typedarray这个对象进行资源的释放。
接下来,在onmeasure()方法中,初始化要绘制画笔样式,获取屏幕的宽度,计算中间位置的坐标,以及指定外接矩形的宽高代码如下:
private void init() { int length = math.min(width, height); mcirclexy = length / 2; mradius = length * 0.5f / 2; mcirclepaint = new paint(paint.anti_alias_flag); mcirclepaint.setcolor(circlecolor); mrectf = new rectf(length * 0.1f, length * 0.1f, length * 0.9f, length * 0.9f); marcpaint = new paint(paint.anti_alias_flag); marcpaint.setcolor(arccolor); marcpaint.setstyle(paint.style.stroke); marcpaint.setstrokewidth((width * 0.1f)); mtextpaint = new paint(paint.anti_alias_flag); mtextpaint.settextsize(textsize); mtextpaint.setcolor(textcolor); mtextpaint.settextalign(align.center); }
将我们设置的自定义属性,设置给不同笔刷。
做了这么多准备以后,我们所需的就是在ondraw方法中绘制内圆、外环与文字。代码如下:
@override protected void ondraw(canvas canvas) { super.ondraw(canvas); drawsth(canvas); } private void drawsth(canvas canvas) { canvas.drawcircle(mcirclexy, mcirclexy, mradius, mcirclepaint); canvas.drawarc(mrectf, startangle, sweepangle, false, marcpaint); canvas.drawtext(text, 0, text.length(), mcirclexy, mcirclexy + textsize / 4, mtextpaint); }
需要指出的是,画环形需要在一个指定矩形区域画取,并且要指定起始角度,扫描角度,这些变量都是自定义属性。
这个自定义控件的最终的运行效果为:
二、动态条形图
条形图,应该在图表展示系统中再普通不过的一种图标了。静态示意图就像这样:
通过这个简单的示意图,我们所需要做的是,绘制一个个的矩形,然后将每一个矩形x坐标平移一定的单位,我们还看到这么一个现象:每个条形图的起始点不一致,而终止点是一样的。起始坐标用个random(随机函数)刚刚好,实现静态条形图就是这样的思路:
首先,在onmeasure()方法中计算出每个矩形宽与高,这里为了方便起见,每个矩形默认的高为屏幕的高,每个矩形的宽这里定义为屏幕的宽度乘以80%除以矩形的个数。然后根据宽与高来初始化笔刷(paint)。为什么要根据宽与高来初始化笔刷了,这里我为了使自定义view更加的逼真,我这里使用lineargradient(线性渲染器)进行了渲染,这个对象需要使用矩形宽与高。需要指出来的是这个自定义控件是动态的,我只需要ondraw方法不断发生重绘,这里为了防止控件刷新太快,我这里每隔300毫秒刷新视图。这个控件的完整源代码如下:
public class volumneview extends view { private paint mpaint; private int mcount; private int mwidth; private int mrectheight; private int mrectwidth; private lineargradient mlineargradient; private double mrandom; private float mcurrentheight; public static final int offset = 5; public volumneview(context context, attributeset attrs, int defstyleattr) { super(context, attrs, defstyleattr); initview(context, attrs); } private void initview(context context, attributeset attrs) { mpaint = new paint(paint.anti_alias_flag); mpaint.setcolor(color.green); mpaint.setstyle(paint.style.fill); typedarray ta = context.obtainstyledattributes(attrs, r.styleable.volumneview); if (ta != null) { mcount = ta.getint(r.styleable.volumneview_count, 6); ta.recycle(); } } public volumneview(context context, attributeset attrs) { this(context, attrs, 0); } public volumneview(context context) { this(context, null); } @override protected void onsizechanged(int w, int h, int oldw, int oldh) { super.onsizechanged(w, h, oldw, oldh); mwidth = getmeasuredwidth(); mrectheight = getmeasuredheight(); mrectwidth = (int) (mwidth * 0.8 / mcount); mlineargradient = new lineargradient(0, 0, mrectwidth, mrectheight, color.green, color.yellow, tilemode.clamp); mpaint.setshader(mlineargradient); } @override protected void ondraw(canvas canvas) { super.ondraw(canvas); for (int i = 0; i < mcount; i++) { mrandom = math.random(); mcurrentheight = (float) (mrectheight * mrandom); float width = (float) (mwidth * 0.4 / 2 + offset); canvas.drawrect(width + i * mrectwidth, mcurrentheight, width + (i + 1) * mrectwidth, mrectheight, mpaint); } postinvalidatedelayed(300); }
最终,运行效果如下:
后记,通过这两个简单控件,相信大家对于自定义控件基本步骤有说了解,当然,要真正做好自定义控件的话,我们还需要按这个步骤一步步的来,加油!