版权声明:本文为博主原创文章,未经博主容许不得转载html
系列教程:Android开发之从零开始系列java
源码:AnliaLee/BookPage,欢迎starandroid
你们要是看到有错误的地方或者有啥好的建议,欢迎留言评论git
前言:前几期博客中咱们分析了 书籍翻页效果各部分的绘制原理,虽然效果都实现了,但测试过程当中却发现咱们的View翻起页来彷佛 不是很流畅,这期便带你们一块儿对View进行 性能优化github
本篇只着重于思路和实现步骤,里面用到的一些知识原理不会很是细地拿来说,若是有不清楚的api或方法能够在网上搜下相应的资料,确定有大神讲得很是清楚的,我这就不献丑了。本着认真负责的精神我会把相关知识的博文连接也贴出来(其实就是懒不想写那么多哈哈),你们能够自行传送。为了照顾第一次阅读系列博客的小伙伴,本篇会出现一些在以前系列博客就讲过的内容,看过的童鞋自行跳过该段便可canvas
国际惯例,先上效果图api
在进行性能优化以前,首先感谢@布隆提出的建议:BookPageView做为一个完整的书页自定义View,那么对触摸事件的管理建议放在View的onTouchEvent中,而不是在外部setOnTouchListener,这样保证了View功能的完整性也提升了使用上的方便性。那么按照这样的要求,修改BookPageView数组
public class BookPageView extends View {
//省略部分代码...
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
float x = event.getX();
float y = event.getY();
if(x<=viewWidth/3){//左
style = STYLE_LEFT;
setTouchPoint(x,y,style);
}else if(x>viewWidth/3 && y<=viewHeight/3){//上
style = STYLE_TOP_RIGHT;
setTouchPoint(x,y,style);
}else if(x>viewWidth*2/3 && y>viewHeight/3 && y<=viewHeight*2/3){//右
style = STYLE_RIGHT;
setTouchPoint(x,y,style);
}else if(x>viewWidth/3 && y>viewHeight*2/3){//下
style = STYLE_LOWER_RIGHT;
setTouchPoint(x,y,style);
}else if(x>viewWidth/3 && x<viewWidth*2/3 && y>viewHeight/3 && y<viewHeight*2/3){//中
style = STYLE_MIDDLE;
}
break;
case MotionEvent.ACTION_MOVE:
setTouchPoint(event.getX(),event.getY(),style);
break;
case MotionEvent.ACTION_UP:
startCancelAnim();
break;
}
return true;
}
}
复制代码
修改以后咱们在Activity中再也不须要调用setOnTouchListener了,在xml样式文件中也再也不须要设置android:clickable="true"属性性能优化
相关博文连接
以前完成全部效果的绘制后,在手机上测试了下,发现翻页不是很流畅,感受卡卡的,遂打开手机的GPU呈现模式分析,从新试下翻页,而后。。。
Σ( ° △ °|||)︴尼玛手机这是要炸了么,赶忙翻代码找缘由。一番检查后,发现View每次在执行触摸翻页操做时,都新建了A、B、C区域内容Bitmap,形成了没必要要的开销,实际上若是各区域显示内容不变的状况下,内容Bitmap只须要初始化一次,之后每次绘制时仅须要重用原来的Bitmap便可。同理,View中能重用的对象就要尽可能重用,修改咱们的BookPageView
public class BookPageView extends View {
//省略部分代码...
private float[] mMatrixArray = { 0, 0, 0, 0, 0, 0, 0, 0, 1.0f };
private Matrix mMatrix;
private GradientDrawable drawableLeftTopRight;
private GradientDrawable drawableLeftLowerRight;
private GradientDrawable drawableRightTopRight;
private GradientDrawable drawableRightLowerRight;
private GradientDrawable drawableHorizontalLowerRight;
private GradientDrawable drawableBTopRight;
private GradientDrawable drawableBLowerRight;
private GradientDrawable drawableCTopRight;
private GradientDrawable drawableCLowerRight;
private Bitmap pathAContentBitmap;//A区域内容Bitmap
private Bitmap pathBContentBitmap;//B区域内容Bitmap
private Bitmap pathCContentBitmap;//C区域内容Bitmap
private void init(Context context, @Nullable AttributeSet attrs){
//省略部分代码...
mMatrix = new Matrix();
createGradientDrawable();
}
private void drawPathAContentBitmap(Bitmap bitmap,Paint pathPaint){
Canvas mCanvas = new Canvas(bitmap);
//下面开始绘制区域内的内容...
mCanvas.drawPath(getPathDefault(),pathPaint);
mCanvas.drawText("这是在A区域的内容...AAAA", viewWidth-260, viewHeight-100, textPaint);
//结束绘制区域内的内容...
}
private void drawPathBContentBitmap(Bitmap bitmap,Paint pathPaint){
Canvas mCanvas = new Canvas(bitmap);
//下面开始绘制区域内的内容...
mCanvas.drawPath(getPathDefault(),pathPaint);
mCanvas.drawText("这是在B区域的内容...BBBB", viewWidth-260, viewHeight-100, textPaint);
//结束绘制区域内的内容...
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int height = measureSize(defaultHeight, heightMeasureSpec);
int width = measureSize(defaultWidth, widthMeasureSpec);
setMeasuredDimension(width, height);
viewWidth = width;
viewHeight = height;
a.x = -1;
a.y = -1;
pathAContentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
drawPathAContentBitmap(pathAContentBitmap,pathAPaint);
pathBContentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
drawPathBContentBitmap(pathBContentBitmap,pathBPaint);
pathCContentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
drawPathAContentBitmap(pathCContentBitmap,pathCPaint);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(a.x==-1 && a.y==-1){
drawPathAContent(canvas,getPathDefault());
}else {
if(f.x==viewWidth && f.y==0){
drawPathAContent(canvas,getPathAFromTopRight());
drawPathCContent(canvas,getPathAFromTopRight());
drawPathBContent(canvas,getPathAFromTopRight());
}else if(f.x==viewWidth && f.y==viewHeight){
drawPathAContent(canvas,getPathAFromLowerRight());
drawPathCContent(canvas,getPathAFromLowerRight());
drawPathBContent(canvas,getPathAFromLowerRight());
}
}
}
/** * 初始化各区域阴影GradientDrawable */
private void createGradientDrawable(){
int deepColor = 0x33333333;
int lightColor = 0x01333333;
int[] gradientColors = new int[]{lightColor,deepColor};//渐变颜色数组
drawableLeftTopRight = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
drawableLeftTopRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
drawableLeftLowerRight = new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT, gradientColors);
drawableLeftLowerRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
deepColor = 0x22333333;
lightColor = 0x01333333;
gradientColors = new int[]{deepColor,lightColor,lightColor};
drawableRightTopRight = new GradientDrawable(GradientDrawable.Orientation.BOTTOM_TOP, gradientColors);
drawableRightTopRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
drawableRightLowerRight = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, gradientColors);
drawableRightLowerRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
deepColor = 0x44333333;
lightColor = 0x01333333;
gradientColors = new int[]{lightColor,deepColor};//渐变颜色数组
drawableHorizontalLowerRight = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);;
drawableHorizontalLowerRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
deepColor = 0x55111111;
lightColor = 0x00111111;
gradientColors = new int[] {deepColor,lightColor};//渐变颜色数组
drawableBTopRight =new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,gradientColors);
drawableBTopRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);//线性渐变
drawableBLowerRight =new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT,gradientColors);
drawableBLowerRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
deepColor = 0x55333333;
lightColor = 0x00333333;
gradientColors = new int[]{lightColor,deepColor};//渐变颜色数组
drawableCTopRight = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, gradientColors);
drawableCTopRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
drawableCLowerRight = new GradientDrawable(GradientDrawable.Orientation.RIGHT_LEFT, gradientColors);
drawableCLowerRight.setGradientType(GradientDrawable.LINEAR_GRADIENT);
}
/** * 绘制A区域内容 * @param canvas * @param pathA */
private void drawPathAContent(Canvas canvas, Path pathA){
canvas.save();
canvas.clipPath(pathA, Region.Op.INTERSECT);//对绘制内容进行裁剪,取和A区域的交集
canvas.drawBitmap(pathAContentBitmap, 0, 0, null);
if(style.equals(STYLE_LEFT) || style.equals(STYLE_RIGHT)){
drawPathAHorizontalShadow(canvas,pathA);
}else {
drawPathALeftShadow(canvas,pathA);
drawPathARightShadow(canvas,pathA);
}
canvas.restore();
}
/** * 绘制A区域左阴影 * @param canvas */
private void drawPathALeftShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
int left;
int right;
int top = (int) e.y;
int bottom = (int) (e.y+viewHeight);
GradientDrawable gradientDrawable;
if (style.equals(STYLE_TOP_RIGHT)) {
gradientDrawable = drawableLeftTopRight;
left = (int) (e.x - lPathAShadowDis /2);
right = (int) (e.x);
} else {
gradientDrawable = drawableLeftLowerRight;
left = (int) (e.x);
right = (int) (e.x + lPathAShadowDis /2);
}
Path mPath = new Path();
mPath.moveTo(a.x- Math.max(rPathAShadowDis, lPathAShadowDis) /2,a.y);
mPath.lineTo(d.x,d.y);
mPath.lineTo(e.x,e.y);
mPath.lineTo(a.x,a.y);
mPath.close();
canvas.clipPath(pathA);
canvas.clipPath(mPath, Region.Op.INTERSECT);
float mDegrees = (float) Math.toDegrees(Math.atan2(e.x-a.x, a.y-e.y));
canvas.rotate(mDegrees, e.x, e.y);
gradientDrawable.setBounds(left,top,right,bottom);
gradientDrawable.draw(canvas);
}
/** * 绘制A区域右阴影 * @param canvas */
private void drawPathARightShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
float viewDiagonalLength = (float) Math.hypot(viewWidth, viewHeight);//view对角线长度
int left = (int) h.x;
int right = (int) (h.x + viewDiagonalLength*10);//须要足够长的长度
int top;
int bottom;
GradientDrawable gradientDrawable;
if (style.equals(STYLE_TOP_RIGHT)) {
gradientDrawable = drawableRightTopRight;
top = (int) (h.y- rPathAShadowDis /2);
bottom = (int) h.y;
} else {
gradientDrawable = drawableRightLowerRight;
top = (int) h.y;
bottom = (int) (h.y+ rPathAShadowDis /2);
}
gradientDrawable.setBounds(left,top,right,bottom);
Path mPath = new Path();
mPath.moveTo(a.x- Math.max(rPathAShadowDis, lPathAShadowDis) /2,a.y);
// mPath.lineTo(i.x,i.y);
mPath.lineTo(h.x,h.y);
mPath.lineTo(a.x,a.y);
mPath.close();
canvas.clipPath(pathA);
canvas.clipPath(mPath, Region.Op.INTERSECT);
float mDegrees = (float) Math.toDegrees(Math.atan2(a.y-h.y, a.x-h.x));
canvas.rotate(mDegrees, h.x, h.y);
gradientDrawable.draw(canvas);
}
/** * 绘制A区域水平翻页阴影 * @param canvas */
private void drawPathAHorizontalShadow(Canvas canvas, Path pathA){
canvas.restore();
canvas.save();
canvas.clipPath(pathA, Region.Op.INTERSECT);
int maxShadowWidth = 30;//阴影矩形最大的宽度
int left = (int) (a.x - Math.min(maxShadowWidth,(rPathAShadowDis/2)));
int right = (int) (a.x);
int top = 0;
int bottom = viewHeight;
GradientDrawable gradientDrawable = drawableHorizontalLowerRight;
gradientDrawable.setBounds(left,top,right,bottom);
float mDegrees = (float) Math.toDegrees(Math.atan2(f.x-a.x,f.y-h.y));
canvas.rotate(mDegrees, a.x, a.y);
gradientDrawable.draw(canvas);
}
/** * 绘制B区域内容 * @param canvas * @param pathA */
private void drawPathBContent(Canvas canvas, Path pathA){
canvas.save();
canvas.clipPath(pathA);//裁剪出A区域
canvas.clipPath(getPathC(),Region.Op.UNION);//裁剪出A和C区域的全集
canvas.clipPath(getPathB(), Region.Op.REVERSE_DIFFERENCE);//裁剪出B区域中不一样于与AC区域的部分
canvas.drawBitmap(pathBContentBitmap, 0, 0, null);
drawPathBShadow(canvas);
canvas.restore();
}
/** * 绘制B区域阴影,阴影左深右浅 * @param canvas */
private void drawPathBShadow(Canvas canvas){
int deepOffset = 0;//深色端的偏移值
int lightOffset = 0;//浅色端的偏移值
float aTof =(float) Math.hypot((a.x - f.x),(a.y - f.y));//a到f的距离
float viewDiagonalLength = (float) Math.hypot(viewWidth, viewHeight);//对角线长度
int left;
int right;
int top = (int) c.y;
int bottom = (int) (viewDiagonalLength + c.y);
GradientDrawable gradientDrawable;
if(style.equals(STYLE_TOP_RIGHT)){//f点在右上角
//从左向右线性渐变
gradientDrawable = drawableBTopRight;
left = (int) (c.x - deepOffset);//c点位于左上角
right = (int) (c.x + aTof/4 + lightOffset);
}else {
//从右向左线性渐变
gradientDrawable = drawableBLowerRight;
left = (int) (c.x - aTof/4 - lightOffset);//c点位于左下角
right = (int) (c.x + deepOffset);
}
gradientDrawable.setBounds(left,top,right,bottom);//设置阴影矩形
float rotateDegrees = (float) Math.toDegrees(Math.atan2(e.x- f.x, h.y - f.y));//旋转角度
canvas.rotate(rotateDegrees, c.x, c.y);//以c为中心点旋转
gradientDrawable.draw(canvas);
}
/** * 绘制C区域内容 * @param canvas * @param pathA */
private void drawPathCContent(Canvas canvas, Path pathA){
canvas.save();
canvas.clipPath(pathA);
canvas.clipPath(getPathC(), Region.Op.REVERSE_DIFFERENCE);//裁剪出C区域不一样于A区域的部分
canvas.drawPath(getPathC(),pathCPaint);//绘制背景色
float eh = (float) Math.hypot(f.x - e.x,h.y - f.y);
float sin0 = (f.x - e.x) / eh;
float cos0 = (h.y - f.y) / eh;
//设置翻转和旋转矩阵
mMatrixArray[0] = -(1-2 * sin0 * sin0);
mMatrixArray[1] = 2 * sin0 * cos0;
mMatrixArray[3] = 2 * sin0 * cos0;
mMatrixArray[4] = 1 - 2 * sin0 * sin0;
mMatrix.reset();
mMatrix.setValues(mMatrixArray);//翻转和旋转
mMatrix.preTranslate(-e.x, -e.y);//沿当前XY轴负方向位移获得 矩形A₃B₃C₃D₃
mMatrix.postTranslate(e.x, e.y);//沿原XY轴方向位移获得 矩形A4 B4 C4 D4
canvas.drawBitmap(pathCContentBitmap, mMatrix, null);
drawPathCShadow(canvas);
canvas.restore();
}
/** * 绘制C区域阴影,阴影左浅右深 * @param canvas */
private void drawPathCShadow(Canvas canvas){
int deepOffset = 1;//深色端的偏移值
int lightOffset = -30;//浅色端的偏移值
float viewDiagonalLength = (float) Math.hypot(viewWidth, viewHeight);//view对角线长度
int midpoint_ce = (int) (c.x + e.x) / 2;//ce中点
int midpoint_jh = (int) (j.y + h.y) / 2;//jh中点
float minDisToControlPoint = Math.min(Math.abs(midpoint_ce - e.x), Math.abs(midpoint_jh - h.y));//中点到控制点的最小值
int left;
int right;
int top = (int) c.y;
int bottom = (int) (viewDiagonalLength + c.y);
GradientDrawable gradientDrawable;
if (style.equals(STYLE_TOP_RIGHT)) {
gradientDrawable = drawableCTopRight;
left = (int) (c.x - lightOffset);
right = (int) (c.x + minDisToControlPoint + deepOffset);
} else {
gradientDrawable = drawableCLowerRight;
left = (int) (c.x - minDisToControlPoint - deepOffset);
right = (int) (c.x + lightOffset);
}
gradientDrawable.setBounds(left,top,right,bottom);
float mDegrees = (float) Math.toDegrees(Math.atan2(e.x- f.x, h.y - f.y));
canvas.rotate(mDegrees, c.x, c.y);
gradientDrawable.draw(canvas);
}
}
复制代码
修改后从新测试,卡顿的问题获得了明显改善(开了手机录屏对性能会有点影响),如图
相关博文连接
Android 经常使用的性能分析工具详解:GPU呈现模式, TraceView, Systrace, HirearchyViewer
通过优化重用Bitmap后,测试中又发现了新的问题,当触摸点向左下角方向移动到必定距离时,会发现卡顿现象愈来愈明显,超过必定的临界值后,卡顿现象又忽然消失了,以下图所示
经过一番调试后,发现是这句代码致使的绘制卡顿(红框处)
那么为何咱们绘制那么多阴影没有问题,恰恰是这个drawPath致使了卡顿呢?咱们定格绘制卡顿的时刻,观察Gpu呈现模式分析的条形图
能够发现深绿色和红色线条特别长,其中深绿色线条表示主线程(Main Thread)执行任务的时间,过长意味着主线程执行了太多的任务,致使UI渲染跟不上vSync的信号而出现掉帧的状况;红色线条则表示Android进行2D渲染显示列表(Display List)的时间。利用Systrace测试工具观察具体的绘制时间分布,找到绘制卡顿中的一帧
能够发现Choreographer.doFrame耗时过长,咱们利用TraceView测试工具分析Choreographer.doFrame,一层层向下寻找耗时过长的子方法,最后定位到了updateRootDisplayList和nSyncAndDrawFrame方法,如图所示
这两个方法的做用是什么呢?咱们要从Android绘制View的过程提及,经过网上查阅的资料(相关资料博文已贴出),简单总结一下:在使用GPU进行绘制前,须要对绘制的内容进行渲染,即须要渲染Display List。Display List包含了Android应用程序窗口全部的绘制命令,只要对Display List进行了渲染,就能够获得整个Android应用程序窗口的UI,而Android应用程序窗口的UI渲染分为两步
- 第一步是由应用程序进程的Main Thread构建Display List,即updateRootDisplayList方法,对应Gpu呈现模式分析的深绿色线条,其中软件渲染的子视图须要先绘制在一个Bitmap上,而后这个Bitmap再记录在父视图的Display List中,绘制的视图内容越多,构建Display List的耗时越长
- 第二步由应用程序进程的Render Thread渲染Display List,即nSyncAndDrawFrame方法,对应Gpu呈现模式分析的红色线条,其中执行渲染须要获得Main Thread的通知,此通知在Main Thread与Render Thread信息同步完毕后发出。信息同步过程当中,Display List引用到的Bitmap会封装成Open GL纹理上传至GPU。当所有Open GL纹理上传完毕,说明引用到的Bitmap所有同步完成。一样,绘制的视图内容越多,则引用到的Bitmap越大,进而致使上传耗时增长,Render Thread执行渲染等待通知的时间也就相应变长
分析完绘制过程后,回到Systrace工具的测试图,能够看到Open GL纹理上传耗时过长,绘制的Path太大了,如图红框区域
咱们以前经过调试代码知道“罪魁祸首”是canvas.drawPath(getPathC(),pathCPaint)这句代码,说明是PathC太大了。咱们知道PathC是由i、d、b、a、k五个点连线而成,将触摸点移动到绘制卡顿的区域,发现i的Y坐标远小于0,证实此时PathC的面积很是大,咱们的结论是正确的,如图
那为何又会出现触摸点移动到某个临界值后卡顿现象忽然消失的现象呢?查阅资料后知道,Open GL纹理是有大小限制的,若是超出这个限制,那么就会导至某些Bitmap不能做为Open GL纹理上传到GPU,利用Systrace工具找到此临界点,测试结果见下图
能够发现卡顿忽然消失的缘由确实是Open GL纹理太大致使不能上传至GPU,因此少了这个上传的过程绘制速度也就变快了。既然知道了缘由,那就动手改代码吧,改动很是简单,只须要在绘制A、B、C区域以前为canvas绘制背景色便可,修改BookPageView
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.YELLOW);//绘制和C区域颜色相同的背景色
if(a.x==-1 && a.y==-1){
drawPathAContent(canvas,getPathDefault(),pathAPaint);
}else {
if(f.x==viewWidth && f.y==0){
drawPathAContent(canvas,getPathAFromTopRight(),pathAPaint);
drawPathCContent(canvas,getPathAFromTopRight(),pathCContentPaint);
drawPathBContent(canvas,getPathAFromTopRight(),pathBPaint);
}else if(f.x==viewWidth && f.y==viewHeight){
beginTrace("drawPathA");
drawPathAContent(canvas,getPathAFromLowerRight(),pathAPaint);
endTrace();
beginTrace("drawPathC");
drawPathCContent(canvas,getPathAFromLowerRight(),pathCContentPaint);
endTrace();
beginTrace("drawPathB");
drawPathBContent(canvas,getPathAFromLowerRight(),pathBPaint);
endTrace();
}
}
/** * 绘制C区域内容 * @param canvas * @param pathA * @param pathPaint */
private void drawPathCContent(Canvas canvas, Path pathA){
canvas.save();
canvas.clipPath(pathA);
canvas.clipPath(getPathC(), Region.Op.REVERSE_DIFFERENCE);//裁剪出C区域不一样于A区域的部分
// canvas.drawPath(getPathC(),pathCPaint);//干掉这个(* ̄︿ ̄)
float eh = (float) Math.hypot(f.x - e.x,h.y - f.y);
float sin0 = (f.x - e.x) / eh;
float cos0 = (h.y - f.y) / eh;
//设置翻转和旋转矩阵
mMatrixArray[0] = -(1-2 * sin0 * sin0);
mMatrixArray[1] = 2 * sin0 * cos0;
mMatrixArray[3] = 2 * sin0 * cos0;
mMatrixArray[4] = 1 - 2 * sin0 * sin0;
mMatrix.reset();
mMatrix.setValues(mMatrixArray);//翻转和旋转
mMatrix.preTranslate(-e.x, -e.y);//沿当前XY轴负方向位移获得 矩形A₃B₃C₃D₃
mMatrix.postTranslate(e.x, e.y);//沿原XY轴方向位移获得 矩形A4 B4 C4 D4
canvas.drawBitmap(pathCContentBitmap, mMatrix, null);
drawPathCShadow(canvas);
canvas.restore();
}
复制代码
效果如图
至此本篇教程到此结束,书籍翻页效果的实现也暂时告一段落啦。若是你们看了感受还不错麻烦点个赞,大家的支持是我最大的动力~