一款集成简单、扩展方便的阅读器框架<二>

前言

在上一篇中我们介绍了Reader的基本用法。有同学提出了一些非常好的建议，所以在写<二>的时候完善了一些功能，并且修改了一些bug。

如果你还没有看Reader的基本用法，建议先看一款集成简单、扩展方便的阅读器框架<一> 。

本篇是在上一篇的基础上进行扩展，实现一个完整的阅读器。并且我们采用真正的网络数据，而不是本地数据。

首先，添加菜单、设置和目录，最终效果图如下（额，亮度调节的效果无法用gif表现出来）：

添加菜单、设置和目录主要处理好事件冲突，没有太多难点，具体可以查看源码，这里不再赘述。

这个效果能满足产品的基本需求了，但是实际上产品需求混乱复杂，比如修改电池的样式，去掉总百分比，阅读页上插入View并且需要点击效果，插入广告，复制文字添加想法，文字从右向左竖排展示（类似古书）等等...

本篇我们就一起来扩展这些功能，通过扩展提供解决问题的思路，我们要扩展的归纳起来有下面三点：

修改样式
- 元素样式：以自定义电池为例
- 文字排版样式：以古书风格样式为例
添加View并支持点击事件：以添加广告为例
文字复制添加想法

接下来我们主要对于以上三点进行自定义

修改样式

1.元素样式（以画电池为例）

Reader所有界面元素的显示（即真正调用canvas.drawXXX()）实在ReaderResolve.class文件中实现。ReaderResolve中有一系列的drawXXX方法可以被重写。比如：

drawMarginTitle(Canvas canvas, @Nullable String title, int x, int y, Paint paint)

画边缘的标题；

drawPagination(Canvas canvas, int pageIndex, int pageSum, float x, int y, Paint paint)

画边缘的页码；

drawBattery(Canvas canvas, Paint batteryPaint, int battery, Rect outRect, Rect innerRect)

画电池，其中battery是电池的电量（总电量为100）；

drawTime(Canvas canvas, String time, int x, float y, Paint marginPaint)

画时间；

drawPercentage(Canvas canvas, float percent, float x, float y, Paint marginPaint)

画总百分比；

drawLineText(Canvas canvas, ShowLine showLine, float x, float y, float textHeight)

画某一行文字；

等等...

所以关于这些元素的修改非常简单，如果要画自定义的总百分比，只需要重写ReaderResolve的drawPercentage()方法即可，画自定义的电池只需要重写drawBattery()方法即可。这里以去掉百分比，画自定义图片电池为例。

我找了一张电池的图片battery.png，我们就来画这个电池吧。

 public class MyReaderResolve extends ReaderResolve {
  
      @Override
      protected void drawPercentage(Canvas canvas, float percent, float x, float y, Paint marginPaint) {
  //        super.drawPercentage(canvas, percent, x, y, marginPaint);
          // 不画页码只需要注掉super.drawPagination()既可.
      }
  
      @Override
      protected void drawBattery(Canvas canvas, Paint batteryPaint, int battery, Rect outRect, Rect innerRect) {
          Bitmap batteryBp = BitmapFactory.decodeResource(MyApplication.getApplication().getResources(), R.drawable.battery);
          int center = outRect.top + outRect.height() / 2;
          Rect rect = new Rect(outRect.left, center - 30, outRect.left + 60, center + 30);
          canvas.drawBitmap(batteryBp, null, rect, null);
      }
  }

最后不要忘记

 readerManager.setCustomReaderResolve(new MyReaderResolve());

2.文字排版样式（以古书为例）

实现这种效果要比修改样式稍微复杂，这种古书样式的原理和我们从左向右、从上到下画文字的原理是一样的。

首先，将一整章的文字分为若干行，每行都是一个showLine对象，整章就可以转化为List<ShowLine>，当然每一行有可能是以换行符结束，也有可能是这一行的文字达到了最多能显示的文字个数；

然后，通过公式每页的行数 = (屏幕宽度- 左右边距)/(文字宽度+行间距)计算出每一页最多能显示多少行；

最后，画ShowLine对象所封装的所有字符。

show me the code?

由于这种排版需要重新计算一页能显示多少行，一行能最多显示多少文字，修改MyReaderResolve重新计算参数。（代码比较长，不需要看懂每行代码，知道原理即可。）

      @Override
      public void calculateChapterParameter() {
          //省略部分代码
          //除边缘区域外的区域宽度
          int usableWidth = mAreaWidth - paddingLeft - paddingRight;
          //除边缘区域外的区域高度
          int usableHeight = mAreaHeight - paddingTop - paddingBottom;
  
          //大标题转换为行List
          mChapterNameLines = TextBreakUtils.breakToLineList(mTitle, usableHeight, 0, mChapterPaint);
  
          //计算第0页大章节标题所占宽度
          float titleWidth = mChapterPaint.measureText("正");
          float bodyWidth = mMainBodyPaint.measureText("正");
          mChapterTitleWidth = (int) (mChapterNameLines.size() * (titleWidth + mReaderConfig.getLineSpace()) * 1.5f);
  
          //第0页 能展示多少行正文
          mLineNumPerPageInFirstPage = (int) ((usableWidth - mChapterTitleWidth) / (bodyWidth + mReaderConfig.getLineSpace()));
  
          //正常情况下（除第0页）一页能展示多少行
          mLineNumPerPageWithoutFirstPage = (int) (usableWidth / (bodyWidth + mReaderConfig.getLineSpace()));
  
          //正文所占行数
          if (!android.text.TextUtils.isEmpty(mContent)) {
              mShowLines = TextBreakUtils.breakToLineList(mContent, usableHeight, 0, mMainBodyPaint);
          }
          //计算总页数
          if (mShowLines != null) {
              mPageSum = mShowLines.size() - mLineNumPerPageInFirstPage <= 0 ?
                      1 : ((mShowLines.size() - mLineNumPerPageInFirstPage) - 1) / Math.max(1, mLineNumPerPageWithoutFirstPage) + 1 + 1;
              calculatePageIndex();
          } else {
              mPageSum = -1;
          }
      }

都是一些数学计算，可以根据自己的方式去实现。

由于我们需要重新绘制标题和正文，所以覆盖父类画标题和正文的两个方法

@Override
protected void maybeDrawChapterTitle(Canvas canvas) {
    if (mPageIndex == 0) {
        mChapterPaint.setFakeBoldText(true);
        Paint.FontMetrics pfm = mChapterPaint.getFontMetrics();
  
        // 标题开始x位置
        float x = mAreaWidth - (mReaderConfig.getPadding()[2] + mChapterPaint.measureText("正") + mReaderConfig.getLineSpace() / 2);

        // 取出每一行进行绘制
        for (int i = 0; i < mChapterNameLines.size(); i++) {
            // 标题y位置
            float y = mReaderConfig.getPadding()[1] + pfm.bottom - pfm.top;
            String lineData = mChapterNameLines.get(i).getLineData();
             // 画当前行的每个字符
            for (int j = 0; j < lineData.length(); j++) {
                canvas.drawText(lineData.substring(j, j + 1), x, y, mChapterPaint);
                y += (pfm.bottom - pfm.top);
            }
            x -= (mChapterPaint.measureText("正") + mReaderConfig.getLineSpace());
        }
    }
}

画正文跟画章节标题类似，这里贴上代码（可以忽略不看）

  @Override
  protected void drawMainBodyArea(Canvas canvas) {
      //画正文
      if (mShowLines == null || mShowLines.size() <= 0)
          return;
 
      Paint.FontMetrics fm = mMainBodyPaint.getFontMetrics();
      float textHeight = fm.bottom - fm.top;
 
      float x = mAreaWidth - (mReaderConfig.getPadding()[2] + mMainBodyPaint.measureText("正") + mReaderConfig.getLineSpace() / 2);
      if (mPageIndex == 0) {
          x -= mChapterTitleWidth;
      }
 
      for (int i = 0; i < (mPageIndex == 0 ? mLineNumPerPageInFirstPage : mLineNumPerPageWithoutFirstPage); i++) {
          //要画的这行在整章中的索引（那么在整章中前面就有 索引数 行数）
          float y = mReaderConfig.getPadding()[1] + textHeight;
 
          int lineInChapter;
          if (mPageIndex == 0) {
              lineInChapter = i;
          } else {
              lineInChapter = mLineNumPerPageWithoutFirstPage * (mPageIndex - 1) + mLineNumPerPageInFirstPage + i;
          }
          //如果是最后一页可能当前行数超过总行数
          if (lineInChapter > mShowLines.size() - 1) {
              break;
          }
  
         String lineData = mShowLines.get(lineInChapter).getLineData();
           for (int j = 0; j < lineData.length(); j++) {
               canvas.drawText(lineData.substring(j, j + 1), x, y, mMainBodyPaint);
               y += textHeight;
           }
           x -= (mReaderConfig.getLineSpace() + mMainBodyPaint.measureText("正"));
       }
   }

最终效果：

添加子View

本来想以添加广告为例，奈何腾讯广告联盟连续审核不通过。所以就以一般的View为例，点击事件都是提前定义好的。

添加View的两个方法：

addView(View child, ChildInPage childInPage)
addView(View child, ViewGroup.LayoutParams params, ChildInPage childInPage)

这两个方法跟原生的方法类似，仅仅多了一个ChildInPage参数，这个参数其实就是说明将View展示在哪一页的，有三个可选值：

 public enum ChildInPage {
          // 添加到第0页
          FIRST_PAGE,
          // 添加到每一页
          EVERY_PAGE,
          // 添加到最后一页
          LAST_PAGE
      }

所以，如果你要添加到最后一页只需要

  View view = LayoutInflater.from(this).inflate(R.layout.last_page_view_layout, null);
  mReaderView.addView(view, ReaderView.ChildInPage.LAST_PAGE);

添加到第一页只需要将addView()的最后一个参数修改为ReaderView.ChildInPage.FIRST_PAGE即可。

如果调用原生的addView一些列方法，将会在每一页都添加View。

建议不要连续每一页都添加View，首先不利于体验，阅读器本身应该展示更多的文字。其次，连续添加View在翻页时稍卡🤦‍，（这才是我担心的，本来想好好优化一下，但是这几天问的最多的就是能否添加View的问题，所以索性先加上接口）

添加了View后，安理文字的排版也发生变化，需要修改重新计算文字的排版等。但是最近的确挺忙的，再加上目前的文字解析方式也不太好，所以后续再优化吧，大家也可以自行优化哈。

牛皮纸效果

是啥牛皮纸效果，我也不知道。我不知道该怎么描述这种效果，所以就叫它牛皮纸效果吧，下面这三种效果分别是纯颜色和牛皮纸效果。

pager0.png

pager1.png

pager2.png

有什么不同？

第一个是纯颜色的背景，第二个和第三个是不是越来越有纸张的感觉了？

阅读器默认使用牛皮纸效果，如果要关闭通过

void setOpenPaperEffect(boolean openPaperEffect)方法关闭即可。

目前的效果还是比较糙的，大家可以自行修改。最近实在是没时间啦，现在还处于无工作状态，苦逼啊！！

文字复制

日后再说啦