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相关的资料