android中span_android開發中如何實現手寫輸入的記事本

㈠ android實現復雜table表格合並單元格

可以通過Tablelayout布局的layout_span屬性實現，layout_span指定該單元格占據的列數

1、Tablelayout簡介

Tablelayout類以行和列的形式對控制項進行管理，每一行為一個TableRow對象，或一個View控制項。當為TableRow對象時，可在TableRow下添加子控制項，默認情況下，每個子控制項占據一列。當為View時，該View將獨佔一行。

2、TableLayout行列數的確定

TableLayout的行數由開發人員直接指定，即有多少個TableRow對象（或View控制項），就有多少行。

TableLayout的列數等於含有最多子控制項的TableRow的列數。如第一TableRow含2個子控制項，第二個TableRow含3個，第三個TableRow含4個，那麼該TableLayout的列數為4.

3、TableLayout可設置的屬性詳解

TableLayout可設置的屬性包括全局屬性及單元格屬性。

單元格屬性，有以下2個參數：

android:layout_column 指定該單元格在第幾列顯示

android:layout_span 指定該單元格占據的列數（未指定時，為1）

示例：

java">android:layout_column="1"該控制項顯示在第1列
android:layout_span="2"該控制項占據2列

4、一個TableLayout布局的實例

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="3dip"
>
<!--1個TableLayout，用於描述表中單元格的屬性，包括：android:layout_column及android:layout_span-->
<TextView
android:text="表:單元格設置：指定單元格屬性設置"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:id="@+id/table2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="3dip">
<TableRow>
<Buttonandroid:text="第0列"/>
<Buttonandroid:text="第1列"/>
<Buttonandroid:text="第2列"/>
</TableRow>

<TableRow>
<TextViewandroid:text="我被指定在第1列"android:layout_column="1"/>
</TableRow>

<TableRow>
<TextView
android:text="我跨1到2列，不信你看！"
android:layout_column="1"
android:layout_span="2"
/>
</TableRow>

</TableLayout>

㈡如何實現一個 Android 端的富文本編輯器

在 Android 上實現富文本編輯器的思路大致分為三種：

使用多種 Layout 布局，每一種布局對應一種 HTML 格式，比如圖片，比如順序列表等。具體的實現例子可以參考這個鏈接。 Medium 和
Evernote 的富文本編輯就是採用這種方式實現的。總體來說比較復雜。

WebView + JavaScript 實現。現在 Web 端有很多成熟的 JavaScript 富文本編輯庫，比如 Squire ，你只需要做好
WebView 和 JavaScript 的交互就可以了(多寫回調函數)。理論上雖然是這么說，但是在實現過程你需要解決 WebView 的兼容性問題(
Android 4.4 及其以上版本和 4.4 以下版本的 WebView 內核不一樣)，以及其他一些不可預見的問題(比如就遇到無法粘貼文字的問題)。

EditText + Span 。 Android 的 TextView 原生支持諸如粗體、刪除線、引用等 Span
，要實現簡單的富文本編輯需求，可操作性還是比較大的。綜合再三，選擇了這種方式來實現自己的需求。

既然決定使用 EditText + Span 的方式來實現，必然要對相關的 API 有所了解。

首先來了解一下 Span 。Span 是一個強大的概念，有興趣深入的同學推薦直接閱讀這篇譯文。

在這里主要使用兩種類型的 Span ：

繼承自 CharacterStyle 的 Span ，比如 StyleSpan ，可以在字元級別上添加粗體，下劃線等。

繼承自 ParagraphStyle 的 Span ，比如 QuoteSpan ，可以為段落級別的文本添加引用。

接著需要一個可以將 Span 的效果設置進去的文本結構(即實現了 Spannable 介面)， SpannableStringBuilder
是個不錯的選擇，同時 EditText 提供的 getEditableText() 方法也可以獲得。通常只需要 getEditableText()
就可以了，但是在面對一些細節部分，可以使用 SpannableStringBuilder 預先設置相應的 Span ，再替換到原來的文本中。

設置 Span 的方式也很簡單，需要調用 Spannable.setSpan(Object what, int start, int end, int
flags) 這個方法即可，方法中 4 個參數的解釋如下：

Object what ，傳入你使用的 Span 對象。

int start ，設置 Span 的開始位置。

int end ，設置 Span 的結束位置。

int flags ，代表設置 Span 的作用域。

在這里重點介紹一下 int flags 這個參數，它接受 4 種類型的參數，分別是：

Spanned.SPAN_INCLUSIVE_EXCLUSIVE ，表示你在設置 Span 的區域之前輸入文字，輸入的文字也會受到 Span
的影響。

Spanned.SPAN_INCLUSIVE_INCLUSIVE ，表示你在設置 Span 的區域前後輸入文字，輸入的文字都後受到 Span
的影響。

Spanned.SPAN_EXCLUSIVE_EXCLUSIVE ，表示你在設置 Span 的區域中出輸入文字，輸入的文字才會受到 Span
的影響。

Spanned.SPAN_EXCLUSIVE_INCLUSIVE ，表示你在設置 Span 的區域之後輸入文字，輸入的文字也會受到 Span
的影響。

「受到影響」的意思就是，仍然會保持你設置的 Span 的樣式，比如選擇Spanned.SPAN_EXCLUSIVE_INCLUSIVE
設置了一段文字的粗體，那麼在這段文字後新輸入的文字，也會是粗體。在這里推薦使用Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
參數，畢竟其他幾種參數相對不是很好控制，而且會給使用的人帶來的疑惑。認為一個操作代表的行為應當是准確沒有歧義的。

好，到這里已經知道大致怎麼作出一個富文本編輯器組件的樣子了，無非是指定開始位置和結束位置，再設置相應的 Span
即可。至於設置的時候採取什麼樣的規則，你可以自己定製。但僅僅解決了編輯的問題，仍然存在導入的問題和導出的問題。

導入的問題十分簡單， Android SDK 中提供了 Html.fromHtml() 這個方法，可以很輕松地將 HTML 字元串轉換為所需的
Spanned 對象。但是需要注意的是， Html.fromHtml() 並不支持所有的 HTML 標簽，比如無序列表就不支持，因此你需要自己實現
Html.TagHandler 介面來處理自己所需的標簽，可以參考這個鏈接，實現了刪除線和簡單無序列表的支持。

面對粗體、斜體這樣字元級別的樣式， Html.fromHtml()
會自然而然的解析，該添加換行的地方就添加換行，並沒有什麼問題;但是面對引用、無序列表這樣段落級別的樣式，該方法會追加一個換行，也就是兩個換行操作，相當於多出一個空行。通常來說認為一個
對應兩個
，但是如果你有特別需求的話，也可以通過前面說的那樣，自己來解析，而不是用系統默認的方式。

之前介紹了如何導入，想必你也十分清楚，必然有一個對應的Html.toHtml() 方法!沒錯，但是遺憾的是，這個方法也不全支持所有 Span
，比如列表就不支持。不過沒有關系， Html.toHtml() 這個方法本身的源碼簡潔易懂，可以參考著實現。

在這里重點說明 Spannanle 的一個介面方法 nextSpanTransition(int start, int limit, Class
type) ，這個方法會在你指定的文本范圍內，返回下一個你指定的 Span 類型的開始位置，依照這個方法，就可以逐層掃描指定的 Span
，而不用同時考慮其他類型的 Span 的影響，十分有用。

最後盡管說了這么多，導入導出還是有一個比較關鍵的問題，即導入的內容和導出的內容要保持一致，在這點上目前我還比較難以實現，只能說盡量控制吧，必要的時候還需要使用一下正則來處理導入導出的文本。

㈢ android開發中如何實現手寫輸入的記事本

實現手寫功能的主要步驟：

1. 自定義兩個View,一個是TouchView,用於在上面畫圖，另一個是EditText,用於將手寫的字顯示在其中，並且，要將兩個自定義View通過FrameLayout幀式布局重疊在起，以實現全屏手寫的功能。

2 在TouchView中實現寫字，並截取畫布中的字以Bitmap保存。

3. 設置定時器，利用handle更新界面。

下面是實現的細節：

1. 手寫的界面設計：

如上圖所示，和上節的畫板界面一致，底部分選項菜單欄，有5個選項，分別是調整畫筆大小，畫筆顏色，撤銷，恢復，以及清空，對於這些功能，之後幾節再實現。

布局文件activity_handwrite.xml

</imageview></relativelayout>

可以看出，裡面有兩個自定義view，並且通過FrameLayout重疊在一起。

先來看com.example.notes.LineEditText，這個其實和添加記事中的界面一樣，就是自定義EditText,並且在字的下面畫一條線。

LineEditText.java

public class LineEditText extends EditText {

private Rect mRect;

private Paint mPaint;

public LineEditText(Context context, AttributeSet attrs) {

// TODO Auto-generated constructor stub

super(context,attrs);

mRect = new Rect();

mPaint = new Paint();

mPaint.setColor(Color.GRAY);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//得到EditText的總行數

int lineCount = getLineCount();

Rect r = mRect;

Paint p = mPaint;

//為每一行設置格式

for(int i = 0; i < lineCount;i++){

//取得每一行的基準Y坐標，並將每一行的界限值寫到r中

int baseline = getLineBounds(i, r);

//設置每一行的文字帶下劃線

canvas.drawLine(r.left, baseline+20, r.right, baseline+20, p);

}

另一個就是com.example.notes.TouchView，實現了繪制，及定時更新界面的功能，具體看代碼

TouchView.java

public class TouchView extends View {

private Bitmap mBitmap,myBitmap;

private Canvas mCanvas;

private Path mPath;

private Paint mBitmapPaint;

private Paint mPaint;

private Handler bitmapHandler;

GetCutBitmapLocation getCutBitmapLocation;

private Timer timer;

DisplayMetrics dm;

private int w,h;

public TouchView(Context context) {

super(context);

dm = new DisplayMetrics();

((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(dm);

w = dm.widthPixels;

h = dm.heightPixels;

initPaint();

}

public TouchView(Context context, AttributeSet attrs) {

super(context,attrs);

dm = new DisplayMetrics();

((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(dm);

w = dm.widthPixels;

h = dm.heightPixels;

initPaint();

}

//設置handler

public void setHandler(Handler mBitmapHandler){

bitmapHandler = mBitmapHandler;

}

//初始化畫筆，畫布

private void initPaint(){

mPaint = new Paint();

mPaint.setAntiAlias(true);

mPaint.setDither(true);

mPaint.setColor(0xFF00FF00);

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setStrokeJoin(Paint.Join.ROUND);

mPaint.setStrokeCap(Paint.Cap.ROUND);

mPaint.setStrokeWidth(15);

getCutBitmapLocation = new GetCutBitmapLocation();

//畫布大小

mBitmap = Bitmap.createBitmap(w, h,

Bitmap.Config.ARGB_8888);

mCanvas = new Canvas(mBitmap); //所有mCanvas畫的東西都被保存在了mBitmap中

mCanvas.drawColor(Color.TRANSPARENT);

mPath = new Path();

mBitmapPaint = new Paint(Paint.DITHER_FLAG);

timer = new Timer(true);

}

/**

* 處理屏幕顯示

Handler handler = new Handler(){

public void handleMessage(Message msg) {

switch (msg.what) {

case 1:

myBitmap = getCutBitmap(mBitmap);

Message message = new Message();

message.what=1;

Bundle bundle = new Bundle();;

bundle.putParcelable(bitmap,myBitmap);

message.setData(bundle);

bitmapHandler.sendMessage(message);

RefershBitmap();

break;

}

super.handleMessage(msg);

}

};

/**

* 發送消息給handler更新ACTIVITY

TimerTask task = new TimerTask() {

public void run() {

Message message = new Message();

message.what=1;

Log.i(線程, 來了);

handler.sendMessage(message);

}

};

//切割畫布中的字並返回

public Bitmap getCutBitmap(Bitmap mBitmap){

//得到手寫字的四周位置，並向外延伸10px

float cutLeft = getCutBitmapLocation.getCutLeft() - 10;

float cutTop = getCutBitmapLocation.getCutTop() - 10;

float cutRight = getCutBitmapLocation.getCutRight() + 10;

float cutBottom = getCutBitmapLocation.getCutBottom() + 10;

cutLeft = (0 > cutLeft ? 0 : cutLeft);

cutTop = (0 > cutTop ? 0 : cutTop);

cutRight = (mBitmap.getWidth() < cutRight ? mBitmap.getWidth() : cutRight);

cutBottom = (mBitmap.getHeight() < cutBottom ? mBitmap.getHeight() : cutBottom);

//取得手寫的的高度和寬度

float cutWidth = cutRight - cutLeft;

float cutHeight = cutBottom - cutTop;

Bitmap cutBitmap = Bitmap.createBitmap(mBitmap, (int)cutLeft, (int)cutTop, (int)cutWidth, (int)cutHeight);

if (myBitmap!=null ) {

myBitmap.recycle();

myBitmap= null;

}

return cutBitmap;

}

//刷新畫布

private void RefershBitmap(){

initPaint();

invalidate();

if(task != null)

task.cancel();

}

@Override

protected void onDraw(Canvas canvas) {

canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint); //顯示舊的畫布

canvas.drawPath(mPath, mPaint); //畫最後的path

}

private float mX, mY;

private static final float TOUCH_TOLERANCE = 4;

//手按下時

private void touch_start(float x, float y) {

mPath.reset();//清空path

mPath.moveTo(x, y);

mX = x;

mY = y;

if(task != null)

task.cancel();//取消之前的任務

task = new TimerTask() {

@Override

public void run() {

Message message = new Message();

message.what=1;

Log.i(線程, 來了);

handler.sendMessage(message);

}

};

getCutBitmapLocation.setCutLeftAndRight(mX,mY);

}

//手移動時

private void touch_move(float x, float y) {

float dx = Math.abs(x - mX);

float dy = Math.abs(y - mY);

if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {

mPath.quadTo(mX, mY, x, y);

// mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);//源代碼是這樣寫的，可是我沒有弄明白，為什麼要這樣？

mX = x;

mY = y;

if(task != null)

task.cancel();//取消之前的任務

task = new TimerTask() {

@Override

public void run() {

Message message = new Message();

message.what=1;

Log.i(線程, 來了);

handler.sendMessage(message);

}

};

getCutBitmapLocation.setCutLeftAndRight(mX,mY);

}

//手抬起時

private void touch_up() {

//mPath.lineTo(mX, mY);

mCanvas.drawPath(mPath, mPaint);

mPath.reset();

if (timer!=null) {

if (task!=null) {

task.cancel();

task = new TimerTask() {

public void run() {

Message message = new Message();

message.what = 1;

handler.sendMessage(message);

}

};

timer.schele(task, 1000, 1000); //2200秒後發送消息給handler更新Activity

}

}else {

timer = new Timer(true);

timer.schele(task, 1000, 1000); //2200秒後發送消息給handler更新Activity

}

//處理界面事件

@Override

public boolean onTouchEvent(MotionEvent event) {

float x = event.getX();

float y = event.getY();

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

touch_start(x, y);

invalidate(); //刷新

break;

case MotionEvent.ACTION_MOVE:

touch_move(x, y);

invalidate();

break;

case MotionEvent.ACTION_UP:

touch_up();

invalidate();

break;

}

return true;

}

這裡面的難點就是利用TimerTask和Handle來更新界面顯示，需要在onTouchEvent的三個事件中都要通過handle發送消息來更新顯示界面。

接下來就是在activity里通過handle來得到繪制的字，並添加在editText中。

關於配置底部菜單，以及頂部標題欄，這里不再贅述，直接如何將繪制的字得到，並添加在edittext中：

得到繪制字體的Bitmap

//處理界面

Handler handler = new Handler(){

@Override

public void handleMessage(Message msg) {

super.handleMessage(msg);

Bundle bundle = new Bundle();

bundle = msg.getData();

Bitmap myBitmap = bundle.getParcelable(bitmap);

InsertToEditText(myBitmap);

}

};

其中myBitmap就是取得的手寫字，保存在Bitmap中， InsertToEditText(myBitmap);是將該圖片添加在edittext中,具體如下：

private LineEditText et_handwrite;

et_handwrite = (LineEditText)findViewById(R.id.et_handwrite);

//將手寫字插入到EditText中

private void InsertToEditText(Bitmap mBitmap){

int imgWidth = mBitmap.getWidth();

int imgHeight = mBitmap.getHeight();

//縮放比例

float scaleW = (float) (80f/imgWidth);

float scaleH = (float) (100f/imgHeight);

Matrix mx = new Matrix();

//對原圖片進行縮放

mx.postScale(scaleW, scaleH);

mBitmap = Bitmap.createBitmap(mBitmap, 0, 0, imgWidth, imgHeight, mx, true);

//將手寫的字插入到edittext中

SpannableString ss = new SpannableString(1);

ImageSpan span = new ImageSpan(mBitmap, ImageSpan.ALIGN_BOTTOM);

ss.setSpan(span, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

et_handwrite.append(ss);

}

㈣ Android TextView使用及性能優化

TextView 是Android中最常用的控制項，在這里記錄下TextView 的用法；

在Android中可以使用系統自帶的4種字體：

在XML中使用 android:typeface="normal" 進行設置

將字體文件放到main/assets/fonts目錄下，使用Asset讀取字體後進行設置

使用 android:drawableLeft="@mipmap/ic_launcher" 可以設置一張圖片顯示在文字的上下左右，減少布局層級

使用Span能夠在一段TextView中設置不同顏色的字體，鏈接，圖片等內容

使用ClickableSpan 能夠設置一段文字的點擊事件

創建自己的MyClickableSpan：

之後使用SpannableStringBuilder來創建字元串，並使用setSpan來為字元串的一部分設置Span對象

其中setSpan()方法的最後一個參數標識有以下常量，這些常量標識著在 對SpannableStringBuilder進行insert時 添加的字元適用的規則：

Spanned.SPAN_EXCLUSIVE_EXCLUSIVE

Spanned.SPAN_EXCLUSIVE_INCLUSIVE

Spanned.SPAN_INCLUSIVE_EXCLUSIVE

Spanned.SPAN_INCLUSIVE_INCLUSIVE

前一個 EXCLUSIVE / INCLUSIVE 標識著在設置了Span的一段字元之前（緊挨著）插入字元時，被不被包含到Span范圍中， EXCLUSIVE 表示包含， INCLUSIVE 表示不包含；

第二個 EXCLUSIVE / INCLUSIVE 同理表示插入這段字元之後的效果；

ImageSpan用於在TextView中插入圖片，可以用來實現圖文混排

使用方法：

這樣實現的效果是文字與圖片底部進行對齊，如果需要圖片中線與文字中線對其，需要自己重寫ImageSpan

Android 中的TextView中存在著很多EditText中的特性，在setText()方法中會涉及到很多Span相關的操作，比如設置TextWatcher，重新構造Spannable等操作，在我們僅僅顯示靜態文本的時候這些操作都是沒有必要的（通過使用普通的TextView進行Debug來驗證普通的TextView的確是Span的）；

在大量顯示靜態文本的時候就可以通過StaticLayout來計算出TextView的布局信息，這項工作可以放到非UI線程來進行，能夠減少在setText()的時候UI線程的耗時，達到優化TextView性能的目的；

StaticLayout是TextView中用於顯示多行靜態文本的Layout，也是能夠支持SpannableString的，只是不能在Span變化之後重新Layout，所以在大部分場景下已經適用；

通過這個自定義的View來顯示Text，在onDraw()的時候直接使用layout來進行繪制，而設置需要顯示的文本則直接使用setLayout()來實現

使用下面給出的參考鏈接中的測試Demo在 ZTE A2017 Android7.1.1 高通820設備上，普通TextView在ListView中連續滾動的幀數是55幀，使用StaticLayout的結果為60幀

可以作為在APP使用CPU資源較多的情況下的優化手段

參考鏈接： TextView預渲染研究

在Android中，TextView的測量消耗了大量的時間，Android P中提供了PrecomputedText能夠將測量這個過程放到後台來執行，減輕對於UI線程的卡頓；

非Android P時，使用AppCompatTextView控制項，使用setTextFeature()方法來將文本的measure過程放到其他線程來執行，而不是直接將text應用於TextView；

在調用了這個方法之後如果對TextView進行邊距，文字大小等的設置都將會報錯；

Prefetch Text Layout in RecyclerView

PrecomputedTextCompat

在ListView中僅替換設置Text的方法時未測試出性能與普通方法有什麼優勢，猜測是ListView沒有在getView和顯示之間預留時間，

測試項目地址：

https://github.com/GavynZhang/PrecomuptedTextViewTest

導航:首頁 > 操作系統 > android中span

android中span

與android中span相關的資料