1. 程式人生 > >Android AutoWrapTextView 解決中英文排版問題

Android AutoWrapTextView 解決中英文排版問題

nts 一行 .... read 轉換 png mar 繼承 tex

1.概述

最近項目有新需求,UED給了個卡券密碼的UI樣式,如圖:

技術分享

我一看很簡單啊,一個TextView解決問題,然後做好以後在模擬器裏一看.....

技術分享

納尼,這個時候才想起來,TextView 中英文在一起會有排版問題,那怎麽解決呢......

思路

剛開始的想法是一個字符一個字符的去繪制,繪制到最右邊的臨界點就換行繪制,結果實踐以後發現不同的字符之間的間距不一樣,顯示會非常淩亂,又沒有什麽好的方案解決這個間距問題,所以這個方案pass;

單個字符繪制不行那就一行一行繪制,根據View的長度把文本拆分成N行,然後一行一行的繪制。

2.實現

首先創建一個繼承自View的AutoWrapTextView

技術分享

init方法裏分別調用了initStyle方法和initPaint方法;

initStyle方法主要解析自定義的屬性

技術分享

屬性名含義都很明顯不用過多解釋,initPaint方法就是初始化一個文本畫筆

技術分享

接下來我們看看設置文本的方法setText方法

技術分享

首先把文本轉換成Char數組,然後循環數組把整個文本拆分成N行文本,下面來看看核心方法splitText方法

技術分享

首先創建一個屬性名為mSplitTextList的List集合用來存放拆分的文本;
mSingleTextWidth 為單行文本顯示的寬度;

currentSingleTextWidth 為當前一行累計計算的寬度;

然後開始循環Char數組,getSingleCharWidth方法就是計算單個Char的寬度;
如果currentSingleTextWidth 小於 mSingleTextWidth 就把Char添加到lineStringBuffer 當中,如果是最後一個Char就直接把lineStringBuffer添加到mSplitTextList集合當中

如果currentSingleTextWidth 大於 mSingleTextWidth,就把lineStringBuffer添加到mSplitTextList集合當中,重新給lineStringBuffer賦值,currentSingleTextWidth 歸0;

循環結束以後拆分好的文本就都添加到mSplitTextList集合當中了。

拆分完成以後循環mSplitTextList集合,得到每一行文本的Rect值,繪制文本的時候會用到,然後設置View的寬高。

接下來就是繪制方法drawText

技術分享

首先得到第一行文本距離頂部的高度marginTop,然後循環文本繪制每一行文本內容。

效果圖

我們來看下最後的效果

技術分享

至此整個類的邏輯分析就結束了,想看完整源碼的可以移步:

https://github.com/chenpengfei88/AutoWrapTextView

Android AutoWrapTextView 解決中英文排版問題