TextView添加SpannableString并设置点击色

通常在项目的注册等服务页面 , 会有一些条款 注册即表示同意《xx服务协议》 , 开发需要对服务协议的部分设置超链点击. 通常我们用 SpannableString 来实现富文本功能 , 下面将说明使用方法及遇到的问题.

在搜索引擎帮助下 , 常规做法是这样

1
2
3
4
5
6
7
8
9
10
11
      TextView tv = (TextView) findViewById(R.id.tv_content);
String content = "This is a text,click me" ;
SpannableString spannableString = new SpannableString(content);
spannableString.setSpan(new Clickable(v -> {
// 点击事件
}), start, end,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
// 必须设置否则无法点击
tv.setMovementMethod(LinkMovementMethod.getInstance());
// 不设置该属性,点击后会有背景色
tv.setHighlightColor(getResources().getColor(android.R.color.transparent));
tv.setText(spannableString);

这里使用 setHighlightColor(...) API 的原因是在点击富文本中的链接后 , 链接背景会变为系统主题中的默认 Highlight 颜色 , Android 4.0 以上默认是淡绿色(低版本中是黄色) , 产生 UI 效果的不协调 , 所以这里设置其为透明.

然而这样设置后 , 仍有点击超链的时候界面无任何 UI 响应 , 超链还有下划线等问题 , 于是需要进行一些自定义.

自定义

TouchableSpan.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public abstract class TouchableSpan extends ClickableSpan {
private boolean mIsPressed;
private int mNormalTextColor;
private int mPressedTextColor;

public TouchableSpan(int normalTextColor, int pressedTextColor) {
mNormalTextColor = normalTextColor;
mPressedTextColor = pressedTextColor;
}

public void setPressed(boolean isSelected) {
mIsPressed = isSelected;
}

@Override
public void updateDrawState(TextPaint ds) {
super.updateDrawState(ds);
ds.setColor(mIsPressed ? mPressedTextColor : mNormalTextColor);
ds.setUnderlineText(false);
}
}

设置文字点击颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
public class LinkTouchMovementMethod extends LinkMovementMethod {

private TouchableSpan mPressedSpan;

@Override
public boolean onTouchEvent(TextView textView, Spannable spannable, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
mPressedSpan = getPressedSpan(textView, spannable, event);
if (mPressedSpan != null) {
mPressedSpan.setPressed(true);
Selection.setSelection(spannable, spannable.getSpanStart(mPressedSpan),
spannable.getSpanEnd(mPressedSpan));
}
} else if (event.getAction() == MotionEvent.ACTION_MOVE) {
TouchableSpan touchedSpan = getPressedSpan(textView, spannable, event);
if (mPressedSpan != null && touchedSpan != mPressedSpan) {
mPressedSpan.setPressed(false);
mPressedSpan = null;
Selection.removeSelection(spannable);
}
} else {
if (mPressedSpan != null) {
mPressedSpan.setPressed(false);
super.onTouchEvent(textView, spannable, event);
}
mPressedSpan = null;
Selection.removeSelection(spannable);
}
return true;
}

private TouchableSpan getPressedSpan(TextView textView, Spannable spannable, MotionEvent event) {

int x = (int) event.getX();
int y = (int) event.getY();

x -= textView.getTotalPaddingLeft();
y -= textView.getTotalPaddingTop();

x += textView.getScrollX();
y += textView.getScrollY();

Layout layout = textView.getLayout();
int line = layout.getLineForVertical(y);
int off = layout.getOffsetForHorizontal(line, x);

TouchableSpan[] link = spannable.getSpans(off, off, TouchableSpan.class);
TouchableSpan touchedSpan = null;
if (link.length > 0) {
touchedSpan = link[0];
}
return touchedSpan;
}

}

工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
public class SpannableStringUtils {

private SpannableStringUtils() {
throw new UnsupportedOperationException("u can't instantiate me...");
}

/**
* 获取建造者
*
* @return {@link Builder}
*/
public static Builder getBuilder(@NonNull CharSequence text) {
return new Builder(text);
}

public static class Builder {

private int defaultValue = 0x12000000;
private CharSequence text;

private int flag;
@ColorInt
private int foregroundColor;
@ColorInt
private int backgroundColor;
@ColorInt
private int quoteColor;

private boolean isLeadingMargin;
private int first;
private int rest;

private boolean isBullet;
private int gapWidth;
private int bulletColor;

private float proportion;
private float xProportion;
private boolean isStrikethrough;
private boolean isUnderline;
private boolean isSuperscript;
private boolean isSubscript;
private boolean isBold;
private boolean isItalic;
private boolean isBoldItalic;
private String fontFamily;
private Layout.Alignment align;

private boolean imageIsBitmap;
private Bitmap bitmap;
private boolean imageIsDrawable;
private Drawable drawable;
private boolean imageIsUri;
private Uri uri;
private boolean imageIsResourceId;
@DrawableRes
private int resourceId;

private TouchableSpan clickSpan;
private String url;

private boolean isBlur;
private float radius;
private BlurMaskFilter.Blur style;

private SpannableStringBuilder mBuilder;


private Builder(@NonNull CharSequence text) {
this.text = text;
flag = Spanned.SPAN_EXCLUSIVE_EXCLUSIVE;
foregroundColor = defaultValue;
backgroundColor = defaultValue;
quoteColor = defaultValue;
proportion = -1;
xProportion = -1;
mBuilder = new SpannableStringBuilder();
}

/**
* 设置标识
*
* @param flag <ul>
* <li>{@link Spanned#SPAN_INCLUSIVE_EXCLUSIVE}</li>
* <li>{@link Spanned#SPAN_INCLUSIVE_INCLUSIVE}</li>
* <li>{@link Spanned#SPAN_EXCLUSIVE_EXCLUSIVE}</li>
* <li>{@link Spanned#SPAN_EXCLUSIVE_INCLUSIVE}</li>
* </ul>
* @return {@link Builder}
*/
public Builder setFlag(int flag) {
this.flag = flag;
return this;
}

/**
* 设置前景色
*
* @param color 前景色
* @return {@link Builder}
*/
public Builder setForegroundColor(@ColorInt int color) {
this.foregroundColor = color;
return this;
}

/**
* 设置背景色
*
* @param color 背景色
* @return {@link Builder}
*/
public Builder setBackgroundColor(@ColorInt int color) {
this.backgroundColor = color;
return this;
}

/**
* 设置引用线的颜色
*
* @param color 引用线的颜色
* @return {@link Builder}
*/
public Builder setQuoteColor(@ColorInt int color) {
this.quoteColor = color;
return this;
}

/**
* 设置缩进
*
* @param first 首行缩进
* @param rest 剩余行缩进
* @return {@link Builder}
*/
public Builder setLeadingMargin(int first, int rest) {
this.first = first;
this.rest = rest;
isLeadingMargin = true;
return this;
}

/**
* 设置列表标记
*
* @param gapWidth 列表标记和文字间距离
* @param color 列表标记的颜色
* @return {@link Builder}
*/
public Builder setBullet(int gapWidth, int color) {
this.gapWidth = gapWidth;
bulletColor = color;
isBullet = true;
return this;
}

/**
* 设置字体比例
*
* @param proportion 比例
* @return {@link Builder}
*/
public Builder setProportion(float proportion) {
this.proportion = proportion;
return this;
}

/**
* 设置字体横向比例
*
* @param proportion 比例
* @return {@link Builder}
*/
public Builder setXProportion(float proportion) {
this.xProportion = proportion;
return this;
}

/**
* 设置删除线
*
* @return {@link Builder}
*/
public Builder setStrikethrough() {
this.isStrikethrough = true;
return this;
}

/**
* 设置下划线
*
* @return {@link Builder}
*/
public Builder setUnderline() {
this.isUnderline = true;
return this;
}

/**
* 设置上标
*
* @return {@link Builder}
*/
public Builder setSuperscript() {
this.isSuperscript = true;
return this;
}

/**
* 设置下标
*
* @return {@link Builder}
*/
public Builder setSubscript() {
this.isSubscript = true;
return this;
}

/**
* 设置粗体
*
* @return {@link Builder}
*/
public Builder setBold() {
isBold = true;
return this;
}

/**
* 设置斜体
*
* @return {@link Builder}
*/
public Builder setItalic() {
isItalic = true;
return this;
}

/**
* 设置粗斜体
*
* @return {@link Builder}
*/
public Builder setBoldItalic() {
isBoldItalic = true;
return this;
}

/**
* 设置字体
*
* @param fontFamily 字体
* <ul>
* <li>monospace</li>
* <li>serif</li>
* <li>sans-serif</li>
* </ul>
* @return {@link Builder}
*/
public Builder setFontFamily(@Nullable String fontFamily) {
this.fontFamily = fontFamily;
return this;
}

/**
* 设置对齐
*
* Layout.Alignment align
*
* @return {@link Builder}
*/
public Builder setAlign(@Nullable Layout.Alignment align) {
this.align = align;
return this;
}

/**
* 设置图片
*
* @param bitmap 图片位图
* @return {@link Builder}
*/
public Builder setBitmap(@NonNull Bitmap bitmap) {
this.bitmap = bitmap;
imageIsBitmap = true;
return this;
}

/**
* 设置图片
*
* @param drawable 图片资源
* @return {@link Builder}
*/
public Builder setDrawable(@NonNull Drawable drawable) {
this.drawable = drawable;
imageIsDrawable = true;
return this;
}

/**
* 设置图片
*
* @param uri 图片uri
* @return {@link Builder}
*/
public Builder setUri(@NonNull Uri uri) {
this.uri = uri;
imageIsUri = true;
return this;
}

/**
* 设置图片
*
* @param resourceId 图片资源id
* @return {@link Builder}
*/
public Builder setResourceId(@DrawableRes int resourceId) {
this.resourceId = resourceId;
imageIsResourceId = true;
return this;
}

/**
* 设置点击事件
* <p>需添加view.setMovementMethod(LinkMovementMethod.getInstance())</p>
*
* @param clickSpan 点击事件
* @return {@link Builder}
*/
public Builder setClickSpan(@NonNull TouchableSpan clickSpan) {
this.clickSpan = clickSpan;
return this;
}

/**
* 设置超链接
* <p>需添加view.setMovementMethod(LinkMovementMethod.getInstance())</p>
*
* @param url 超链接
* @return {@link Builder}
*/
public Builder setUrl(@NonNull String url) {
this.url = url;
return this;
}

/**
* 设置模糊
* <p>尚存bug,其他地方存在相同的字体的话,相同字体出现在之前的话那么就不会模糊,出现在之后的话那会一起模糊</p>
* <p>推荐还是把所有字体都模糊这样使用</p>
*
* @param radius 模糊半径(需大于0)
* @param style 模糊样式<ul>
* <li>{@link Blur#NORMAL}</li>
* <li>{@link Blur#SOLID}</li>
* <li>{@link Blur#OUTER}</li>
* <li>{@link Blur#INNER}</li>
* </ul>
* @return {@link Builder}
*/
public Builder setBlur(float radius, BlurMaskFilter.Blur style) {
this.radius = radius;
this.style = style;
this.isBlur = true;
return this;
}

/**
* 追加样式字符串
*
* @param text 样式字符串文本
* @return {@link Builder}
*/
public Builder append(@NonNull CharSequence text) {
setSpan();
this.text = text;
return this;
}

/**
* 创建样式字符串
*
* @return 样式字符串
*/
public SpannableStringBuilder create() {
setSpan();
return mBuilder;
}

/**
* 设置样式
*/
private void setSpan() {
int start = mBuilder.length();
mBuilder.append(this.text);
int end = mBuilder.length();
if (foregroundColor != defaultValue) {
mBuilder.setSpan(new ForegroundColorSpan(foregroundColor), start, end, flag);
foregroundColor = defaultValue;
}
if (backgroundColor != defaultValue) {
mBuilder.setSpan(new BackgroundColorSpan(backgroundColor), start, end, flag);
backgroundColor = defaultValue;
}
if (isLeadingMargin) {
mBuilder.setSpan(new LeadingMarginSpan.Standard(first, rest), start, end, flag);
isLeadingMargin = false;
}
if (quoteColor != defaultValue) {
mBuilder.setSpan(new QuoteSpan(quoteColor), start, end, 0);
quoteColor = defaultValue;
}
if (isBullet) {
mBuilder.setSpan(new BulletSpan(gapWidth, bulletColor), start, end, 0);
isBullet = false;
}
if (proportion != -1) {
mBuilder.setSpan(new RelativeSizeSpan(proportion), start, end, flag);
proportion = -1;
}
if (xProportion != -1) {
mBuilder.setSpan(new ScaleXSpan(xProportion), start, end, flag);
xProportion = -1;
}
if (isStrikethrough) {
mBuilder.setSpan(new StrikethroughSpan(), start, end, flag);
isStrikethrough = false;
}
if (isUnderline) {
mBuilder.setSpan(new UnderlineSpan(), start, end, flag);
isUnderline = false;
}
if (isSuperscript) {
mBuilder.setSpan(new SuperscriptSpan(), start, end, flag);
isSuperscript = false;
}
if (isSubscript) {
mBuilder.setSpan(new SubscriptSpan(), start, end, flag);
isSubscript = false;
}
if (isBold) {
mBuilder.setSpan(new StyleSpan(Typeface.BOLD), start, end, flag);
isBold = false;
}
if (isItalic) {
mBuilder.setSpan(new StyleSpan(Typeface.ITALIC), start, end, flag);
isItalic = false;
}
if (isBoldItalic) {
mBuilder.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), start, end, flag);
isBoldItalic = false;
}
if (fontFamily != null) {
mBuilder.setSpan(new TypefaceSpan(fontFamily), start, end, flag);
fontFamily = null;
}
if (align != null) {
mBuilder.setSpan(new AlignmentSpan.Standard(align), start, end, flag);
align = null;
}
if (imageIsBitmap || imageIsDrawable || imageIsUri || imageIsResourceId) {
if (imageIsBitmap) {
mBuilder.setSpan(new ImageSpan(App.getApp(), bitmap), start, end, flag);
bitmap = null;
imageIsBitmap = false;
} else if (imageIsDrawable) {
mBuilder.setSpan(new ImageSpan(drawable), start, end, flag);
drawable = null;
imageIsDrawable = false;
} else if (imageIsUri) {
mBuilder.setSpan(new ImageSpan(App.getApp(), uri), start, end, flag);
uri = null;
imageIsUri = false;
} else {
mBuilder.setSpan(new ImageSpan(App.getApp(), resourceId), start, end, flag);
resourceId = 0;
imageIsResourceId = false;
}
}
if (clickSpan != null) {
mBuilder.setSpan(clickSpan, start, end, flag);
clickSpan = null;
}
if (url != null) {
mBuilder.setSpan(new URLSpan(url), start, end, flag);
url = null;
}
if (isBlur) {
mBuilder.setSpan(new MaskFilterSpan(new BlurMaskFilter(radius, style)), start, end, flag);
isBlur = false;
}
flag = Spanned.SPAN_EXCLUSIVE_EXCLUSIVE;
}
}
}

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
SpannableStringBuilder builder = SpannableStringUtils
.getBuilder("登录/注册表示您同意")
.append(" 《xxx隐私政策》 ")
.setForegroundColor(linkColor)
.setClickSpan(new TouchableSpan(linkColor,linkPressedColor) {
@Override
public void onClick(View widget) {
// 点击事件
}
})
.append("和")
.append(" 《xxx服务协议》 ")
.setForegroundColor(linkColor)
.setClickSpan(new TouchableSpan(linkColor,linkPressedColor) {
@Override
public void onClick(View widget) {
// 点击事件
}
}).create();
textView.setText(builder);
textView.setHighlightColor(transparent);
textView.setMovementMethod(new LinkTouchMovementMethod());

综上即可实现功能并解决提及问题

参考链接

掘金:TextView添加SpannableString并添加点击色

0%