炮兵镇楼

在《自定义控件其实很简单》系列的前半部分中我们用了整整六节近两万字两百多张配图讲了Android图形的绘制，虽然篇幅很巨大但仍然只是图形绘制的冰山一角，旨在领大家入门，至于修行成果就看各位的了……那么这个些列主要是通过前面学习到的一些方法来尝试完成一个翻页的效果。

对于我个人来说，我是不太建议大家在没自己去尝试前看本文的，因为你看了别人的思路就会有个惯性思维朝着别人的思路去靠，实际上如果你自己尝试去分析去做的话不见得做不出来，甚至可能方法更简捷效率更高。分析这个效果的时候我还找妹子要了个新的笔记本翻了两三个小时，后来又在PS里模拟了一下然后通过绘图计算最终才有了一个简短的思路。

翻页虽然几乎每个人都试过，除非你没看过书……没碰过本子……甚至没碰过纸……一个看似简单的动作其实隐藏了巨量的信息，如果我们要把翻页的过程模拟得真实，涉及面会相当广，这里我假定我们所做的翻页效果类似于课本翻页，从右下角掀开纸张翻至左边，而我们的控件就假定为课本的右边部分而左边部分呢在我们控件左侧外看不到，那么控件的左端即可看成我们课本的装订线，这样的假定我们可以简化问题，如之前我所说，控件必定都是不完美的，如果存在完美的控件就不需要我们Custom了~那么这个控件实现的是一个怎么样的效果呢？效果很简单，往控件中传入多张图片，我们以翻页的形式依次展示这些图片。整个翻页的原理都是想通的，虽然这个效果我模拟得很简单，但是你完全可以照我的思路定义ViewGroup或者ValueAnimation等等……

为了进一步简化问题，我们将整个翻页效果的实现分为四部分，第一部分为翻页的尝试实现，第二部分呢则是折线翻页的实现，第三部分我们尝试引入曲线翻页，第四部分则为一些后续效果的处理以及效率的优化，如果有必要还会增加一些章节继续完善效果。这样我们的流程就很清晰了，这一节我们首先来尝试实现翻页，如果大家能哪个本子或者书来跟着我的思路走就更好了，本来是打算拍些Photo作为展示的，但是我发现现实的翻页不好控制，算了，一些理论上的东西只好靠各位自行动手+脑补了。

首先，我们要进行一些约定，上面说到我们模拟的翻页效果是以控件左侧为纸张装订线使其能够实现从右下角翻开的效果，这是约定之一，其次，我们规定忽略掀起部分相对于本页的弧线使之始终与本页平行，再次规定视点与光源方向均位于纸张正上方并且光源为单光源聚光灯光锥刚好罩住纸张，这些约定不理解不要紧，在涉及到的时候我会具体说明。

我们知道View并非像ViewGroup那样是个容器可以容纳其他的控件，那么要将一些图片依次“放入”View中并依次呈现该如何办呢？通过前面对Canvas的学习，我们可以尝试使用Canvas的“图层”功能来实现这一效果，将Bitmap依次至于不同的“图层”再通过Canvas的clipXXX方法裁剪呈现不同Bitmap，理论上是可行的，那实际如何呢？我们来试试，新建一个View的子类PageCurlView：

[java] view plaincopyprint?
  1. public class PageTurnView extends View {
  2. private List<Bitmap> mBitmaps;// 位图数据列表
  3. public PageTurnView(Context context, AttributeSet attrs) {
  4. super(context, attrs);
  5. }
  6. }

同样，PageCurlView是与数据有关的，我们对外提供一个方法来为PageCurlView设置数据：

[java] view plaincopyprint?
  1. /**
  2. * 设置位图数据
  3. *
  4. * @param mBitmaps
  5. *            位图数据列表
  6. */
  7. public synchronized void setBitmaps(List<Bitmap> mBitmaps) {
  8. /*
  9. * 如果数据为空则抛出异常
  10. */
  11. if (null == mBitmaps || mBitmaps.size() == 0)
  12. throw new IllegalArgumentException("no bitmap to display");
  13. /*
  14. * 如果数据长度小于2则GG思密达
  15. */
  16. if (mBitmaps.size() < 2)
  17. throw new IllegalArgumentException("fuck you and fuck to use imageview");
  18. this.mBitmaps = mBitmaps;
  19. invalidate();
  20. }

这里要注意，如果图片小于两张，那就没必要去做翻页效果了，当然你也可以将其绘制出来然后在用户实行“翻页”的时候提示“已是最后一页”也可以，这里我就直接不允许图片张数小于2张了。

在《自定义控件其实很简单5/12》中我们自定义了一个折线视图，在该例中我们为PolylineView设置了一个初始化数据，即当用户没有设置数据时默认显示了一组随机值数据。那在这里呢我不再做初始化数据而是当绘制时如果数据为空那么我们就显示一组文本信息提示用户设置数据：

[java] view plaincopyprint?
  1. /**
  2. * 默认显示
  3. *
  4. * @param canvas
  5. *            Canvas对象
  6. */
  7. private void defaultDisplay(Canvas canvas) {
  8. // 绘制底色
  9. canvas.drawColor(Color.WHITE);
  10. // 绘制标题文本
  11. mTextPaint.setTextSize(mTextSizeLarger);
  12. mTextPaint.setColor(Color.RED);
  13. canvas.drawText("FBI WARNING", mViewWidth / 2, mViewHeight / 4, mTextPaint);
  14. // 绘制提示文本
  15. mTextPaint.setTextSize(mTextSizeNormal);
  16. mTextPaint.setColor(Color.BLACK);
  17. canvas.drawText("Please set data use setBitmaps method", mViewWidth / 2, mViewHeight / 3, mTextPaint);
  18. }

如果没有设置数据，那么PageCurlView的默认显示效果如下：

如果有数据，那么我们在绘制这些位图之前要对其大小进行调整，这里我就直接将位图的大小矫正与控件一致，当然实际应用当中你可以根据比例来缩放图片使其保持宽高比，这里我就直接舍弃宽高比了：

[java] view plaincopyprint?
  1. /**
  2. * 初始化位图数据
  3. * 缩放位图尺寸与屏幕匹配
  4. */
  5. private void initBitmaps() {
  6. List<Bitmap> temp = new ArrayList<Bitmap>();
  7. for (int i = 0; i < mBitmaps.size(); i++) {
  8. Bitmap bitmap = Bitmap.createScaledBitmap(mBitmaps.get(i), mViewWidth, mViewHeight, true);
  9. temp.add(bitmap);
  10. }
  11. mBitmaps = temp;
  12. }

那么数据有了，我们尝试将其绘制出来看看：

[java] view plaincopyprint?
  1. /**
  2. * 绘制位图
  3. *
  4. * @param canvas
  5. *            Canvas对象
  6. */
  7. private void drawBtimaps(Canvas canvas) {
  8. for (int i = 0; i < mBitmaps.size(); i++) {
  9. canvas.save();
  10. canvas.drawBitmap(mBitmaps.get(i), 0, 0, null);
  11. canvas.restore();
  12. }
  13. }

如上代码所示，每一次绘制位图我们都锁定还原Canvas使每一个Bitmap在绘制时都独立开来，方便我们操作：

非常壮观的建筑物~虽然我们是把Bitmap绘制出来了，但是细心的朋友会发现，绘制顺序是颠倒的，位于列表末端的Bitmap被绘制在了最顶层，很简单，我们在initBitmaps的时候掉个头不就是了么：

[java] view plaincopyprint?
  1. private void initBitmaps() {
  2. List<Bitmap> temp = new ArrayList<Bitmap>();
  3. for (int i = mBitmaps.size() - 1; i >= 0; i--) {
  4. Bitmap bitmap = Bitmap.createScaledBitmap(mBitmaps.get(i), mViewWidth, mViewHeight, true);
  5. temp.add(bitmap);
  6. }
  7. mBitmaps = temp;
  8. }

这时候运行就会显示第一张图片了：

古典欧式建筑~~

很多细心的朋友可能会有这样的疑问问什么不在drawBtimaps里面翻转顺序呢？原因有二，其一是既然是初始化数据那么我们希望在initBitmaps之后拿到的数据是直接能用的而不是在draw的时候还要执行没必要计算影响效率，其二是我们会在drawBtimaps执行一些计算，需要的一些参数包括循环的一些参数，如果我们的循环还要自行计算必定会增加逻辑的复杂度。

图片是画出来了，但是要如何去“遮住”上一张同时显示下一张图片呢？我们可以利用《自定义控件其实很简单5/12》中讲到的clipXXX裁剪方法去做，通过控制clipRect的right坐标来显示图片，好我们修改一下drawBtimaps方法加入clip：

[java] view plaincopyprint?
  1. /**
  2. * 绘制位图
  3. *
  4. * @param canvas
  5. *            Canvas对象
  6. */
  7. private void drawBtimaps(Canvas canvas) {
  8. for (int i = 0; i < mBitmaps.size(); i++) {
  9. canvas.save();
  10. canvas.clipRect(0, 0, mClipX, mViewHeight);
  11. canvas.drawBitmap(mBitmaps.get(i), 0, 0, null);
  12. canvas.restore();
  13. }
  14. }

mClipX为裁剪区域右端的坐标值，我们在onSizeChanged中为其赋值使其等于控件宽度：

[java] view plaincopyprint?
  1. @Override
  2. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  3. // 省去一些代码……
  4. // 初始化裁剪右端点坐标
  5. mClipX = mViewWidth;
  6. }

并且重写View的onTouchEvent方法获取事件，将当前触摸点的X坐标赋予mClipX并重绘视图：

[java] view plaincopyprint?
  1. @Override
  2. public boolean onTouchEvent(MotionEvent event) {
  3. // 获取触摸点的x坐标
  4. mClipX = event.getX();
  5. invalidate();
  6. return true;
  7. }

此时运行效果如下：

大家可以看到虽然我们可以通过手指的滑动来clip裁剪图片，但目测并没有达到我们理想的效果，clip裁剪了所有的图片而我们其实只想裁剪第一张并使第二张显示出来……OK，那我们再改下drawBtimaps方法：

[java] view plaincopyprint?
  1. /**
  2. * 绘制位图
  3. *
  4. * @param canvas
  5. *            Canvas对象
  6. */
  7. private void drawBtimaps(Canvas canvas) {
  8. for (int i = 0; i < mBitmaps.size(); i++) {
  9. canvas.save();
  10. /*
  11. * 仅裁剪位于最顶层的画布区域
  12. */
  13. if (i == mBitmaps.size() - 1) {
  14. canvas.clipRect(0, 0, mClipX, mViewHeight);
  15. }
  16. canvas.drawBitmap(mBitmaps.get(i), 0, 0, null);
  17. canvas.restore();
  18. }
  19. }

我们只针对位于最顶层的画布区域进行裁剪而其他的则保持不变，这样我们就可以得到一个“翻”的效果：

现在想想每次我们去滑动都要从至右滑到至左对吧，可是我们的手指是有宽度的，想精确地一次性从至右滑到至左太麻烦，我们可以在左右两端设定一个区域，当当前触摸点在该区域时让我们的图片自动滑至或者说吸附到至左或至右：

[java] view plaincopyprint?
  1. @Override
  2. public boolean onTouchEvent(MotionEvent event) {
  3. switch (event.getAction() & MotionEvent.ACTION_MASK) {
  4. default:
  5. // 获取触摸点的x坐标
  6. mClipX = event.getX();
  7. invalidate();
  8. break;
  9. case MotionEvent.ACTION_UP:// 触点抬起时
  10. // 判断是否需要自动滑动
  11. judgeSlideAuto();
  12. break;
  13. }
  14. return true;
  15. }

那么这个事件我们在手指抬起时触发，手指抬起后判断当前点的位置：

[java] view plaincopyprint?
  1. /**
  2. * 判断是否需要自动滑动
  3. * 根据参数的当前值判断绘制
  4. */
  5. private void judgeSlideAuto() {
  6. /*
  7. * 如果裁剪的右端点坐标在控件左端五分之一的区域内，那么我们直接让其自动滑到控件左端
  8. */
  9. if (mClipX < mViewWidth * 1 / 5F) {
  10. while (mClipX > 0) {
  11. mClipX--;
  12. invalidate();
  13. }
  14. }
  15. /*
  16. * 如果裁剪的右端点坐标在控件右端五分之一的区域内，那么我们直接让其自动滑到控件右端
  17. */
  18. if (mClipX > mViewWidth * 4 / 5F) {
  19. while (mClipX < mViewWidth) {
  20. mClipX++;
  21. invalidate();
  22. }
  23. }
  24. }

如图所示，当我们的触摸点在距控件左端1/5的区域内时抬起手指后图片自动吸附到了左端，同样当我们的触摸点在距控件右端4/5-5/5的区域内时抬起手指后图片自动吸附到了右端：

OK，好像没什么问题是么？哈哈哈哈哈啊哈哈哈哈哈哈哈哈如果你真要这么认为你就上当了，大家可以认真地看看是不是真没问题，这里其实我给大家挖了个坑，看似没啥问题，其实涉及到一个很重要的信息，下一节我们会讲。这里要注意，因为我们会不断地触发触摸事件，也就是说onTouchEvent会不断地被调用，而在onTouchEvent中我们会不断重复地去计算mViewWidth * 1 / 5F和 mViewWidth * 4 / 5F的值，这对我们控件的效率来说是相当不利的，我们考虑将其封装成成员变量并在onSizeChanged中赋予初始值：

[java] view plaincopyprint?
  1. @Override
  2. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  3. // 省去一些代码……
  4. // 计算控件左侧和右侧自动吸附的区域
  5. autoAreaLeft = mViewWidth * 1 / 5F;
  6. autoAreaRight = mViewWidth * 4 / 5F;
  7. }

再在judgeSlideAuto中调用：

[java] view plaincopyprint?
  1. private void judgeSlideAuto() {
  2. /*
  3. * 如果裁剪的右端点坐标在控件左端五分之一的区域内，那么我们直接让其自动滑到控件左端
  4. */
  5. if (mClipX < autoAreaLeft) {
  6. while (mClipX > 0) {
  7. mClipX--;
  8. invalidate();
  9. }
  10. }
  11. /*
  12. * 如果裁剪的右端点坐标在控件右端五分之一的区域内，那么我们直接让其自动滑到控件右端
  13. */
  14. if (mClipX > autoAreaRight) {
  15. while (mClipX < mViewWidth) {
  16. mClipX++;
  17. invalidate();
  18. }
  19. }
  20. }

对象和参数的复用一定要运用得炉火纯青，特别是在像onDraw、onTouchEvent这类有可能被不断重复调用的方法中，尽量避免不必要的计算（特别是浮点值的计算）和对象生成，这样对提高View运行效率有着举足轻重的意义！

到目前为之我们成功翻起了第一张图片，但是如何能够连续不断地翻起剩下的图片呢？先别急，在这之前我们先来看一个浪费资源影响效率的东西。我在setBitmaps的时候传了五张图片进来，也就是说mBitmaps数据列表的size长度为5，而在drawBtimaps中呢我们直接通过循环将五张图片依次绘制在了Canvas中：

[java] view plaincopyprint?
  1. for (int i = 0; i < mBitmaps.size(); i++) {
  2. canvas.save();
  3. // 省略一些代码……
  4. canvas.drawBitmap(mBitmaps.get(i), 0, 0, null);
  5. canvas.restore();
  6. }

现在想想看我们是否有这样的必要呢？这里是五张图片，如果是10张、100张、1000张、10000张……呢？这样直接一次性地全部draw绝逼要崩~而事实上我们也没有必要去一次性绘制这么多图片，因为我们每次最多只会显示两张：上一张翻和下一张显示，也就是说我们仅需显示当前最顶层的两张图片即可~这样在有大量图片的时候可以大大提高我们绘图的效率，然后通过一些参数的判断来不断地在滑动过程中绘制往后的两张图片直至最后一张图片绘制完成，so~我们更改一下drawBtimaps：

[java] view plaincopyprint?
  1. /**
  2. * 绘制位图
  3. *
  4. * @param canvas
  5. *            Canvas对象
  6. */
  7. private void drawBtimaps(Canvas canvas) {
  8. // 绘制位图前重置isLastPage为false
  9. isLastPage = false;
  10. // 限制pageIndex的值范围
  11. pageIndex = pageIndex < 0 ? 0 : pageIndex;
  12. pageIndex = pageIndex > mBitmaps.size() ? mBitmaps.size() : pageIndex;
  13. // 计算数据起始位置
  14. int start = mBitmaps.size() - 2 - pageIndex;
  15. int end = mBitmaps.size() - pageIndex;
  16. /*
  17. * 如果数据起点位置小于0则表示当前已经到了最后一张图片
  18. */
  19. if (start < 0) {
  20. // 此时设置isLastPage为true
  21. isLastPage = true;
  22. // 并显示提示信息
  23. showToast("This is fucking lastest page");
  24. // 强制重置起始位置
  25. start = 0;
  26. end = 1;
  27. }
  28. for (int i = start; i < end; i++) {
  29. canvas.save();
  30. /*
  31. * 仅裁剪位于最顶层的画布区域
  32. * 如果到了末页则不在执行裁剪
  33. */
  34. if (!isLastPage && i == end - 1) {
  35. canvas.clipRect(0, 0, mClipX, mViewHeight);
  36. }
  37. canvas.drawBitmap(mBitmaps.get(i), 0, 0, null);
  38. canvas.restore();
  39. }
  40. }

我们增加了一个int类型的成员变量pageIndex，用来作为计算读取数据列表的参考值。在这里我们约定控件左侧小于autoAreaLeft的区域为“回滚区域”，什么意思呢？如果我们的手指触摸点在该区域，那么我们就认为用户的操作为“返回上一页”（当然你也可以去计算滑动起始点之差的正负来判断用户的行为，事件不是本系列重点就不讲了）。pageIndex的作用可以用简单用下图表示：

五种颜色代表五张图片，左上角的序号表示其在列表中的下标位置，当pageIndex为0时start为3而end为5，那么意味着列表最后的图片会被绘制在最上层，接着绘制倒数第二张，如果pageIndex为1时start为2而end为4，那么意味着列表倒数第二张的图片会被绘制在最上层，接着绘制倒数第三张……以此类推，那么我们该如何控制pageIndex的值呢？由上可知，pageIndex++表示显示下一页而pageIndex--则表示上一页，那么故事就很简单了，当我们的mClipX值为0时意味着图片已被裁剪完了，那么这时候我们就可以使pageIndex++，而当用户的手指触碰回滚区域的时候则让pageIndex--显示回上一页，既然需要判断事件，那我们只好修改onTouchEvent咯：

[java] view plaincopyprint?
  1. @Override
  2. public boolean onTouchEvent(MotionEvent event) {
  3. // 每次触发TouchEvent重置isNextPage为true
  4. isNextPage = true;
  5. /*
  6. * 判断当前事件类型
  7. */
  8. switch (event.getAction() & MotionEvent.ACTION_MASK) {
  9. case MotionEvent.ACTION_DOWN:// 触摸屏幕时
  10. // 获取当前事件点x坐标
  11. mCurPointX = event.getX();
  12. /*
  13. * 如果事件点位于回滚区域
  14. */
  15. if (mCurPointX < mAutoAreaLeft) {
  16. // 那就不翻下一页了而是上一页
  17. isNextPage = false;
  18. pageIndex--;
  19. mClipX = mCurPointX;
  20. invalidate();
  21. }
  22. break;
  23. case MotionEvent.ACTION_MOVE:// 滑动时
  24. float SlideDis = mCurPointX - event.getX();
  25. if (Math.abs(SlideDis) > mMoveValid) {
  26. // 获取触摸点的x坐标
  27. mClipX = event.getX();
  28. invalidate();
  29. }
  30. break;
  31. case MotionEvent.ACTION_UP:// 触点抬起时
  32. // 判断是否需要自动滑动
  33. judgeSlideAuto();
  34. /*
  35. * 如果当前页不是最后一页
  36. * 如果是需要翻下一页
  37. * 并且上一页已被clip掉
  38. */
  39. if (!isLastPage && isNextPage && mClipX <= 0) {
  40. pageIndex++;
  41. mClipX = mViewWidth;
  42. invalidate();
  43. }
  44. break;
  45. }
  46. return true;
  47. }

在ACTION_MOVE事件中我们重新定义了事件的执行标准，如果MOVE的距离小于mMoveValid = mViewWidth * 1 / 100F即控件宽度的百分之一则无效，上面代码的注释和上面的分析过程一致就不多扯了，具体效果如下：

以下是这一部分PageTurnView的全部代码，下一节我们将尝试引入折线，将单纯的由右至左切换变成一个折页翻转的效果

[java] view plaincopyprint?
  1. public class PageTurnView extends View {
  2. private static final float TEXT_SIZE_NORMAL = 1 / 40F, TEXT_SIZE_LARGER = 1 / 20F;// 标准文字尺寸和大号文字尺寸的占比
  3. private TextPaint mTextPaint;// 文本画笔
  4. private Context mContext;// 上下文环境引用
  5. private List<Bitmap> mBitmaps;// 位图数据列表
  6. private int pageIndex;// 当前显示mBitmaps数据的下标
  7. private int mViewWidth, mViewHeight;// 控件宽高
  8. private float mTextSizeNormal, mTextSizeLarger;// 标准文字尺寸和大号文字尺寸
  9. private float mClipX;// 裁剪右端点坐标
  10. private float mAutoAreaLeft, mAutoAreaRight;// 控件左侧和右侧自动吸附的区域
  11. private float mCurPointX;// 指尖触碰屏幕时点X的坐标值
  12. private float mMoveValid;// 移动事件的有效距离
  13. private boolean isNextPage, isLastPage;// 是否该显示下一页、是否最后一页的标识值
  14. public PageTurnView(Context context, AttributeSet attrs) {
  15. super(context, attrs);
  16. mContext = context;
  17. /*
  18. * 实例化文本画笔并设置参数
  19. */
  20. mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG | Paint.LINEAR_TEXT_FLAG);
  21. mTextPaint.setTextAlign(Paint.Align.CENTER);
  22. }
  23. @Override
  24. public boolean onTouchEvent(MotionEvent event) {
  25. // 每次触发TouchEvent重置isNextPage为true
  26. isNextPage = true;
  27. /*
  28. * 判断当前事件类型
  29. */
  30. switch (event.getAction() & MotionEvent.ACTION_MASK) {
  31. case MotionEvent.ACTION_DOWN:// 触摸屏幕时
  32. // 获取当前事件点x坐标
  33. mCurPointX = event.getX();
  34. /*
  35. * 如果事件点位于回滚区域
  36. */
  37. if (mCurPointX < mAutoAreaLeft) {
  38. // 那就不翻下一页了而是上一页
  39. isNextPage = false;
  40. pageIndex--;
  41. mClipX = mCurPointX;
  42. invalidate();
  43. }
  44. break;
  45. case MotionEvent.ACTION_MOVE:// 滑动时
  46. float SlideDis = mCurPointX - event.getX();
  47. if (Math.abs(SlideDis) > mMoveValid) {
  48. // 获取触摸点的x坐标
  49. mClipX = event.getX();
  50. invalidate();
  51. }
  52. break;
  53. case MotionEvent.ACTION_UP:// 触点抬起时
  54. // 判断是否需要自动滑动
  55. judgeSlideAuto();
  56. /*
  57. * 如果当前页不是最后一页
  58. * 如果是需要翻下一页
  59. * 并且上一页已被clip掉
  60. */
  61. if (!isLastPage && isNextPage && mClipX <= 0) {
  62. pageIndex++;
  63. mClipX = mViewWidth;
  64. invalidate();
  65. }
  66. break;
  67. }
  68. return true;
  69. }
  70. /**
  71. * 判断是否需要自动滑动
  72. * 根据参数的当前值判断自动滑动
  73. */
  74. private void judgeSlideAuto() {
  75. /*
  76. * 如果裁剪的右端点坐标在控件左端十分之一的区域内，那么我们直接让其自动滑到控件左端
  77. */
  78. if (mClipX < mAutoAreaLeft) {
  79. while (mClipX > 0) {
  80. mClipX--;
  81. invalidate();
  82. }
  83. }
  84. /*
  85. * 如果裁剪的右端点坐标在控件右端十分之一的区域内，那么我们直接让其自动滑到控件右端
  86. */
  87. if (mClipX > mAutoAreaRight) {
  88. while (mClipX < mViewWidth) {
  89. mClipX++;
  90. invalidate();
  91. }
  92. }
  93. }
  94. @Override
  95. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  96. // 获取控件宽高
  97. mViewWidth = w;
  98. mViewHeight = h;
  99. // 初始化位图数据
  100. initBitmaps();
  101. // 计算文字尺寸
  102. mTextSizeNormal = TEXT_SIZE_NORMAL * mViewHeight;
  103. mTextSizeLarger = TEXT_SIZE_LARGER * mViewHeight;
  104. // 初始化裁剪右端点坐标
  105. mClipX = mViewWidth;
  106. // 计算控件左侧和右侧自动吸附的区域
  107. mAutoAreaLeft = mViewWidth * 1 / 5F;
  108. mAutoAreaRight = mViewWidth * 4 / 5F;
  109. // 计算一度的有效距离
  110. mMoveValid = mViewWidth * 1 / 100F;
  111. }
  112. /**
  113. * 初始化位图数据
  114. * 缩放位图尺寸与屏幕匹配
  115. */
  116. private void initBitmaps() {
  117. List<Bitmap> temp = new ArrayList<Bitmap>();
  118. for (int i = mBitmaps.size() - 1; i >= 0; i--) {
  119. Bitmap bitmap = Bitmap.createScaledBitmap(mBitmaps.get(i), mViewWidth, mViewHeight, true);
  120. temp.add(bitmap);
  121. }
  122. mBitmaps = temp;
  123. }
  124. @Override
  125. protected void onDraw(Canvas canvas) {
  126. /*
  127. * 如果数据为空则显示默认提示文本
  128. */
  129. if (null == mBitmaps || mBitmaps.size() == 0) {
  130. defaultDisplay(canvas);
  131. return;
  132. }
  133. // 绘制位图
  134. drawBtimaps(canvas);
  135. }
  136. /**
  137. * 默认显示
  138. *
  139. * @param canvas
  140. *            Canvas对象
  141. */
  142. private void defaultDisplay(Canvas canvas) {
  143. // 绘制底色
  144. canvas.drawColor(Color.WHITE);
  145. // 绘制标题文本
  146. mTextPaint.setTextSize(mTextSizeLarger);
  147. mTextPaint.setColor(Color.RED);
  148. canvas.drawText("FBI WARNING", mViewWidth / 2, mViewHeight / 4, mTextPaint);
  149. // 绘制提示文本
  150. mTextPaint.setTextSize(mTextSizeNormal);
  151. mTextPaint.setColor(Color.BLACK);
  152. canvas.drawText("Please set data use setBitmaps method", mViewWidth / 2, mViewHeight / 3, mTextPaint);
  153. }
  154. /**
  155. * 绘制位图
  156. *
  157. * @param canvas
  158. *            Canvas对象
  159. */
  160. private void drawBtimaps(Canvas canvas) {
  161. // 绘制位图前重置isLastPage为false
  162. isLastPage = false;
  163. // 限制pageIndex的值范围
  164. pageIndex = pageIndex < 0 ? 0 : pageIndex;
  165. pageIndex = pageIndex > mBitmaps.size() ? mBitmaps.size() : pageIndex;
  166. // 计算数据起始位置
  167. int start = mBitmaps.size() - 2 - pageIndex;
  168. int end = mBitmaps.size() - pageIndex;
  169. /*
  170. * 如果数据起点位置小于0则表示当前已经到了最后一张图片
  171. */
  172. if (start < 0) {
  173. // 此时设置isLastPage为true
  174. isLastPage = true;
  175. // 并显示提示信息
  176. showToast("This is fucking lastest page");
  177. // 强制重置起始位置
  178. start = 0;
  179. end = 1;
  180. }
  181. for (int i = start; i < end; i++) {
  182. canvas.save();
  183. /*
  184. * 仅裁剪位于最顶层的画布区域
  185. * 如果到了末页则不在执行裁剪
  186. */
  187. if (!isLastPage && i == end - 1) {
  188. canvas.clipRect(0, 0, mClipX, mViewHeight);
  189. }
  190. canvas.drawBitmap(mBitmaps.get(i), 0, 0, null);
  191. canvas.restore();
  192. }
  193. }
  194. /**
  195. * 设置位图数据
  196. *
  197. * @param bitmaps
  198. *            位图数据列表
  199. */
  200. public synchronized void setBitmaps(List<Bitmap> bitmaps) {
  201. /*
  202. * 如果数据为空则抛出异常
  203. */
  204. if (null == bitmaps || bitmaps.size() == 0)
  205. throw new IllegalArgumentException("no bitmap to display");
  206. /*
  207. * 如果数据长度小于2则GG思密达
  208. */
  209. if (bitmaps.size() < 2)
  210. throw new IllegalArgumentException("fuck you and fuck to use imageview");
  211. mBitmaps = bitmaps;
  212. invalidate();
  213. }
  214. /**
  215. * Toast显示
  216. *
  217. * @param msg
  218. *            Toast显示文本
  219. */
  220. private void showToast(Object msg) {
  221. Toast.makeText(mContext, msg.toString(), Toast.LENGTH_SHORT).show();
  222. }
  223. }
本文转自  http://blog.csdn.net/aigestudio/article/details/42678541

Android翻页效果原理实现之翻页的尝试相关推荐

  1. Android 实现书籍翻页效果----原理篇

    之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫,在android上也有像laputa和ireader等应用实现有这个特效,在网上搜索了一下好像也没有现成的例子,所以自己动手实现了一个,现 ...

  2. Android翻页效果原理实现之引入折线

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 尊重原创 ...

  3. Android移动开发之【Android实战项目】DAY15-翻页效果原理

    在<自定义控件其实很简单>系列的前半部分中我们用了整整六节近两万字两百多张配图讲了Android图形的绘制,虽然篇幅很巨大但仍然只是图形绘制的冰山一角,旨在领大家入门,至于修行成果就看各位 ...

  4. ppt怎么把图片做成翻书效果_ppt怎么做出翻页效果图文教程

    怎么才能把ppt做出翻页效果呢?新手不会,上网找怕麻烦,而且教程太乱没有统一的答案怎么办,哪里有更好的方法?下面学习啦小编就为你提供ppt如何做出翻页效果的方法啦! ppt做出翻页效果的方法步骤 首先 ...

  5. 书翻页效果php,Css实现翻书效果

    如何实现翻书效果在一些小说站中经常应用,其实实现起来也很简单,下面是用div+css 实现翻书效果. body{ overflow: hidden; margin: 0; padding: 0; } ...

  6. html图片翻页效果代码,js图片翻书效果代码分享

    这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆 ...

  7. ppt怎么把图片做成翻书效果_ppt如何制作翻书效果 ppt翻书效果怎么制作

    相信说起PPT,很多的网友经常都会使用到,无论是工作党还是学生党,经常都会使用到PPT进行会议演示吧,而PPT中有非常多的繁杂的各种制作效果,其中有一个翻书效果,好多网友都表示不知道怎么制作,那么下面 ...

  8. ajax实现翻书效果,jquery实现的翻书效果

    插件描述:利用jquery插件实现的类似图书翻书效果功能 Booklet是一个基于jQuery库的实现网页上翻书动画效果的插件,在jBooklet页面上可以写任何支持html的内容,而软件设置相当简单 ...

  9. ppt怎么把图片做成翻书效果_PPT怎么制作翻书效果？PPT制作翻书效果教程

    PPT是我们经常使用的幻灯片制作软件,制作的幻灯片可以进行播放.那么为了使PPT内容更加的丰富.生动,我们可以在制作PPT的时候添加一些动画效果,今天小编要教的大家的是PPT中的翻书动画效果,有兴趣的 ...

最新文章

  1. Java中“==”的使用，以及“==”和equal的比较
  2. python3初学者注意事项
  3. Vsphere 6.0
  4. java设计模式0--设计模式简介
  5. 软件维护费 一般按照多少比例_2021年国家电网招聘：笔试进面一般是多少比例？...
  6. R:matlab交互，数据调用
  7. C语言再学习 -- 存储类、链接
  8. SAP Spartacus如何使用自定义的Cart Service
  9. 光模块的参数有哪些呢？
  10. 一张图学会Xmind创建思维导图【转载】
  11. java 线程管理_Java平台线程管理
  12. OSPFv3报文中Option字段变化简介
  13. 【Meachine Learning】lecture1 --吴恩达
  14. MapReduce实现WordCount
  15. STM32的ucgui移植
  16. 计算机 仿真 流体力学剪切应力,基于影像的计算流体力学在冠状动脉疾病中的研究进展...
  17. vue实现pdf在线查看功能 vue-pdf
  18. kubectl命令的使用、滚动更新以及回滚操作
  19. CDH集群搭建（CDH 6.0.1）
  20. 澳洲学计算机难毕业吗,澳洲新南威尔士大学计算机专业好吗

热门文章

  1. GB2312 Unicode转换表
  2. autoCAD2010 块
  3. Office Excel 如何把多个单元格的内容拼接
  4. fedora23 安装搜狗输入法
  5. 宽心（星云大师的人生幸福课）
  6. 那些你不知道的PS大片摄影
  7. python自制简单懒人听书系统
  8. linux NTP时间服务器Chrony配置
  9. 代购系统源码／淘宝代购程序／华人代购／代购系统模板/外贸代购建站/集运系统/淘宝代购系统，PHP系统代码说明
  10. L2-036 网红点打卡攻略 (25 分)-PAT 团体程序设计天梯赛 GPLT