Android自定义View(一) -- 初识

前言:

公司近来业务调整,学习iOS开发有段时间,第一个iOS项目正在被库克百般蹂躏,审核一直进行中。
通过iOS和Android开发的对比,能体会到两种开发中不同的理念,例如iOS系统控件及动画,自带绚丽流程效果,这让Android开发人员欣羡不已。
在当前很多公司,iOS和Android共用同一套设计图的情况下,iOS中很多系统控件可以实现的效果,在Android都需要开发者自己去实现,这里就少不了自定义View。
但是实际开发中,很少在自定义View中下功夫,很多效果都是根据网友开源项目修改,虽然说要避免重复造轮子,但是起码基础要掌握好,才会在面对新需求前不慌不乱,
所以趁着项目间歇期,将之前一直欠缺的自定义View部分,一步一步提升起来。


本文计划根据HenCoder系列文章进行学习,所以代码风格及博文素材可能会摘自其中。


自定义概括:

自定义实现要重写onDraw方法,其中关键是使用Canvas绘制出要实现的View。

  • Canvas绘制:
    Canvas绘制方法:通过drawxxx()各种方法绘制相应形状图案;
    Canvas 的辅助类方法:负责范围裁切和实现图形的几何变换。
  • Paint
    Paint的功能很强大,但是一开始我们只需要了解它的基本功能,可以设置线条粗细,实心空心,线条颜色等等,负责绘制的View的各种属性

自定义开始:onDraw()

自定义绘制的上手非常容易:提前创建好 Paint 对象,重写 onDraw(),把绘制代码写在 onDraw() 里面,就是自定义绘制最基本的实现。大概就像这样:


image.png

就这么简单。所以关于 onDraw() 其实没什么好说的,一个很普通的方法重写,唯一需要注意的是别漏写了 super.onDraw()。

Canvas.drawXXX() 和 Paint 基础

Canvas下所有以draw开头的方法,例如 drawLines()、drawColor()、drawCircle()。
Paint使用以下常用方法:
paint1.setAntiAlias(true); //开启抗锯齿
paint1.setColor(Color.parseColor("#000000")); //设置线条颜色
paint1.setStrokeWidth(50); //设置线条宽度
paint1.setStyle(Paint.Style.STROKE); //设置空心

1. canvas.drawColor(int color)绘制颜色

canvas.drawColor()不需要Paint,使用drawColor()设置颜色


image.png
image.png

2. canvas.drawRect(RectF rect, Paint paint) / drawRect(Rect r, Paint paint) / drawRect(float left, float top, float right, float bottom, Paint paint) 画矩形,共三个重载方法,用法相似

image.png

left、top为矩形左上角坐标, right、bottom为右下角坐标

image.png

3. canvas.drawCircle(float cx, float cy, float radius, Paint paint)画圆

cx,cy为圆心坐标,radius圆半径
设置Paint

image.png

画圆

image.png
image.png

4. canvas.drawPoint(float x, float y, Paint paint) 画点

x,y为点坐标, 点的大小通过 paint.setStrokeWidth(width) 来设置;点的形状通过 paint.setStrokeCap(cap) 来设置:ROUND 画出来是圆形的点,SQUARE 或 BUTT 画出来是方形的点

image.png
image.png

画点还有两个方法

drawPoints(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint)

可以批量画点,数组pts内为多个点的坐标,offset为跳过数组中前几个点,count表示跳过offset个点后开始画几个点。

5. canvas.drawOval(RectF oval, Paint paint) 绘制椭圆

画椭圆
image.png

6. canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint) / drawLines(float[] pts, int offset, int count, Paint paint) /drawLines(float[] pts, Paint paint) 画线

共三个重载方法,第一个画一根线,startX/startY,起点坐标, stopX/stopY,终点坐标
后两个方法和画点方法一样理解

image.png
image.png
image.png

7. canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) / drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 绘制圆弧或者扇形

drawArc() 是使用一个椭圆来描述弧形的。left, top, right, bottom 描述的是这个弧形所在的椭圆;startAngle 是弧形的起始角度(x 轴的正向,即正右的方向,是 0 度的位置;顺时针为正角度,逆时针为负角度),sweepAngle 是弧形划过的角度;useCenter 表示是否连接到圆心,如果不连接到圆心,就是弧形,如果连接到圆心,就是扇形

image.png
image.png
image.png

8. drawRoundRect(RectF rect, float rx, float ry, Paint paint) / drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 绘制圆角矩形

rx、ry为圆角横向半径和纵向半径

image.png
image.png

9. drawPath(Path path, Paint paint) 画自定义图形

Path 可以描述直线、二次曲线、三次曲线、圆、椭圆、弧形、矩形、圆角矩形。把这些图形结合起来,就可以描述出很多复杂的图形。下面我就说一下具体的怎么把这些图形描述出来。

Path 有两类方法,一类是直接描述路径的,另一类是辅助的设置或计算。
这部分内容暂不展开,内容较多。

image.png
image.png
image.png

10. drawText(String text, float x, float y, Paint paint) 绘制文字

image.png
image.png
image.png

自定义View中onDraw方法主要绘制方法基本就是以上内容,通过上面方法,已经可以绘制一些简单内容,后面再深入进行学习。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • 系列文章之 Android中自定义View(一)系列文章之 Android中自定义View(二)系列文章之 And...
    YoungerDev阅读 4,361评论 3 11
  • 【Android 自定义View之绘图】 基础图形的绘制 一、Paint与Canvas 绘图需要两个工具,笔和纸。...
    Rtia阅读 11,623评论 5 35
  • 一、概述 1. 四线格与基线 小时候,我们在刚开始学习写字母时,用的本子是四线格的,我们必须把字母按照规则写在四线...
    addapp阅读 7,549评论 2 16
  • 现在的我除了吃饭睡觉,上班打卡,下楼取餐,然后就了无生趣,坐在床上开直播,写文章,最近没有唱歌,但是有听歌,虽然有...
    东方不败哈哈哈哈阅读 86评论 1 0
  • 夢行者 2018.1.21 学习:上午效率不高,下午没有午睡接着学,差不多4个多小时,学习的时候总觉得时间...
    UP夢行者阅读 137评论 0 0