Android自定义View——从零开始实现书籍翻页效果（性能优化篇）

}else if(x>viewWidth2/3 && y>viewHeight/3 && y<=viewHeight2/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<viewWidth2/3 && y>viewHeight/3 && y<viewHeight2/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"属性

---

各区域显示内容绘制优化（重用内容Bitmap）

相关博文链接

Android开发者选项——Gpu呈现模式分析

之前完成所有效果的绘制后，在手机上测试了下，发现翻页不是很流畅，感觉卡卡的，遂打开手机的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.xviewWidth && f.y0){
drawPathAContent(canvas,getPathAFromTopRight());
drawPathCContent(canvas,getPathAFromTopRight());
drawPathBContent(canvas,getPathAFromTopRight());
}else if(f.xviewWidth && f.yviewHeight){
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);
}

/**

文末

对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。 整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。

最后想要拿高薪实现技术提升薪水得到质的飞跃。最快捷的方式，就是有人可以带着你一起分析，这样学习起来最为高效，所以为了大家能够顺利进阶中高级、架构师，我特地为大家准备了一套高手学习的源码和框架视频等精品Android架构师教程，保证你学了以后保证薪资上升一个台阶。

当你有了学习线路，学习哪些内容，也知道以后的路怎么走了，理论看多了总要实践的。

进阶学习视频

附上：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题 （含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。）

[外链图片转存中…(img-ANx4YudV-1714452119192)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！