Android怎樣寫一款書籍閱讀器

小編給大家分享一下Android怎樣寫一款書籍閱讀器，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一款書籍閱讀器，需要以下功能才能說的上比較完整：

1. 文字頁面展示，即書頁；

2. 頁面之間的跳轉動畫，即翻頁動作；

3. 能夠在每一頁上記錄閱讀進度，即書簽；

4. 能夠自由選擇文字并標注，即筆記；

5. 能夠設置一些屬性，如屏幕亮度，字體大小，主體顏色等，即個性化設置。

書籍閱讀器

這篇文章帶來的就是如何打造這么一款閱讀器。（由于整體代碼量比較大，所以我只能說說我的實現思路再加上部分的核心代碼來說明，不會有太多的代碼展示。）

翻頁動作——搭建整個閱讀器的框架

在閱讀器上的翻頁動作無外乎仿真和平移這兩種動畫，翻頁時需要準備兩張頁面，一張是當前頁，另一張是需要翻轉的下一頁。翻頁的過程就是對這兩個頁面的剪輯。

這里就不贅述翻頁的原理了（仿真翻頁可以由貝塞爾曲線計算坐標繪制實現，平移翻頁則是簡單坐標平移變化），這里提供一些參考鏈接。

Github上的PageFlip庫

現在要做的就是將翻頁動作與 View 結合起來，我們新建一個 PageAnimController 內部實現翻頁動畫和動畫切換，同時設置 PageCarver 來監聽翻頁動作，目的是為了能夠讓 view 檢測到翻頁動作。

 public interface PageCarver {
 
  void drawPage(Canvas canvas, int index);//繪制頁內容
  Integer requestPrePage();//請求翻到上一頁
  Integer requestNextPage();//請求翻到下一頁
  void requestInvalidate();//刷新界面
  Integer getCurrentPageIndex();//獲取當前頁

  /**
   * 開始動畫的回調
   *
   * @param isCancel 是否是取消動畫
   */
  void onStartAnim(boolean isCancel);

  /**
   * 結束動畫的回調
   *
   * @param isCancel 是否是取消動畫
   */
  void onStopAnim(boolean isCancel);
 }

新建 BaseReaderView 作為閱讀器的基礎視圖，兩者結合以便控制閱讀器的翻頁效果。

public abstract class BaseReaderView extends View implements PageAnimController.PageCarver{

 /**
  * 將View的繪制事件傳送給 PageAnimController 實現動畫繪制過程中
  * @param canvas
  * @return
  */
 @Override
 protected void onDraw(Canvas canvas) {
  if (pageAnimController == null || !pageAnimController.dispatchDrawPage(canvas, this)) {
   drawPage(canvas, currentPageIndex);
  }
 }
 
 /**
  * 將View的觸摸事件傳送給 PageAnimController 以便實現翻頁動畫 
  * @param event
  * @return
  */
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  pageAnimController.dispatchTouchEvent(event, this);
  return true;
 }
}

但是在翻頁動畫中是需要無數次的調用 drawPage 來繪制界面的，為了減少界面計算的開支必須要有一個 Bitmap 緩存來降低消耗。復用時可以直接使用已經生成的bitmap.

/**
 * <p>
 * 頁面快照，用來存儲閱讀器每一頁的內容
 *
 * @author cpacm 2017/10/9
 */

public class PageSnapshot {
 private int pageIndex;
 private Bitmap mBitmap;
 private Canvas mCanvas;

 public Canvas beginRecording(int width, int height) {
  if (mBitmap == null) {
   mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_4444);
   mCanvas = new Canvas(mBitmap);
  } else {
   mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
  }
  return mCanvas;
 }

 public void draw(Canvas canvas) {
  if (null != mBitmap) {
   canvas.drawBitmap(mBitmap, 0, 0, null);
  }
 }

 public void destroy() {
  if (mBitmap != null && !mBitmap.isRecycled()) {
   mBitmap.recycle();
   mBitmap = null;
  }
 }
}

基礎模型如下圖所示：

頁面切換模型

現在我們來總結一下，這一部分我們搭建了閱讀器最基礎的框架，包括

(1) 翻頁動畫與閱讀器視圖的結合，能夠確保在View中正確監聽翻頁動作，保證整個翻頁動作的準確性。

(2) 利用 Bitmap 緩存優化繪圖流程，保證翻頁動畫的流暢性。而后包括文字，圖片等元素的顯示都是繪制在這個 Bitmap 上的。

書頁——組合模式，保證閱讀器高度可定制化

閱讀器模塊圖

一般來說，閱讀器獲取數據都是一章一章來的，不管是從網絡上還是本地。而獲取過來的數據閱讀器要進行分頁才能展示。如上圖所示，書頁展示由 PageElement 模塊負責，該模塊接收從 BookReaderView 傳入的章節數據，然后再經底下的4個模塊計算來分頁。

分頁模塊

1. PageElement，分頁模塊：功能包括將傳入的章節數據分成數個 PageData (生成的 PageData 個數即為該章節頁數，PageData 記錄了每一頁開頭文字在章節的位置，同時包含該頁面HeaderData, LineData,HeadrData 和 FooterData 數據等。各個 Data 里面記錄了相應的文字信息，可以快速的定位到章節內容中。)；繪制頁面；緩存章節數據以便無縫切換章節。

2. HeaderElement,頁頭部分：顯示章節的標題；繪制每一頁的頭部。

3. LineElement,文字行部分：測量一行文字需要的字數；測量行高；繪制行文字；繪制筆記內容；測量每一個字在屏幕中的位置，用于筆記功能；

4. ImageElement,圖片部分：測量圖片的寬高；繪制圖片。

5. FooterElement,頁尾部分：繪制每一頁的頁尾,包括進度，時間和電量。

 //摘自 PageElement 的 onDraw 方法
 @Override
 public void draw(Canvas canvas) {
  int index = drawPageIndex - startPageIndex;
  if (index < 0 || index >= pages.size()) return;
  BookPageData bookPageData = pages.get(index);
  int offsetX = bookSettingParams.paddingLeft;
  int offsetY = bookSettingParams.paddingTop;
  if (bookPageData == null) return;
  canvas.drawColor(bookSettingParams.getBgColor());
  bookHeaderElement.setChapterTitle(bookPageData.getChapterName());
  bookHeaderElement.setX(offsetX);
  bookHeaderElement.setY(offsetY);
  if (bookPageData.isChapterFirstPage()) {
   bookHeaderElement.drawFirstPage(canvas);
  } else {
   bookHeaderElement.draw(canvas);
  }

  bookFooterElement.setProgress(bookPageData.getPageIndex(), bookPageData.getPageNums());
  bookFooterElement.setX(offsetX);
  bookFooterElement.setY(offsetY + getHeight() - bookFooterElement.getHeight());
  bookFooterElement.draw(canvas);

  for (int i = 0; i < bookPageData.getDataList().size(); i++) {
   BookData bookData = bookPageData.getDataList().get(i);
   if (bookData instanceof BookLineData) {
    BookLineData bookLineData = (BookLineData) bookData;
    bookLineElement.setLineText(bookLineData.getContent());
    bookLineElement.setX(bookLineData.getPosition().x);
    bookLineElement.setY(bookLineData.getPosition().y);
    bookLineElement.drawWithDigests(canvas, bookLineData, bookReaderView.getCurrentDigests(index));
    //bookLineElement.draw(canvas);
   } else if (bookData instanceof BookImageData) {
    BookImageData bookImageData = (BookImageData) bookData;
    bookImageElement.setX(bookImageData.getPosition().x);
    bookImageElement.setY(bookImageData.getPosition().y);
    bookImageElement.syncDrawWithinBitmap(canvas, bookImageData, bookReaderView.getCacheBitmap(drawPageIndex));
   }
  }
 }

將書頁分成幾部分組合起來可以有效的減少代碼的耦合，而且可以自由的控制每一部分的修改，添加和移除。比如當以后我想要加個批注的功能，可以再添加一個新的 Element ,再復寫其測量方法和繪制方法，就可以很方便的使用了。

總結一下：

（1） PageElement 利用各個 Element 模塊將章節數據進行測量分頁，每一頁 PageData 記錄著 LineData,ImageData,HeaderData和FooterData信息。繪圖時需要將各個信息填入 Element 中

（2） 繪圖時調用 PageElement 的 draw 方法，其 draw 方法再調用 各個 Element 的 draw 方法以完成整個繪圖流程。

另外還需要提到的一點是閱讀器內部維護了一個書頁的隊列，該隊列緩存了由三個章節數據轉化而來的書頁列表。比如說你正在閱讀第六章，那么隊列里面緩存的就是第五章，第六章和第七章的數據，這樣就能實現上下章翻頁的無縫切換而不需要在翻至下一章時因為等待新的章節數據加載而中斷整個閱讀體驗。

/**
 * <p>
 * 章節緩存構成方案如下：
 * | -6,-5,-4,-3,-2,-1,0 | 1,2,3,4,5,6,7,8,9 | 10,11,12,13,14,15 | = pages
 * | cacheChapter1 | cacheChapter2 | cacheChapter3 |
 * startPageIndex = pageIndex:-6 endPageIndex = pageIndex:16
 * currentChapterStartIndex => pageIndex:1 => pages[7]
 * currentChapterEndIndex => pageIndex:10 => pages[16]
 * </p>
 */

書簽，筆記——記錄閱讀進度

書簽

書簽的本質就是記錄當前頁的第一個文字在整章文本的位置，然后再加上書籍的id,章節的id（或序號）就能準確定位。

筆記

要記錄筆記就需要文字選擇器來選擇文字，這個時候就需要知道每一個字在當前的坐標位置（之前用 LineElement 測量文字時已經生成每個文字的位置）。

為了達到上圖的效果，就必須要處理在當前頁的觸摸事件：

文字選擇流程

有些細節的處理沒有放到流程中，但大致意思是能明白的

// TextSelectorElement 上的觸摸分發方法
public boolean dispatchTouchEvent(final MotionEvent ev) {
 int key = ev.getAction();
 currentTouchPoint.set(ev.getX(), ev.getY());
 switch (key) {
  case MotionEvent.ACTION_DOWN:
   isPressInvalid = false;
   hasConsume = true;
   isDown = true;
   mTouchDownPoint.set(ev.getX(), ev.getY());
   // 該方法中會記錄isBookDigestDown的值
   checkIsPressDigests(ev.getX(), ev.getY());
   //判斷是否處于選擇模式
   if (!isSelect) {
    if (isBookDigestDown == 0) {
     postLongClickPerform(0);//提交長按時間
    }
   } else {
    // 判斷是否觸摸到選擇光標上，若是則可以拖動光標移動
    checkCurrentMoveCursor(ev);
   }
   break;
  case MotionEvent.ACTION_MOVE:
   float move = PointF.length(ev.getX() - mTouchDownPoint.x, ev.getY() - mTouchDownPoint.y);
   if (move > moveSlop) {
    isPressInvalid = true;
   }
   if (isPressInvalid) {
    removeLongPressPerform();
    if (isSelect) {
     // 關閉彈窗（包括筆記編輯框等）
     onCloseView();
     // 移動光標
     onMove(ev);
    } else {
     //未處于選擇模式下，相當于一個普通的點擊事件
     onPress(ev);
    }
   }
   break;
  case MotionEvent.ACTION_UP:
   hasConsume = false;
   removeLongPressPerform();
   if (isSelect) {
    // -1 表示為未觸摸到光標
    if (moveCursor == -1) {
     // 取消選擇模式
     setSelect(false);
     hasConsume = true;
    } else {
     //停止移動時，會打開筆記生成彈框
     onOpenDigestsView();
    }
    moveCursor = -1;
   } else {
    if (isBookDigestDown == 1) {
     onOpenNoteView();
     hasConsume = true;
    } else if (isBookDigestDown == 2) {
     onOpenEditView();
     hasConsume = true;
    } else {
     // 模擬成一個普通的點擊事件，會取消當前的選擇模式
     onPress(ev);
    }
   }
   invalidate();
   break;
  case MotionEvent.ACTION_CANCEL:
   hasConsume = false;
   removeLongPressPerform();
   break;
  default:
   break;
 }
 // 判斷選擇器是否消耗了當前事件
 return hasConsume || isSelect;
}

當然，筆記也要記錄當前選擇的書籍id,章節id(或序號)，文字在章節中的位置這些信息，方便定點跳轉。

設置——為閱讀器添磚加瓦

閱讀器設置界面

閱讀器的設置一般包括：界面亮度的調整，字體大小的調整，上下章的跳轉，書籍目錄筆記和書簽的展示，翻頁動畫的更改，日夜主題的更改。當一些設置需要閱讀器能夠在參數變化時及時響應，就得需要在設置變化時能及時更新 BookReaderView 下的各個 Element 模塊。

這里我是通過一個輔助類貫穿整個閱讀器來幫助更新各個模塊，該類記錄了閱讀器內部所有可設置的屬性，當各個模塊被通知需要更新時重新從該類中讀取參數并設置（比如畫筆的顏色，頁面的間距，字體的大小等）。

// 摘自 PageElement 下的設置屬性變化方法
// BookSettingParams 即為記錄閱讀器設置屬性的輔助類
@Override
public void update(ReaderSettingParams params) {
  bookSettingParams = (BookSettingParams) params;
  bookHeaderElement.update(bookSettingParams);
  bookFooterElement.update(bookSettingParams);
  bookLineElement.update(bookSettingParams);
  bookImageElement.update(bookSettingParams);

  initPageElement();
}

語音朗讀——為閱讀器添加輔助功能

語音朗讀

此處的語音朗讀使用的是訊飛的TTS引擎。如何使用引入TTS我這里就不具體描述了，重要的是在TTS的 onSpeakProgress(int progress, int beginPos, int endPos) 方法中可以獲取當前句子的朗讀進度。

當我們傳入一章文字時，TTS會自動幫助我們分段（會以，。等標點符號切割整篇文字），然后按段落來進行朗讀。上面 progress 代表該段落在整篇文字的進度，beginPos 代表該段落的起始字符在整篇文字的位置，endPos 代表該段落的末尾字符在整篇文字的位置。

既然能夠知道朗讀的位置，那就能知道朗讀時文字在屏幕的位置了（之前有說過 LineData 記錄了每個字符在屏幕中的位置），那剩下的就是怎么繪制的問題了。

/**
 * <p>
 * 聽書tts播放模組
 *
 * @author cpacm 2017/12/13
 */

public class BookSpeechElement extends ResElement implements SynthesizerListener {

  // .... 省略部分代碼
  
  // 從每一頁數據 PageData 中的 LineData 列表中獲取要繪制的區域
  private void updateDrawRect(int startPos, int endPos) {
    if (endPos <= offsetPosition || endPos == this.endPos) return;
    this.endPos = endPos;
    this.tempPos = startPos;
    int s = this.startPos + startPos + bookPageData.getStartPos() - offsetPosition;
    int e = this.startPos + endPos + bookPageData.getStartPos() - offsetPosition;
    drawRect.clear();
    for (BookLineData line : lineData) {
      if (line.startPos > e || line.endPos <= s) continue;
      if (line.startPos <= s && line.endPos <= e) {
        Rect startRect = line.getCharArea().get(s);
        Rect endRect = line.getCharArea().get(line.endPos - 1);
        Rect rect = new Rect(startRect.left, startRect.top, endRect.right, endRect.bottom);
        drawRect.add(rect);
      }
      if (line.startPos > s && line.endPos <= e) {
        Rect startRect = line.getCharArea().get(line.startPos);
        Rect endRect = line.getCharArea().get(line.endPos - 1);
        Rect rect = new Rect(startRect.left, startRect.top, endRect.right, endRect.bottom);
        drawRect.add(rect);
      }
      if (line.startPos > s && line.endPos > e) {
        Rect startRect = line.getCharArea().get(line.startPos);
        Rect endRect = line.getCharArea().get(e);
        Rect rect = new Rect(startRect.left, startRect.top, endRect.right, endRect.bottom);
        drawRect.add(rect);
      }
      if (line.startPos <= s && line.endPos > e) {
        Rect startRect = line.getCharArea().get(s);
        Rect endRect = line.getCharArea().get(e);
        Rect rect = new Rect(startRect.left, startRect.top, endRect.right, endRect.bottom);
        drawRect.add(rect);
      }
    }
    // 刷新當前書頁
    bookReaderView.flashCurrentPageSnapshot();
  }


  @Override
  public void draw(Canvas canvas) {
    if (!isSpeaking()) return;
    for (Rect rect : drawRect) {
      canvas.drawLine(rect.left, rect.bottom, rect.right, rect.bottom, paint);
    }
  }

  @Override
  public void destroy() {
    exitTts();
  }
  
  /*################## 語音合成的回調 ###################*/
  @Override
  public void onSpeakBegin() {}

  @Override
  public void onBufferProgress(int progress, int beginPos, int endPos, String info) { }

  @Override
  public void onSpeakPaused() {}

  @Override
  public void onSpeakResumed() {}

  @Override
  public void onSpeakProgress(int progress, int beginPos, int endPos) {
    // 根據朗讀的進度更新UI
    updateDrawRect(beginPos, endPos);
  }

  @Override
  public void onCompleted(SpeechError speechError) {}

  @Override
  public void onEvent(int i, int i1, int i2, Bundle bundle) {}
}

以上是“Android怎樣寫一款書籍閱讀器”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！