Android自定义View——从零开始实现书籍翻页效果（三）

最新推荐文章于 2024-03-16 14:50:09 发布
最新推荐文章于 2024-03-16 14:50:09 发布
阅读量3.3k 收藏 12
点赞数 2
分类专栏： android开发 文章标签： android android开发 android自定义view 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lly347705530/article/details/78389097
版权

版权声明：本文为博主原创文章，未经博主允许不得转载。
系列教程：Android开发之从零开始系列
源码：github.com/AnliaLee/BookPage，欢迎star

大家要是看到有错误的地方或者有啥好的建议，欢迎留言评论

前言：在上篇Android自定义View——从零开始实现书籍翻页效果（二）博客中，我们 补全了翻页效果以及增加了 取消翻页的动画，这期要教大家如何 向View填充内容

本篇只着重于思路和实现步骤，里面用到的一些知识原理不会非常细地拿来讲，如果有不清楚的api或方法可以在网上搜下相应的资料，肯定有大神讲得非常清楚的，我这就不献丑了。本着认真负责的精神我会把相关知识的博文链接也贴出来（其实就是懒不想写那么多哈哈），大家可以自行传送。为了照顾第一次阅读系列博客的小伙伴，本篇会出现一些在之前系列博客就讲过的内容，看过的童鞋自行跳过该段即可

国际惯例，先上效果图

目录
  • 绘制当前页（A区域）的内容
  • 绘制下一页（B区域）的内容
  • 绘制当前页（A区域）背面（C区域）的内容
绘制当前页（A区域）的内容
相关博文链接

Android中的裁剪中Region.Op参数的用法

A区域的内容，有可能包含文字，图案等各种元素，因此我们需要将这些统一绘制到一个Bitmap中，然后绘制到画布上，当然要记得裁剪这些内容，取其与A区域的交集，这样看起来才像将内容印在A区域中，修改BookPageView

public class BookPageView extends View {
    //省略部分代码...
    private Paint textPaint;//绘制文字画笔
    private void init(Context context, @Nullable AttributeSet attrs){
        //省略部分代码...
        textPaint = new Paint();
        textPaint.setColor(Color.BLACK);
        textPaint.setTextAlign(Paint.Align.CENTER);
        textPaint.setSubpixelText(true);//设置自像素。如果该项为true，将有助于文本在LCD屏幕上的显示效果。
        textPaint.setTextSize(30);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        bitmap = Bitmap.createBitmap((int) viewWidth, (int) viewHeight, Bitmap.Config.ARGB_8888);
        bitmapCanvas = new Canvas(bitmap);

        if(a.x==-1 && a.y==-1){
//            bitmapCanvas.drawPath(getPathDefault(),pathAPaint);
            drawPathAContent(bitmapCanvas,getPathDefault(),pathAPaint);
        }else {
            if(f.x==viewWidth && f.y==0){
//                bitmapCanvas.drawPath(getPathAFromTopRight(),pathAPaint);
                drawPathAContent(bitmapCanvas,getPathAFromTopRight(),pathAPaint);
            }else if(f.x==viewWidth && f.y==viewHeight){
//                bitmapCanvas.drawPath(getPathAFromLowerRight(),pathAPaint);
                drawPathAContent(bitmapCanvas,getPathAFromLowerRight(),pathAPaint);
            }

            bitmapCanvas.drawPath(getPathC(),pathCPaint);
            bitmapCanvas.drawPath(getPathB(),pathBPaint);
        }
        canvas.drawBitmap(bitmap,0,0,null);
    }

    /**
     * 绘制A区域内容
     * @param canvas
     * @param pathA
     * @param pathPaint
     */
    private void drawPathAContent(Canvas canvas, Path pathA, Paint pathPaint){
        Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
        Canvas contentCanvas = new Canvas(contentBitmap);

        //下面开始绘制区域内的内容...
        contentCanvas.drawPath(pathA,pathPaint);//绘制一个背景，用来区分各区域
        contentCanvas.drawText("这是在A区域的内容...AAAA", viewWidth-260, viewHeight-100, textPaint);

        //结束绘制区域内的内容...

        canvas.save();
        canvas.clipPath(pathA, Region.Op.INTERSECT);//对绘制内容进行裁剪，取和A区域的交集
        canvas.drawBitmap(contentBitmap, 0, 0, null);
        canvas.restore();
    }
}

效果如图

绘制下一页（B区域）的内容

绘制B区域内容的原理和A区域一样，区别在于B区域内容取的是B区域不同于AC区域全集的部分，代码如下

public class BookPageView extends View {
    private void init(Context context, @Nullable AttributeSet attrs){
//        pathBPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP));我们不需要单独绘制path了，记得注释掉
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        bitmap = Bitmap.createBitmap((int) viewWidth, (int) viewHeight, Bitmap.Config.ARGB_8888);
        bitmapCanvas = new Canvas(bitmap);

        if(a.x==-1 && a.y==-1){
//            bitmapCanvas.drawPath(getPathDefault(),pathAPaint);
            drawPathAContent(bitmapCanvas,getPathDefault(),pathAPaint);
        }else {
            if(f.x==viewWidth && f.y==0){
//                bitmapCanvas.drawPath(getPathAFromTopRight(),pathAPaint);
                drawPathAContent(bitmapCanvas,getPathAFromTopRight(),pathAPaint);

                bitmapCanvas.drawPath(getPathC(),pathCPaint);
                drawPathBContent(bitmapCanvas,getPathAFromTopRight(),pathBPaint);
            }else if(f.x==viewWidth && f.y==viewHeight){
//                bitmapCanvas.drawPath(getPathAFromLowerRight(),pathAPaint);
                drawPathAContent(bitmapCanvas,getPathAFromLowerRight(),pathAPaint);

                bitmapCanvas.drawPath(getPathC(),pathCPaint);
                drawPathBContent(bitmapCanvas,getPathAFromLowerRight(),pathBPaint);
            }
//            bitmapCanvas.drawPath(getPathC(),pathCPaint);
//            bitmapCanvas.drawPath(getPathB(),pathBPaint);
        }
    }

    /**
     * 绘制B区域内容
     * @param canvas
     * @param pathPaint
     * @param pathA
     */
    private void drawPathBContent(Canvas canvas, Path pathA, Paint pathPaint){
        Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
        Canvas contentCanvas = new Canvas(contentBitmap);

        //下面开始绘制区域内的内容...
        contentCanvas.drawPath(getPathB(),pathPaint);
        contentCanvas.drawText("这是在B区域的内容...BBBB", viewWidth-260, viewHeight-100, textPaint);

        //结束绘制区域内的内容...

        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(contentBitmap, 0, 0, null);
        canvas.restore();
    }
}

效果如图

绘制当前页（A区域）背面（C区域）的内容
相关博文链接

安卓自定义View进阶-Matrix原理

C区域的内容填充是本期最复杂的一部分了。AB区域的内容都是直接绘制在相应区域即可，不需要做太多的处理，而我们看到的C区域内容，即当前页的背面其实是这样来的，如图（图出自大神AigeStudio的博客Android翻页效果原理实现之模拟扭曲）

那么如何得到该区域的内容呢？看下图及分析过程

  • 我们将当前页设为矩形ABCD，将矩形ABCD翻转得到矩形AB₁CD₁

  • 旋转2倍角0的度数得到矩形AB₂C₂D₂（经过翻转和旋转后，此时我们的XY坐标轴方向在图中右上方已经标出来了）
    解析：①设 角ehD为 角0， 角heD为 角1，因为 eh为 aD的 垂直平分线，则 角ahD大小为两倍 角0； ②又因为我们要求 AC₂与 B4 D4平行，且 AC和 BD平行； ③所以 角C₂AC等于 角ahD，为两倍 角0； ④所以旋转角度为两倍 角0

  • 为了方便后面好计算，我们将矩形AB₂C₂D₂沿X轴负方向移动e.x的长度，沿Y轴负方向移动矩形长边的长度（即f.y或e.y的长度），最终得到矩形A₃B₃C₃D₃

  • 最后将矩形A₃B₃C₃D₃沿屏幕原X轴方向移动e.x的长度，沿原Y轴方向移动e.y的长度，得到矩形A4 B4 C4 D4（即 C₃与 C4重合，D4与a点重合），矩形A4 B4 C4 D4即为我们所要的背面（C区域）的内容
    解析：①设 角CAC₃为 角A，因为 eO与 AC平行， eC4与 AC₃平行，所以 角OeC4与 角CAC₃相等，即等于 角A； ②由之前的矩形移动我们知道 AC₃的长度等于 e.x，所以 C₃的X坐标为 e.x·sinA， C₃的Y坐标为 e.x·cosA; ③因为 矩形ABCD与 矩形A4 B4 C4 D4以 eh为中轴对称，所以 eC4的长度等于 e.x，则同理，得 C4的X坐标为 e.x·sinA+e.x， C4的Y坐标为 e.x·cosA+e.y; ④由 C4的坐标减去 C₃的坐标可知 C₃到 C4的移动距离为 原X轴方向的e.x， 原Y轴方向e.y（ X轴: (e.x·sinA+e.x) - (e.x·sinA) = e.x，Y轴: (e.x·cosA+e.y) - (e.x·cosA) = e.y）

至此，A区域内容翻转、旋转再位移得到C区域内容的原理分析完毕（我已经尽力去描述清楚了，希望大家能看懂和别嫌我讲得啰嗦(:з」∠) ，至于数学知识都交回给老师的同学自己去网上查吧哈哈），我们根据之前的分析利用Matrix方面的知识编写算法，首先看下翻转矩阵

旋转矩阵，θ为要旋转的角度

我们按之前的分析先翻转后旋转，旋转角度为两倍角0计算，计算过程为

按照计算结果，开始修改我们的BookPageView

public class BookPageView extends View {
    //省略部分代码...
    private Paint pathCContentPaint;//绘制C区域内容画笔
    private void init(Context context, @Nullable AttributeSet attrs){
        //省略部分代码...
        pathCContentPaint = new Paint();
        pathCContentPaint.setColor(Color.YELLOW);
        pathCContentPaint.setAntiAlias(true);//设置抗锯齿
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        bitmap = Bitmap.createBitmap((int) viewWidth, (int) viewHeight, Bitmap.Config.ARGB_8888);
        bitmapCanvas = new Canvas(bitmap);

        if(a.x==-1 && a.y==-1){
            drawPathAContent(bitmapCanvas,getPathDefault(),pathAPaint);
        }else {
            if(f.x==viewWidth && f.y==0){
                drawPathAContent(bitmapCanvas,getPathAFromTopRight(),pathAPaint);

                drawPathCContent(bitmapCanvas,getPathAFromTopRight(),pathCContentPaint);
                drawPathBContent(bitmapCanvas,getPathAFromTopRight(),pathBPaint);
            }else if(f.x==viewWidth && f.y==viewHeight){
                drawPathAContent(bitmapCanvas,getPathAFromLowerRight(),pathAPaint);

                drawPathCContent(bitmapCanvas,getPathAFromLowerRight(),pathCContentPaint);
                drawPathBContent(bitmapCanvas,getPathAFromLowerRight(),pathBPaint);
            }
        }
    }

    /**
     * 绘制C区域内容
     * @param canvas
     * @param pathA
     * @param pathPaint
     */
    private void drawPathCContent(Canvas canvas, Path pathA, Paint pathPaint){
        Bitmap contentBitmap = Bitmap.createBitmap(viewWidth, viewHeight, Bitmap.Config.RGB_565);
        Canvas contentCanvas = new Canvas(contentBitmap);

        //下面开始绘制区域内的内容...
        contentCanvas.drawPath(getPathB(),pathPaint);//绘制一个背景，path用B的就行
        contentCanvas.drawText("这是在A区域的内容...AAAA", viewWidth-260, viewHeight-100, textPaint);

        //结束绘制区域内的内容...

        canvas.save();
        canvas.clipPath(pathA);
        canvas.clipPath(getPathC(), Region.Op.REVERSE_DIFFERENCE);//裁剪出C区域不同于A区域的部分

        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;
        //设置翻转和旋转矩阵
        float[] mMatrixArray = { 0, 0, 0, 0, 0, 0, 0, 0, 1.0f };
        mMatrixArray[0] = -(1-2 * sin0 * sin0);
        mMatrixArray[1] = 2 * sin0 * cos0;
        mMatrixArray[3] = 2 * sin0 * cos0;
        mMatrixArray[4] = 1 - 2 * sin0 * sin0;

        Matrix mMatrix = new Matrix();
        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(contentBitmap, mMatrix, null);
        canvas.restore();
    }
}

效果如图

还不够完美，可以观察到翻起的当前页背面还有一些空白的地方没有绘制内容，这是因为C区域的内容是通过当前页矩形翻转、旋转、位移后得到的，所以也是矩形，自然不能覆盖曲线的边缘区域。我们需要对这些边缘区域进行处理，根据背景的复杂度需要不同的处理方法，因为我们是纯色背景，所以处理起来会方便一些，这里只给出纯色背景的处理方案，其他背景图案大家自行扩展即可

public class BookPageView extends View {
    //省略部分代码...
    @Override
    protected void onDraw(Canvas canvas) {
        //省略部分代码...
        super.onDraw(canvas);
        if(a.x==-1 && a.y==-1){
            drawPathAContent(bitmapCanvas,getPathDefault(),pathAPaint);
        }else {
            if(f.x==viewWidth && f.y==0){
                drawPathAContent(bitmapCanvas,getPathAFromTopRight(),pathAPaint);

                bitmapCanvas.drawPath(getPathC(),pathCPaint);
                drawPathCContent(bitmapCanvas,getPathAFromTopRight(),pathCContentPaint);
                drawPathBContent(bitmapCanvas,getPathAFromTopRight(),pathBPaint);
            }else if(f.x==viewWidth && f.y==viewHeight){
                drawPathAContent(bitmapCanvas,getPathAFromLowerRight(),pathAPaint);

                bitmapCanvas.drawPath(getPathC(),pathCPaint);
                drawPathCContent(bitmapCanvas,getPathAFromLowerRight(),pathCContentPaint);
                drawPathBContent(bitmapCanvas,getPathAFromLowerRight(),pathBPaint);
            }
        }
    }

    /**
     * 绘制C区域内容
     * @param canvas
     * @param pathA
     * @param pathPaint
     */
    private void drawPathCContent(Canvas canvas, Path pathA, Paint pathPaint){canvas.save();
        //省略部分代码...
        canvas.clipPath(pathA);
//        canvas.clipPath(getPathC(), Region.Op.REVERSE_DIFFERENCE);//裁剪出C区域不同于A区域的部分
        canvas.clipPath(getPathC(),Region.Op.UNION);//裁剪出A和C区域的全集
        canvas.clipPath(getPathC(), Region.Op.INTERSECT);//取与C区域的交集
    }
}

效果如图

至此本篇教程到此结束，至于填充的内容如何自定义就留给大家自行扩展了，原理都是一样的。如果大家看了感觉还不错麻烦点个赞，你们的支持是我最大的动力~

AnliaLee
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BookPage-Android自定义View实现翻页效果，并附带实现教程.zip
09-23
仿真书籍翻页效果BookPageView简介：实现了仿真翻页效果，教程完整地描述了翻页原理分析到性能优化的过程教程博客：Android自定义View——从零开始实现书籍翻页效果（一） Android自定义View——从零开始实现书籍翻页效果（二） Android自定义View——从零开始实现书籍翻页效果（三） Android自定义View——从零开始实现书籍翻页效果（四） Android自定义View——从零开始实现书籍翻页效果（性能优化篇）效果展示：覆盖翻页效果CoverPageView简介：实现了覆盖翻页效果，同时教程中也讲述了页面内容的封装过程教程博客：Android自定义View——从零开始实现覆盖翻页效果效果展示：
Android自定义View——贝塞尔曲线实现直播点赞效果
12-28
Android自定义View——贝塞尔曲线实现直播点赞效果 Android自定义View——贝塞尔曲线实现直播点赞效果
Android自定义View——从零开始实现书籍翻页效果
最新发布
m0_61409125的博客
03-16 933
现在新技术层出不穷，如果每次出新的技术，我们都深入的研究的话，很容易分散精力。新的技术可能很久之后我们才会在工作中用得上，当学的新技术无法学以致用，很容易被我们遗忘，到最后真的需要使用的时候，又要从头来过（虽然上手会更快）。我觉得身为技术人，针对新技术应该是持拥抱态度的，入了这一行你就应该知道这是一个活到老学到老的行业，所以面对新技术，不要抵触，拥抱变化就好了。Flutter 明显是一种全新的技术，而对于这个新技术在发布之初，花一个月的时间学习它，成本确实过高。
Android自定义View——扇形统计图的实现代码
01-04
Android 扇形统计图 先看看效果： 看上去如果觉得还行就继续往下看吧！ 自定义View 定义成员变量 private int mHeight, mWidth;//宽高 private Paint mPaint;//扇形的画笔 private Paint mTextPaint;//画文字的画笔 private int centerX, centerY;//中心坐标 //其他的value //扇形图分成太多快 所以要合并一部分为其他 即图中灰色部分 private double rest; private int maxNum = 5;//扇形图的最
android尺子的自定义view——RulerView详解
08-19
主要介绍了android尺子的自定义view——RulerView详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Android 自定义view
set_one_name的博客
01-03 898
关于android中自定义view
Android 实现书籍翻页效果TXT阅读器
08-04
NULL 博文链接：https://technicalsearch.iteye.com/blog/2008558
Android 自定义控件实现阅读小说平移翻页效果
LIXIAONA_1101的博客
01-14 3131
本文章借鉴与http://blog.csdn.net/zhongkejingwang/article/details/38728119 先来看一下我们最终实现的效果如何: 这个实现那,人家也在人家的CSDN中说的明明白白,那么我就来简单的说一下自己的一下思路: 首先,我们要为了节省空间资源,只需要三个界面来重复使...
Android电子书翻页效果实现
Johnson的专栏
07-30 1万+
这篇文章是在参考了别人的博客基础上，修改了其中一个翻页bug，并且加了详细注释 先看效果 其中使用了贝赛尔曲线原理，关于贝赛尔曲线的知识，推荐大家看下http://blog.csdn.net/hmg25的博客 主函数 package com.zhang; import java.io.IOException; import android.app.Activity; im
andriod studio实现界面切换
qq_60203955的博客
11-19 3191
andriod studio实现的两种方法：Intent和官网推荐方法
flutter_novel:仿追书神器，具有仿真、滑动和滚动翻页、字体大小、行高、背景、目录等功能的Flutter 阅读APP
05-23
前言 如果想自己编译，建议flutter环境使用最新的stable分支（我目前使用的是stable分支的1.12.13+hotfix.5），由于项目中使用了较新的技术点，所以如果是老版本的环境应该会因为找不到类或者方法而报错。 另外……ios因为没设备，所以也不知道具体是否正常，讲道理应该没啥问题的。plugin，代码这块也是基本的flutter代码，应该没什么特殊的………… 本人也是在不断摸索学习flutter中，所以这个项目中存在的错误或者低性能部分，还请不吝提issue或者pr。 总之，欢迎pr、fork、star，或者在issue区中提出有意义的意见或者建议。 体验demo： Android： IOS： em,这个木有 注：部分书的章节内容显示为：加载出错，这个是因为网络问题，或者追书神器api并没返回内容导致的 顺便提一下： 多图流量警告！ 效果图 在优化上下了很大功夫的，注意看
关于Android Studio 页面翻转问题
01-03
关于Android Studio 页面翻转问题 相信看到这篇文章的你 也在学习安卓的道路上遇到了太多太多细碎的问题，这里我讲到的就是设计页面的翻转横屏与锁定横屏、竖屏、根据陀螺仪来定位屏幕方向的问题。 首先新建工程，在工程Sync成功之后我们需要设置Projeck目录模式下的app\src\main\AndroidMainifest.xml文件 找到注册活动的主代码（如下图） android:screenOrientation=portrait 这里screenOrientation有很多属性值 portrait就是为锁定竖屏 另列出其他属性值的功能 “unspecified”-
android 仿书籍翻页效果
11-12
可高定制化ui的仿书籍翻页效果，能翻页图片，翻页电子书，翻页自己想显示的ui。作为借鉴,有个bug就是前两页空白，没绘制出来。这个可以自己修改，或者下载我新修改的资源文件
android 真实书籍翻页效果(完结篇)
04-22
这是我博客http://blog.csdn.net/hmg25里android实现书籍翻页效果的代码，截图在我博客里有，希望感兴趣的童鞋研究下~~ 升级篇对应的为： http://download.csdn.net/source/3278901 添加了翻页动画~读取txt
《Android 群英传》读书笔记 自定义 View 之对现有控件进行拓展
11-12
《Android 群英传》读书笔记 自定义 View 之对现有控件进行拓展
深入理解Android之自定义View
Fighting_初心的博客
01-24 5487
自定义View、多线程、网络，被认为是Android开发者必须牢固掌握的最基础的三大基本功。而自定义View又是Android开发中特别重要的一环，很多地方都需要用到自定义View。这篇文章我就梳理一下自定义View的相关知识。 目录 （一）什么是自定义View （二）自定义组合View （三）自定义View的绘制 1. Canvas.drawXXX() Pa...
Android开发之自定义View
热门推荐
weixin_43858011的博客
06-06 1万+
在自定义View的时候，需要两个构造函数。否则在编译的时候会报异常：Binary XML file line Error inflating class. 原因是：Android在根据xml文件夹创建View对象的时候会调用View的双参构造方法，即public SquareView(Context context， AttributeSetattrs)，所以如果没有写全的话就会报错。...
安卓自定义View
eos-i的博客
04-23 682
安卓自定义View
android自定义view实现水平进度条
04-26
好的，以下是实现水平进度条的自定义 View 的步骤： 1. 定义属性 在自定义 View 的类中定义属性，包括进度条的颜色、背景色、高度等等。 ```java public class HorizontalProgressBar extends View { private ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值