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

作者:Anlia 地址:http://www.jianshu.com/p/f78f52c3c560 声明:本文是Anlia原创,已获其授权发布,未经原作者允许请勿转载

前言

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

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

国际惯例,先上效果图

目录

  • 绘制当前页(A区域)的内容
  • 绘制下一页(B区域)的内容
  • 绘制当前页(A区域)背面(C区域)的内容

绘制当前页(A区域)的内容

相关博文链接 Android中的裁剪中Region.Op参数的用法:http://blog.csdn.net/eyishion/article/details/53728913

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){

    }

 @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);

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

                drawPathAContent(bitmapCanvas,getPathAFromLowerRight(),pathAPaint);

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


        }
    }

 
 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);
        canvas.clipPath(getPathC(),Region.Op.UNION);
        canvas.clipPath(getPathB(), Region.Op.REVERSE_DIFFERENCE);
        canvas.drawBitmap(contentBitmap, 0, 0, null);
        canvas.restore();
    }
}

效果如图

绘制当前页(A区域)背面(C区域)的内容

相关博文链接: 安卓自定义View进阶-Matrix原理:http://blog.csdn.net/u013831257/article/details/52102081

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

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

  • 我们将当前页设为矩形ABCD,将矩形ABCD翻转得到矩形AB₁CD₁
  • 旋转2角0的度数得到矩形AB₂C₂D₂(经过翻转和旋转后,此时我们的XY坐标轴方向在图中右上方已经标出来了) 解析:①设 角ehD角0角heD角1,因为 ehaD垂直平分线,则 角ahD大小为两倍 角0; ②又因为我们要求 AC₂B4 D4平行,且 ACBD平行; ③所以 角C₂AC等于 角ahD,为两倍 角0; ④所以旋转角度为两倍 角0
  • 为了方便后面好计算,我们将矩形AB₂C₂D₂沿X轴负方向移动e.x的长度,沿Y轴负方向移动矩形长边的长度(即f.ye.y的长度),最终得到矩形A₃B₃C₃D₃
  • 最后将矩形A₃B₃C₃D₃沿屏幕原X轴方向移动e.x的长度,沿原Y轴方向移动e.y的长度,得到矩形A4 B4 C4 D4(即 C₃C4重合,D4a点重合),矩形A4 B4 C4 D4即为我们所要的背面(C区域)的内容 解析:①设 角CAC₃角A,因为 eOAC平行, eC4AC₃平行,所以 角OeC4角CAC₃相等,即等于 角A; ②由之前的矩形移动我们知道 AC₃的长度等于 e.x,所以 C₃的X坐标e.x·sinAC₃的Y坐标e.x·cosA; ③因为 矩形ABCD矩形A4 B4 C4 D4eh为中轴对称,所以 eC4的长度等于 e.x,则同理,得 C4的X坐标e.x·sinA+e.xC4的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;
 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);
            }
        }
    }

 
 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);
        contentCanvas.drawText("这是在A区域的内容...AAAA", viewWidth-260, viewHeight-100, textPaint);

 

        canvas.save();
        canvas.clipPath(pathA);
        canvas.clipPath(getPathC(), Region.Op.REVERSE_DIFFERENCE);

 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);
        mMatrix.postTranslate(e.x, e.y);

        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);
            }
        }
    }

 
 private void drawPathCContent(Canvas canvas, Path pathA, Paint pathPaint){canvas.save();
 
        canvas.clipPath(pathA);

        canvas.clipPath(getPathC(),Region.Op.UNION);
        canvas.clipPath(getPathC(), Region.Op.INTERSECT);
    }
}

效果如图

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

源码:https://github.com/AnliaLee/BookPage,欢迎star

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

原文发布于微信公众号 - Android先生(cyg_24kshign)

原文发表时间:2017-11-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端桃园

Grid布局简介

没错,这其实就是我们小时候写的小格子本本,其实它跟我们今天要讲的主题Grid布局非常类似,其实Grid布局就是它的升级加强版。

1.5K70
来自专栏非著名程序员

不到百行代码实现,类似iPhone的滑块开关

自定义view写了这么多篇幅,通用的属性部分代码,测量代码忽略不计 真正实现的部分就不到100行!先上效果图 关闭状态 ? 打开状态 ? 动起来 ? 下面...

24060
来自专栏黒之染开发日记

HTML5 canvas drawImage() 方法记录

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。 注释:Interne...

15820
来自专栏埋名

CSS样式clip-path绘制图形裁剪图片

发现clip-path绘制图形的网站 http://bennettfeely.com/clippy/ 专门介绍clip-path的使用,几乎任何形状都可以做出来...

28120
来自专栏落影的专栏

iOS坐标系探究

APP 在渲染视图时,需要在坐标系中指定绘制区域。这个概念看似乎简单,事实并非如此。

67830
来自专栏前端小吉米

SVG 动画精髓

30050
来自专栏非著名程序员

Android学习第五弹之Matrix的用法

Matrix的用法 非著名程序员 Matrix ,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放、平移、旋转等操作。 首先介绍一下矩阵运算...

267100
来自专栏深度学习之tensorflow实战篇

Python生成词云图,TIIDF方法文本挖掘: 词频统计,词云图

python中使用wordcloud包生成的词云图。 下面来介绍一下wordcloud包的基本用法。 class wordcloud.WordCloud(fon...

58660
来自专栏前端说吧

CSS3的transition动画功能

33460
来自专栏葬爱家族

Android高德之旅(8)绘制线废话简单的api总结

绘制线会比绘制点稍微复杂点,抛开一些复杂的属性不谈,主要分为三类:实线、虚线、纹理。绘制线在自定义地图中是非常重要的一个环节。

43550

扫码关注云+社区

领取腾讯云代金券