一、setContentView是如何添加到屏幕上显示
1.顶层创建DecorView,是在PhoneWindow里使用
2.在DecordView添加ViewGroup
3.在ViewGroup去添加控件以及ViewGroup

二、view绘制大致流程

requestLayout和invalidate的区别:
requestLayout : 它是重新调用onMeasure、onLayout() 方法
invalidate : 重新调用onDraw的方法
三、深度解析UI测量的过程
DecorView的MeasureSpec的测量规则和计算:
LayoutParams.MATCH_PARENT: 最大模式,窗口大小,也就是windowSize的大小
LayoutParams.WRAP_CONTENT : 自适应模式,最大设置为decorView的大小
固定大小 : 精确模式,大小为LayoutParams的大小

自己写的控件的MeasureSpec的测量规则和计算
getChildMeasureSpec的参数讲解:
int spec : 父容器的测量格式
int padding : 父容器当前使用情况
int childDimension : 代表子空间LayoutParams的宽度、高度的大小


ViewGroup测量过程:onMeasure(测量子控件宽、高) --> setMeasuredDimension(设置测量父布局的宽、高,在自定义view中用的比较多)-->setMeasuredDimensionRaw(设置最终值)
View测量过程:onMeasure(测量自身宽、高) --> setMeasuredDimension(设置自身的宽、高,在自定义view中用的比较多)-->setMeasuredDimensionRaw(设置最终值)
四、深度解析UI布局的过程
ViewGroup : 调用onLayout的方法,调用child.layout递归来摆放子控件位置
View :调用view.layout通过left、right、top、buttom来确定自身位置
五、深度解析UI绘制的过程
1.Paint常用的API讲解

2.接口显示效果图
setStrokeJoin接口显示

setStrokeCap接口显示效果

3.代码演示以及展示效果

LinearGradient 线性渲染器展示效果

RadialGradient环形渲染器展示效果

SweepGradient扫描渲染器展示效果

BitmapShader 有三种不同模式展示,这里只展示两种效果


ComposeShader组合渲染图展示效果

六、涂层渲染混合模式讲解
1.常见使用的方法mPaint.setXfermode() 、ComposeShader、PorterDuffColorFilter
注意:在有些版本不支持硬件加速,所以使用涂层必须关掉硬件加速,可以看看刮刮卡实现,和这个原理很类似
2.十八种模式具体讲解
CLEAR : 绘制都不会提交到画布上
SRC :显示上层绘制图像
DST : 显示下层绘制图像
SRC_OVER : 正常绘制,上层居上显示
DST_OVER : 正常绘制,下层居上绘制
SRC_IN : 取两层交集的地方,显示上层
DST_IN : 取两层交集的地方,显示下层
SRC_OUT : 取上层绘制非交集部分,交集部分为透明
DST_OUT : 取下层绘制非交集部分,交集部分为透明
SRC_ATOP : 取上层交集部分和下层非交集部分
DST_ATOP : 取下层交集部分和上层非交集部分
XOR : 去除两图层交集地方
DARKEN : 取两层图全部区域,交集部分颜色变暗
LIGHTEN : 取两图层全部区域,交集部门颜色变亮
MULTIPLY : 取两图层交集地方,重叠地方颜色叠加
SCREEN : 取两图层全部区域,交集部分滤色
ADD : 取两图层全部区域,交集部分饱和度相加
OVERLAY :取两图层全部区域,交集部分叠加


七、图片做滤镜处理
1.去除颜色或者让某些颜色更亮

2.图片和颜色混合

3.修改图片颜色方法:修改偏移量、颜色数字变大或者变小

八、Canvas的使用
1.位置、形状变化的API接口

2.保存canvas画布的存储、恢复的API接口

网友评论