该博客主要时记录简单的自定义的View的使用:
学习Android的童鞋都知道,View这是最基本也是最重要的部分,在开发过程中,我们会创建许多需要实现特定功能的控件,这时我们就需要自己来实现自定义的控件。
首先,我们的控件需要继承自View和ViewGroup,当然也可以继承自Button,LinearLayout,该文章从最基础的讲起,就继承自View.
首先我们,实现一个控件,画出一圆。
代码就很简单了,如下:
public class SelfView extends View { private static final String TAG = "SelfView"; Paint redpaint; Paint bluepaint; public SelfView(Context context) { super(context); initPaint(); } public SelfView(Context context, AttributeSet attrs) { super(context, attrs); initPaint(); } public SelfView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initPaint(); } @Override protected void onDraw(Canvas canvas) { //参数一,二,是画的圆的圆心位置,参数三是圆的半径,参数四是画笔 canvas.drawCircle(500,500,300,bluepaint); canvas.drawCircle(500,500,100,redpaint); } public void initPaint() { redpaint = new Paint(); bluepaint = new Paint(); //设置画笔 redpaint.setColor(Color.RED);//绿色画笔 redpaint.setAntiAlias(true);//抗锯齿 bluepaint.setColor(Color.BLUE); bluepaint.setAntiAlias(true); } }以上代码中的构造方法,SelfView(Context context)是动态创建时的构造方法, SelfView(Context context, AttributeSet attrs)就是我们xml中使用这个控件时的构造方法,
在onDraw(Canvas canvas)方法里面,执行画操作,其中(100,100)是圆心坐标,30是半径,circlePaint是画笔。
画文字,我们需要一个文字区域,这样我们就需要两个画笔,分别画文字和矩形,代码如下:
public class SelfTextView extends View { Paint rectPaint;//矩形画笔 Paint textPaint;//文字画笔 Rect textBound; public SelfTextView(Context context) { super(context); initPaint(); } public SelfTextView(Context context, AttributeSet attrs) { super(context, attrs); initPaint(); } private void initPaint() { rectPaint = new Paint(); rectPaint.setColor(Color.GRAY); textPaint = new Paint(); textPaint.setColor(Color.BLUE); textPaint.setAntiAlias(true); textPaint.setTextSize(20);//设置文字大小 //在初始化画笔的时候初始化Rect textBound=new Rect();//文字边界 } @Override protected void onDraw(Canvas canvas) { // super.onDraw(canvas); canvas.drawRect(100, 100, 400, 300, rectPaint);//画放置文字的矩形区域 String str = "我是要画的文字"; textPaint.getTextBounds(str,0,str.length(),textBound);//要获取文字的边界 canvas.drawText(str,250-textBound.width()/2,200+textBound.height()/6,textPaint); } }实现的效果如下:
解释一下是怎么计算的,首先我已经画了一个矩形,
canvas.drawRect(100, 100, 400, 300, rectPaint);//画放置文字的矩形区域然后我就知道矩形的中心点x坐标是(400+100)/2=250,这时文字的宽是通过textBound得到为textBound.width(),所以文字的开始文字x坐标就是250-textBound.width()/2,然后再说y坐标,矩形中心的y坐标是(300+100)/2=200;文字的高是textBound.height(),按道理说,这时文字的中心点坐标应该是200-textBound.height()/2,但是请看下面drawText()的方法源码,这个y让传递的是@param y The y-coordinate of the baseline of the text being drawn,这里的baseline就是相当于汉语拼音本上写四条线的第三条线。所以这个y参数应该传递的是200+textBound.height()/6。
/** * Draw the text, with origin at (x,y), using the specified paint. The * origin is interpreted based on the Align setting in the paint. * * @param text The text to be drawn * @param x The x-coordinate of the origin of the text being drawn * @param y The y-coordinate of the baseline of the text being drawn * @param paint The paint used for the text (e.g. color, size, style) */ public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) { native_drawText(mNativeCanvasWrapper, text, 0, text.length(), x, y, paint.mBidiFlags, paint.getNativeInstance(), paint.mNativeTypeface); }
上面都是一些基础的实例,实际开发中肯定不会这么简单。但是原理都是相通的,只不过也许你要多定义几个画笔,计算上更加复杂,有的甚至计算过于复杂要关心对性能的影响等等。