参考资料
kelin//view的绘制流程,比较详细的过源码 有注释*
自定义View控件
饼图
打钩提示
Loading进度条(绚丽版)http://www.gcssloop.com/customview/Canvas_PictureText
雷达图(蜘蛛网图)http://www.gcssloop.com/customview/Path_Basic
弹性的圆 http://www.jianshu.com/p/791d3a791ec2
小飞机沿路径效果http://www.gcssloop.com/customview/Path_PathMeasure
Matrix 打造个性的图片预览与多点触控 http://www.imooc.com/learn/239
setPolyToPoly制造3D效果http://blog.csdn.net/lmj623565791/article/details/44278417
3D立体旋转 http://www.gcssloop.com/customview/matrix-3d-camera
九宫格RecyclerView左滑删除http://www.jianshu.com/p/304707754ff9
自定义View-坐标系
-View的坐标系是相对于父控件而言的
-MotionEvent中的get()和getRaw的区别
自定义View-角度与弧度
屏幕坐标系中增大方向为顺时针方向,圆一周对应的角度为360度,对应的弧度为2π。
公式 : 180/π = deg(角度)/rad(弧度)
Math.toDegrees() 弧度转化为角度
Math.toRadians() 角度转化为弧度
自定义View-颜色
```Java
int color = Color.Gray; //灰色
int color = Color.argb(127,255,0,0); //半透明红色
int color = 0xaaff0000; //带透明度的红色
int color = getResources().getColor(R.color.myColor);
```
``` xml
<color name="red">#f00</color> //16位低精度-不带透明通道红色
<color name="red">#af00</color> //16位低精度-带透明通道红色
<color name="red">#ff0000</color> //32位高精度-不带透明通道红色
<color name="red">#aaff0000</color> //32位高精度-带透明通道红色
```
自定义View-分类与流程
-构造函数
//一般直接new一个View的时候使用
public void SloopView(Context context)
//一般在layout文件中调用的时候使用,关于它所有属性会被传入attrs
public void SloopView(Context context,AttributeSet attrs)
public void SloopView(Context context,AttributeSet attrs,int defStyleAttr)
public void SloopView(Context context,AttributeSet attrs,int defStyleAttr,int defStyleRes)
-onMeasure
MeasureSpec.getSize(widthMeasureSpec); //宽度的确切数值
MeasureSpec.getMode(widthMeasureSpec); //宽度的测量模式
UNSPECIFIED //子View可以设置为任意大小
EXACTLY //父控件已经确切的指定了子View的大小 match_parent || 100dp
AT_MOST //子View具体大小没有尺寸限制,上限一般为父View大小 wrap_content
方法内修改宽高后调用setMeasuredDimension( widthsize, heightsize);
-onSizeChanged
View的大小不仅由View本身控制,而且受父控件的影响,所以我们在确定View大小的时候最好使用系统提供的onSizeChanged回调函数
```java
@Override
protected void onSizeChanged(intw,inth,intoldw,intoldh){
super.onSizeChanged(w,h,oldw,oldh);
}
```
-onLayout
确定子View的位置,在自定义ViewGroup中会用到,他调用的是子View的layout函数
-onDraw
自定义View-Canvas绘制图形
-常用操作速查
-Paint
setAntiAlias 抗锯齿
setColor 画笔颜色
setARGB 画笔argb值
setAlpha alpha值
setTextSize 字体尺寸
setTypeface 设置或清除字体样式
setTextAlign 左对齐(LEFT),居中对齐(CENTER),右对齐(RIGHT)
measureText 测量文本大小(注意,请在设置完文本各项参数后调用)
setStyle 画笔模式 //Paint.Style.STROKE描边 - FILL填充 - FILL_AND_STROKE描边加填充
setStrokeWith 画笔宽度
setStrokeCap 画笔笔触风格 Paint.Cap.ROUND圆形
getColor 得到画笔颜色
getAlpha 得到alpha值
-关于圆角矩形
// 第一种
RectFrectF=newRectF(100,100,800,400);
canvas.drawRoundRect(rectF,30,30,mPaint);
// 第二种 API>=21
canvas.drawRoundRect(100,100,800,400,30,30,mPaint);
与矩形相比,圆角矩形多出2个参数 rx和ry。
RectFrectF=newRectF(100,100,800,400);
//当rx为(800-100/2)宽的一半,ry为矩形高的一半时,即和椭圆一个效果。若矩形为正方形,则效果为一个圆
canvas.drawRoundRect(rectF,350,150,mPaint);
//当rx和ry大于矩形宽高一半的时候,是无法计算出圆弧的,方法会自动修正按照一半处理
canvas.drawRoundRect(rectF,700,400,mPaint);
-关于圆弧
drawArc(@NonNull RectFoval,float startAngle,float sweepAngle,boolean useCenter,@NonNull Paint paint)
startAngle// 开始角度
sweepAngle// 扫过角度
useCenter// 是否使用中心
```java
RectF rectF=new RectF(100,100,600,600);// 绘制背景矩形mPaint.setColor(Color.GRAY);canvas.drawRect(rectF,mPaint);// 绘制矩形mPaint.setColor(Color.BLUE);canvas.drawArc(rectF,0,90,false,mPaint);// 绘制圆弧
RectFrectF2=new RectF(100,700,600,1200);// 绘制背景矩形mPaint.setColor(Color.GRAY);canvas.drawRect(rectF2,mPaint);// 绘制矩形mPaint.setColor(Color.BLUE);canvas.drawArc(rectF2,0,90,true,mPaint);// 绘制圆弧
```
自定义view-Canvas画布操作
-位移Translate
注意:位移是基于当前位置移动,而不是每次都基于屏幕左上角的原始坐标点(0,0)移动。
// 在坐标原点绘制一个黑色圆形mPaint.setColor(Color.BLACK);canvas.translate(200,200);canvas.drawCircle(0,0,100,mPaint);
// 在坐标原点绘制一个蓝色圆形mPaint.setColor(Color.BLUE);canvas.translate(200,200);canvas.drawCircle(0,0,100,mPaint);
-缩放Scale
public void scale(float sx,float sy)
public final void scale(float sx,float sy,float px,float py)
和位移(translate)一样,缩放也是可以叠加的。
缩放比例(sx,sy)取值范围详解:
代码:
结果:
-旋转Rotate
代码:
结果:
-错切Skew
public void skew(float sx,float sy)
参数含义:
float sx:将画布在x方向上倾斜相应的角度,sx倾斜角度的tan值,
float sy:将画布在y轴方向上倾斜相应的角度,sy为倾斜角度的tan值.
代码:
结果:
-快照(save)和回滚(restore)
画布的操作是不可逆的,会对后续的操作产生影响,所以会对画布的状态进行保存和回滚。
一般用法为:
save();//保存状态
...//具体操作
restore();//回滚到之前的状态
详细用法可参考 http://www.gcssloop.com/customview/Canvas_Convert
自定义View-Canvas图片文字
1-drawPicture
Picture并不是画图片,而是录制Canvas操作的录像机!
Picture的相关方法
代码:
结果:
2-drawBitmap
通常绘制Bitmap 都是读取已有的图片,转换为Bitmap并绘制在Canvas上。
一般使用BitmapFactory
代码:
结果:
实例:
注意:图片是一组连续的图片组合成为的一张图。如果仅使用一张图想实现效果会有问题,截取的src图片区域会在dst区域会自动缩放。
3-绘制文字
第一类
x,y两个参数是指定文本绘制两个基线,x默认在字符串左侧,y默认在字符串下方
start, end两个参数指定了字符串的取值区间 [start,end)
index, count两个参数指定字符数组的起始下标 和 长度
第二类
float[] pos参数,指定了每个字符的坐标,API16已废弃。不建议使用