为什么我的 spannable 没有显示？
How come my spannable isn't shown?
背景
我正在尝试在 TextView 上使用简单的 SpannableString，基于我发现的 UnderDotSpan class (here)。
原来的 UnderDotSpan 只是在文本本身下方放置一个特定大小和颜色的点（不重叠）。我正在尝试的是首先正常使用它，然后使用自定义的可绘制对象而不是点。
问题
与正常的 span 用法不同，这个只是不显示任何内容。连文字都没有。
这是正常跨度的完成方式：
val text = "1"
val timeSpannable = SpannableString(text)
timeSpannable.setSpan(ForegroundColorSpan(0xff00ff00.toInt()), 0, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
textView.setText(timeSpannable);
它将在 TextView 中显示一个绿色的“1”。
但是当我尝试下一个 spannable 时，它（整个 TextView 内容：文本和点）根本没有显示：
val text = "1"
val spannable = SpannableString(text)
spannable.setSpan(UnderDotSpan(this@MainActivity, 0xFF039BE5.toInt(), textView.currentTextColor),
0, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
textView.setText(spannable, TextView.BufferType.SPANNABLE)
// this also didn't work: textView.setText(spannable)
奇怪的是，在我使用的一个项目中，它在 RecyclerView 中工作正常，而在另一个项目中，它却没有。
下面是 UnderDotSpan 的代码：
class UnderDotSpan(private val mDotSize: Float, private val mDotColor: Int, private val mTextColor: Int) : ReplacementSpan() {
companion object {
@JvmStatic
private val DEFAULT_DOT_SIZE_IN_DP = 4
}
constructor(context: Context, dotColor: Int, textColor: Int) : this(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_DOT_SIZE_IN_DP.toFloat(), context.resources.displayMetrics), dotColor, textColor) {}
override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: Paint.FontMetricsInt?) = Math.round(paint.measureText(text, start, end))
override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
if (TextUtils.isEmpty(text)) {
return
}
val textSize = paint.measureText(text, start, end)
paint.color = mDotColor
canvas.drawCircle(x + textSize / 2, bottom + mDotSize, mDotSize / 2, paint)
paint.color = mTextColor
canvas.drawText(text, start, end, x, y.toFloat(), paint)
}
}
请注意，TextView 没有任何特殊属性，但无论如何我都会显示它：
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context="com.example.user.myapplication.MainActivity">
<TextView android:id="@+id/textView"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
我试过的
我尝试从其他span扩展classes，也尝试通过其他方式将文本设置到TextView。
我还尝试了我制作的其他跨度 classes，基于 UnderDotSpan class。示例：
class UnderDrawableSpan(val drawable: Drawable, val drawableWidth: Int = drawable.intrinsicWidth, val drawableHeight: Int = drawable.intrinsicHeight, val margin: Int = 0) : ReplacementSpan() {
override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int = Math.round(paint.measureText(text, start, end))
override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
if (TextUtils.isEmpty(text))
return
val textSize = paint.measureText(text, start, end)
canvas.drawText(text, start, end, x, y.toFloat(), paint)
canvas.save()
canvas.translate(x + textSize / 2f - drawableWidth / 2f, y.toFloat() + margin)
if (drawableWidth != 0 && drawableHeight != 0)
drawable.setBounds(0, 0, drawableWidth, drawableHeight)
drawable.draw(canvas)
canvas.restore()
}
}
在调试时，我发现 draw 函数甚至没有被调用，而 getSize 确实被调用（并且 returns 一个 >0 值）。
问题
为什么 span 不能显示在 TextView 上？
我的使用方式有什么问题吗？
如何修复它并使用这个跨度？
为什么它可能适用于其他更复杂的情况？
您的跨度未显示，因为未设置高度而未调用绘图方法。
请参考这个link
https://developer.android.com/reference/android/text/style/ReplacementSpan.html
GetSize() - Returns the width of the span. Extending classes can set the height of the span by updating attributes of Paint.FontMetricsInt. If the span covers the whole text, and the height is not set, draw(Canvas, CharSequence, int, int, float, int, int, int, Paint) will not be called for the span.
Paint.FontMetricsInt 我们得到的对象的所有变量都是0，所以没有高度，所以没有调用draw方法。
关于 Paint.FontMatricsInt 的工作原理，您可以参考此 link。
Meaning of top, ascent, baseline, descent, bottom, and leading in Android's FontMetrics
所以我们在 getSize 的参数中获得的绘画对象的帮助下设置 Paint.FontMetricsInt。
这是我的代码，我更改了一些与设置高度相关的内容。
class UnderDotSpan(private val mDotSize: Float, private val mDotColor: Int, private val mTextColor: Int) : ReplacementSpan() {
companion object {
@JvmStatic
private val DEFAULT_DOT_SIZE_IN_DP = 16
}
constructor(context: Context, dotColor: Int, textColor: Int) : this(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_DOT_SIZE_IN_DP.toFloat(), context.resources.displayMetrics), dotColor, textColor) {}
override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
val asd = paint.getFontMetricsInt()
fm?.leading = asd.leading
fm?.top = asd.top
fm?.bottom = asd.bottom
fm?.ascent = asd.ascent
fm?.descent = asd.descent
return Math.round(measureText(paint, text, start, end))
}
override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
if (TextUtils.isEmpty(text)) {
return
}
val textSize = paint.measureText(text, start, end)
paint.color = mDotColor
canvas.drawCircle(x + textSize / 2, (bottom /2).toFloat(), mDotSize / 2, paint)
paint.color = mTextColor
canvas.drawText(text, start, end, x, y.toFloat(), paint)
}
private fun measureText(paint: Paint, text: CharSequence, start: Int, end: Int): Float {
return paint.measureText(text, start, end)
}
}
我得到的最终输出如下
UPDATED ANSWER
使用它在文本下方画圆圈
class UnderDotSpan(private val mDotSize: Float, private val mDotColor: Int, private val mTextColor: Int) : ReplacementSpan() {
companion object {
@JvmStatic
private val DEFAULT_DOT_SIZE_IN_DP = 4
}
constructor(context: Context, dotColor: Int, textColor: Int) : this(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_DOT_SIZE_IN_DP.toFloat(), context.resources.displayMetrics), dotColor, textColor) {}
override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
val asd = paint.getFontMetricsInt()
fm?.leading = asd.leading + mDotSize.toInt()
fm?.top = asd.top
fm?.bottom = asd.bottom
fm?.ascent = asd.ascent
fm?.descent = asd.descent
return Math.round(paint.measureText(text, start, end))
}
override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
if (TextUtils.isEmpty(text)) {
return
}
val textSize = paint.measureText(text, start, end)
paint.color = mDotColor
canvas.drawCircle(x + textSize / 2, bottom + mDotSize, mDotSize / 2, paint)
paint.color = mTextColor
canvas.drawText(text, start, end, x, y.toFloat(), paint)
}
}
最后一个 IMP
val text = "1\n" instead of val text = "1"
在 textview 上设置文本后使用：
textview.setMovementMethod(LinkMovementMethod.getInstance());
示例：
tvDescription.setText(hashText);
tvDescription.setMovementMethod(LinkMovementMethod.getInstance());
/*
* Set text with hashtag and mentions on TextView
* */
public void setTextOnTextView(String description, TextView tvDescription)
{
SpannableString hashText = new SpannableString(description);
Pattern pattern = Pattern.compile("@([A-Za-z0-9_-]+)");
Matcher matcher = pattern.matcher(hashText);
while (matcher.find()) {
final StyleSpan bold = new StyleSpan(android.graphics.Typeface.BOLD); // Span to make text bold
hashText.setSpan(bold, matcher.start(), matcher.end(), 0);
}
Pattern patternHash = Pattern.compile("#([A-Za-z0-9_-]+)");
Matcher matcherHash = patternHash.matcher(hashText);
while (matcherHash.find()) {
final StyleSpan bold = new StyleSpan(android.graphics.Typeface.BOLD); // Span to make text bold
hashText.setSpan(bold, matcherHash.start(), matcherHash.end(), 0);
}
tvDescription.setText(hashText);
tvDescription.setMovementMethod(LinkMovementMethod.getInstance());
}
基本问题是没有为 ReplacementSpan 设置高度。如 source for ReplacementSpan:
中所述
If the span covers the whole text, and the height is not set, draw(Canvas, CharSequence, int, int, float, int, int, int, Paint)} will not be called for the span.
这是对 Archit Sureja post 的重复。在我原来的 post 中，我在 getSize() 中更新了 ReplacementSpan 的高度，但我现在实现了 LineHeightSpan.WithDensity 接口来做同样的事情。 （感谢 vovahost 提供此信息。）
但是，您提出的其他问题需要解决。
您提供的项目提出的问题是点不在它必须驻留的 TextView 范围内。您看到的是点的截断。如果点的大小超过文本的宽度或高度怎么办？
首先，关于高度，接口 LineHeightSpan.WithDensity 的 chooseHeight() 方法通过将点的大小添加到字体的大小来调整被视为 TextView 字体底部的内容有效高度。为此，将点的高度添加到字体底部：
fontMetricsInt.bottom = fm.bottom + mDotSize.toInt();
（这是对使用 TextView 填充的此答案的最后一次迭代的更改。由于此更改，TextView 不再需要UnderDotSpan class。虽然我加了TextView，但其实并不需要。）
最后一个问题是如果点比文本宽，则点在开始和结束处被截断。 clipToPadding="false" 在这里不起作用，因为点被截断不是因为它被裁剪到填充，而是因为它被裁剪到我们所说的文本宽度在 getSize() 中。为了解决这个问题，我修改了 getSize() 方法来检测点何时比文本测量值宽，并增加返回值以匹配点的宽度。名为 mStartShim 的新值是必须应用于文本绘图和点以使其适合的量。
最后一个问题是点的中心是文本底部下方点的半径而不是直径，因此绘制点的代码在 draw() 中更改为：
canvas.drawCircle(x + textSize / 2, bottom.toFloat(), mDotSize / 2, paint)
（我也改了代码做Canvas翻译而不是添加偏移量。效果是一样的。）
结果如下：
activity_main.xml
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:background="@android:color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
MainActivity.java
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val text = "1"
val spannable = SpannableString(text)
spannable.setSpan(UnderDotSpan(this@MainActivity, 0xFF039BE5.toInt(), textView.currentTextColor),
0, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
textView.setText(spannable, TextView.BufferType.SPANNABLE)
}
}
UnderDotSpan.kt
// From the original UnderDotSpan: Also implement the LineHeightSpan.WithDensity interface to
// compute the height of our "dotted" font.
class UnderDotSpan(private val mDotSize: Float, private val mDotColor: Int, private val mTextColor: Int) : ReplacementSpan(), LineHeightSpan.WithDensity {
companion object {
@JvmStatic
private val DEFAULT_DOT_SIZE_IN_DP = 16
}
// Additional horizontal space to the start, if needed, to fit the dot
var mStartShim = 0;
constructor(context: Context, dotColor: Int, textColor: Int)
: this(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_DOT_SIZE_IN_DP.toFloat(),
context.resources.displayMetrics), dotColor, textColor)
// ReplacementSpan override to determine the size (length) of the text.
override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
val baseTextWidth = paint.measureText(text, start, end)
// If the width of the text is less than the width of our dot, increase the text width
// to match the dot's width; otherwise, just return the width of the text.
mStartShim = if (baseTextWidth < mDotSize) ((mDotSize - baseTextWidth) / 2).toInt() else 0
return Math.round(baseTextWidth + mStartShim * 2)
}
override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int,
y: Int, bottom: Int, paint: Paint) {
if (TextUtils.isEmpty(text)) {
return
}
val textSize = paint.measureText(text, start, end)
paint.color = mDotColor
canvas.save()
// Draw the circle in the horizontal center and under the text. Add in the
// offset (mStartShim) if we had to increase the length of the text to accommodate our dot.
canvas.translate(mStartShim.toFloat(), -mDotSize / 2)
// Draw a circle, but this could be any other shape or drawable. It just has
// to fit into the allotted space which is the size of the dot.
canvas.drawCircle(x + textSize / 2, bottom.toFloat(), mDotSize / 2, paint)
paint.color = mTextColor
// Keep the starting shim, but reset the y-translation to write the text.
canvas.translate(0f, mDotSize / 2)
canvas.drawText(text, start, end, x, y.toFloat(), paint)
canvas.restore()
}
// LineHeightSpan.WithDensity override to determine the height of the font with the dot.
override fun chooseHeight(charSequence: CharSequence, i: Int, i1: Int, i2: Int, i3: Int,
fontMetricsInt: Paint.FontMetricsInt, textPaint: TextPaint) {
val fm = textPaint.fontMetricsInt
fontMetricsInt.top = fm.top
fontMetricsInt.ascent = fm.ascent
fontMetricsInt.descent = fm.descent
// Our "dotted" font now must accommodate the size of the dot, so change the bottom of the
// font to accommodate the dot.
fontMetricsInt.bottom = fm.bottom + mDotSize.toInt();
fontMetricsInt.leading = fm.leading
}
// LineHeightSpan.WithDensity override that is needed to satisfy the interface but not called.
override fun chooseHeight(charSequence: CharSequence, i: Int, i1: Int, i2: Int, i3: Int,
fontMetricsInt: Paint.FontMetricsInt) {
}
}
对于在文本下方放置小图的更一般情况，以下 class 有效并基于 UnderDotSpan：
UnderDrawableSpan.java
public class UnderDrawableSpan extends ReplacementSpan implements LineHeightSpan.WithDensity {
final private Drawable mDrawable;
final private int mDrawableWidth;
final private int mDrawableHeight;
final private int mMargin;
// How much we need to jog the text to line up with a larger-than-text-width drawable.
private int mStartShim = 0;
UnderDrawableSpan(Context context, Drawable drawable, int drawableWidth, int drawableHeight,
int margin) {
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
mDrawable = drawable;
mDrawableWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
(float) drawableWidth, metrics);
mDrawableHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
(float) drawableHeight, metrics);
mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
(float) margin, metrics);
}
@Override
public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y,
int bottom, @NonNull Paint paint) {
if (TextUtils.isEmpty(text)) {
return;
}
float textWidth = paint.measureText(text, start, end);
float offset = mStartShim + x + (textWidth - mDrawableWidth) / 2;
mDrawable.setBounds(0, 0, mDrawableWidth, mDrawableHeight);
canvas.save();
canvas.translate(offset, bottom - mDrawableHeight);
mDrawable.draw(canvas);
canvas.restore();
canvas.save();
canvas.translate(mStartShim, 0);
canvas.drawText(text, start, end, x, y, paint);
canvas.restore();
}
// ReplacementSpan override to determine the size (length) of the text.
@Override
public int getSize(@NonNull Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
float baseTextWidth = paint.measureText(text, start, end);
// If the width of the text is less than the width of our drawable, increase the text width
// to match the drawable's width; otherwise, just return the width of the text.
mStartShim = (baseTextWidth < mDrawableWidth) ? (int) (mDrawableWidth - baseTextWidth) / 2 : 0;
return Math.round(baseTextWidth + mStartShim * 2);
}
// LineHeightSpan.WithDensity override to determine the height of the font with the dot.
@Override
public void chooseHeight(CharSequence charSequence, int i, int i1, int i2, int i3,
Paint.FontMetricsInt fontMetricsInt, TextPaint textPaint) {
Paint.FontMetricsInt fm = textPaint.getFontMetricsInt();
fontMetricsInt.top = fm.top;
fontMetricsInt.ascent = fm.ascent;
fontMetricsInt.descent = fm.descent;
// Our font now must accommodate the size of the drawable, so change the bottom of the
// font to accommodate the drawable.
fontMetricsInt.bottom = fm.bottom + mDrawableHeight + mMargin;
fontMetricsInt.leading = fm.leading;
}
// Required but not used.
@Override
public void chooseHeight(CharSequence charSequence, int i, int i1, int i2, int i3,
Paint.FontMetricsInt fontMetricsInt) {
}
}
将以下可绘制对象 XML 与 UnderDrawableSpan 结合使用会产生以下结果：。 （drawable 的宽度和高度设置为 12dp。文本的字体大小为 24sp。）
gradient_drawable.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="4dp"
android:height="4dp" />
<gradient
android:type="radial"
android:gradientRadius="60%p"
android:endColor="#e96507"
android:startColor="#ece6e1" />
</shape>
我最近有机会重新审视这个问题和答案。我正在 post 编写 UnderDrawableSpan 代码的更灵活的版本。在 GitHub 上有一个 demo project。
UnderDrawableSpan.kt（更新）
/**
* Place a drawable at the bottom center of text within a span. Because this class is extended
* from [ReplacementSpan], the span must reside on a single line and cannot span lines.
*/
class UnderDrawableSpan(
context: Context, drawable: Drawable, drawableWidth: Int, drawableHeight: Int, margin: Int
) : ReplacementSpan(), LineHeightSpan.WithDensity {
// The image to draw under the spanned text. The image and text will be horizontally centered.
private val mDrawable: Drawable
// The width if the drawable in dip
private var mDrawableWidth: Int
// The width if the drawable in dip
private var mDrawableHeight: Int
// Margin in dip to place around the drawable
private var mMargin: Int
// Amount to offset the text from the start.
private var mTextOffset = 0f
// Amount to offset the drawable from the start.
private var mDrawableOffset = 0f
// Descent specified in font metrics of the TextPaint.
private var mBaseDescent = 0f
init {
val metrics: DisplayMetrics = context.resources.displayMetrics
mDrawable = drawable
mDrawableWidth = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, drawableWidth.toFloat(), metrics
).toInt()
mDrawableHeight = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, drawableHeight.toFloat(), metrics
).toInt()
mMargin = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, margin.toFloat(), metrics
).toInt()
}
override fun draw(
canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int,
bottom: Int, paint: Paint
) {
canvas.drawText(text, start, end, x + mTextOffset, y.toFloat(), paint)
mDrawable.setBounds(0, 0, mDrawableWidth, mDrawableHeight)
canvas.save()
canvas.translate(x + mDrawableOffset + mMargin, y + mBaseDescent + mMargin)
mDrawable.draw(canvas)
canvas.restore()
}
// ReplacementSpan override to determine the width that the text and drawable should occupy.
// The computed width is determined by the greater of the text width and the drawable width
// plus the requested margins.
override fun getSize(
paint: Paint, text: CharSequence?, start: Int, end: Int, fm: Paint.FontMetricsInt?
): Int {
val textWidth = paint.measureText(text, start, end)
val additionalWidthNeeded = mDrawableWidth + mMargin * 2 - textWidth
// If the width of the text is less than the width of our drawable, increase the text width
// to match the drawable's width; otherwise, just return the width of the text.
return if (additionalWidthNeeded >= 0) {
// Drawable is wider than text, so we need to offset the text to center it.
mTextOffset = additionalWidthNeeded / 2
textWidth + additionalWidthNeeded
} else {
// Text is wider than the drawable, so we need to offset the drawable to center it.
// We do not need to expand the width.
mDrawableOffset = -additionalWidthNeeded / 2
textWidth
}.toInt()
}
// Determine the height for the ReplacementSpan.
override fun chooseHeight(
text: CharSequence?, start: Int, end: Int, spanstartv: Int, lineHeight: Int,
fm: Paint.FontMetricsInt, paint: TextPaint
) {
// The text height must accommodate the size of the drawable. To make the accommodation,
// change the bottom of the font so there is enough room to fit the drawable between the
// font bottom and the font's descent.
val tpMetric = paint.fontMetrics
mBaseDescent = tpMetric.descent
val spaceAvailable = fm.descent - mBaseDescent
val spaceNeeded = mDrawableHeight + mMargin * 2
if (spaceAvailable < spaceNeeded) {
fm.descent += (spaceNeeded - spaceAvailable).toInt()
fm.bottom = fm.descent + (tpMetric.bottom - tpMetric.descent).toInt()
}
}
// StaticLayout prefers LineHeightSpan.WithDensity over this function.
override fun chooseHeight(
charSequence: CharSequence?, i: Int, i1: Int, i2: Int, i3: Int, fm: Paint.FontMetricsInt
) = throw IllegalStateException("LineHeightSpan.chooseHeight() called but is not supported.")
}
背景
我正在尝试在 TextView 上使用简单的 SpannableString，基于我发现的 UnderDotSpan class (here)。
原来的 UnderDotSpan 只是在文本本身下方放置一个特定大小和颜色的点（不重叠）。我正在尝试的是首先正常使用它，然后使用自定义的可绘制对象而不是点。
问题
与正常的 span 用法不同，这个只是不显示任何内容。连文字都没有。
这是正常跨度的完成方式：
val text = "1"
val timeSpannable = SpannableString(text)
timeSpannable.setSpan(ForegroundColorSpan(0xff00ff00.toInt()), 0, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
textView.setText(timeSpannable);
它将在 TextView 中显示一个绿色的“1”。
但是当我尝试下一个 spannable 时，它（整个 TextView 内容：文本和点）根本没有显示：
val text = "1"
val spannable = SpannableString(text)
spannable.setSpan(UnderDotSpan(this@MainActivity, 0xFF039BE5.toInt(), textView.currentTextColor),
0, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
textView.setText(spannable, TextView.BufferType.SPANNABLE)
// this also didn't work: textView.setText(spannable)
奇怪的是，在我使用的一个项目中，它在 RecyclerView 中工作正常，而在另一个项目中，它却没有。
下面是 UnderDotSpan 的代码：
class UnderDotSpan(private val mDotSize: Float, private val mDotColor: Int, private val mTextColor: Int) : ReplacementSpan() {
companion object {
@JvmStatic
private val DEFAULT_DOT_SIZE_IN_DP = 4
}
constructor(context: Context, dotColor: Int, textColor: Int) : this(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_DOT_SIZE_IN_DP.toFloat(), context.resources.displayMetrics), dotColor, textColor) {}
override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: Paint.FontMetricsInt?) = Math.round(paint.measureText(text, start, end))
override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
if (TextUtils.isEmpty(text)) {
return
}
val textSize = paint.measureText(text, start, end)
paint.color = mDotColor
canvas.drawCircle(x + textSize / 2, bottom + mDotSize, mDotSize / 2, paint)
paint.color = mTextColor
canvas.drawText(text, start, end, x, y.toFloat(), paint)
}
}
请注意，TextView 没有任何特殊属性，但无论如何我都会显示它：
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context="com.example.user.myapplication.MainActivity">
<TextView android:id="@+id/textView"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
我试过的
我尝试从其他span扩展classes，也尝试通过其他方式将文本设置到TextView。
我还尝试了我制作的其他跨度 classes，基于 UnderDotSpan class。示例：
class UnderDrawableSpan(val drawable: Drawable, val drawableWidth: Int = drawable.intrinsicWidth, val drawableHeight: Int = drawable.intrinsicHeight, val margin: Int = 0) : ReplacementSpan() {
override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int = Math.round(paint.measureText(text, start, end))
override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
if (TextUtils.isEmpty(text))
return
val textSize = paint.measureText(text, start, end)
canvas.drawText(text, start, end, x, y.toFloat(), paint)
canvas.save()
canvas.translate(x + textSize / 2f - drawableWidth / 2f, y.toFloat() + margin)
if (drawableWidth != 0 && drawableHeight != 0)
drawable.setBounds(0, 0, drawableWidth, drawableHeight)
drawable.draw(canvas)
canvas.restore()
}
}
在调试时，我发现 draw 函数甚至没有被调用，而 getSize 确实被调用（并且 returns 一个 >0 值）。
问题
为什么 span 不能显示在 TextView 上？
我的使用方式有什么问题吗？
如何修复它并使用这个跨度？
为什么它可能适用于其他更复杂的情况？
您的跨度未显示，因为未设置高度而未调用绘图方法。
请参考这个link
https://developer.android.com/reference/android/text/style/ReplacementSpan.html
GetSize() - Returns the width of the span. Extending classes can set the height of the span by updating attributes of Paint.FontMetricsInt. If the span covers the whole text, and the height is not set, draw(Canvas, CharSequence, int, int, float, int, int, int, Paint) will not be called for the span.
Paint.FontMetricsInt 我们得到的对象的所有变量都是0，所以没有高度，所以没有调用draw方法。
关于 Paint.FontMatricsInt 的工作原理，您可以参考此 link。
Meaning of top, ascent, baseline, descent, bottom, and leading in Android's FontMetrics
所以我们在 getSize 的参数中获得的绘画对象的帮助下设置 Paint.FontMetricsInt。
这是我的代码，我更改了一些与设置高度相关的内容。
class UnderDotSpan(private val mDotSize: Float, private val mDotColor: Int, private val mTextColor: Int) : ReplacementSpan() {
companion object {
@JvmStatic
private val DEFAULT_DOT_SIZE_IN_DP = 16
}
constructor(context: Context, dotColor: Int, textColor: Int) : this(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_DOT_SIZE_IN_DP.toFloat(), context.resources.displayMetrics), dotColor, textColor) {}
override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
val asd = paint.getFontMetricsInt()
fm?.leading = asd.leading
fm?.top = asd.top
fm?.bottom = asd.bottom
fm?.ascent = asd.ascent
fm?.descent = asd.descent
return Math.round(measureText(paint, text, start, end))
}
override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
if (TextUtils.isEmpty(text)) {
return
}
val textSize = paint.measureText(text, start, end)
paint.color = mDotColor
canvas.drawCircle(x + textSize / 2, (bottom /2).toFloat(), mDotSize / 2, paint)
paint.color = mTextColor
canvas.drawText(text, start, end, x, y.toFloat(), paint)
}
private fun measureText(paint: Paint, text: CharSequence, start: Int, end: Int): Float {
return paint.measureText(text, start, end)
}
}
我得到的最终输出如下
UPDATED ANSWER
使用它在文本下方画圆圈
class UnderDotSpan(private val mDotSize: Float, private val mDotColor: Int, private val mTextColor: Int) : ReplacementSpan() {
companion object {
@JvmStatic
private val DEFAULT_DOT_SIZE_IN_DP = 4
}
constructor(context: Context, dotColor: Int, textColor: Int) : this(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_DOT_SIZE_IN_DP.toFloat(), context.resources.displayMetrics), dotColor, textColor) {}
override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
val asd = paint.getFontMetricsInt()
fm?.leading = asd.leading + mDotSize.toInt()
fm?.top = asd.top
fm?.bottom = asd.bottom
fm?.ascent = asd.ascent
fm?.descent = asd.descent
return Math.round(paint.measureText(text, start, end))
}
override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int, bottom: Int, paint: Paint) {
if (TextUtils.isEmpty(text)) {
return
}
val textSize = paint.measureText(text, start, end)
paint.color = mDotColor
canvas.drawCircle(x + textSize / 2, bottom + mDotSize, mDotSize / 2, paint)
paint.color = mTextColor
canvas.drawText(text, start, end, x, y.toFloat(), paint)
}
}
最后一个 IMP
val text = "1\n"instead ofval text = "1"
在 textview 上设置文本后使用：
textview.setMovementMethod(LinkMovementMethod.getInstance());
示例：
tvDescription.setText(hashText);
tvDescription.setMovementMethod(LinkMovementMethod.getInstance());
/*
* Set text with hashtag and mentions on TextView
* */
public void setTextOnTextView(String description, TextView tvDescription)
{
SpannableString hashText = new SpannableString(description);
Pattern pattern = Pattern.compile("@([A-Za-z0-9_-]+)");
Matcher matcher = pattern.matcher(hashText);
while (matcher.find()) {
final StyleSpan bold = new StyleSpan(android.graphics.Typeface.BOLD); // Span to make text bold
hashText.setSpan(bold, matcher.start(), matcher.end(), 0);
}
Pattern patternHash = Pattern.compile("#([A-Za-z0-9_-]+)");
Matcher matcherHash = patternHash.matcher(hashText);
while (matcherHash.find()) {
final StyleSpan bold = new StyleSpan(android.graphics.Typeface.BOLD); // Span to make text bold
hashText.setSpan(bold, matcherHash.start(), matcherHash.end(), 0);
}
tvDescription.setText(hashText);
tvDescription.setMovementMethod(LinkMovementMethod.getInstance());
}
基本问题是没有为 ReplacementSpan 设置高度。如 source for ReplacementSpan:
If the span covers the whole text, and the height is not set, draw(Canvas, CharSequence, int, int, float, int, int, int, Paint)} will not be called for the span.
这是对 Archit Sureja post 的重复。在我原来的 post 中，我在 getSize() 中更新了 ReplacementSpan 的高度，但我现在实现了 LineHeightSpan.WithDensity 接口来做同样的事情。 （感谢 vovahost
但是，您提出的其他问题需要解决。
您提供的项目提出的问题是点不在它必须驻留的 TextView 范围内。您看到的是点的截断。如果点的大小超过文本的宽度或高度怎么办？
首先，关于高度，接口 LineHeightSpan.WithDensity 的 chooseHeight() 方法通过将点的大小添加到字体的大小来调整被视为 TextView 字体底部的内容有效高度。为此，将点的高度添加到字体底部：
fontMetricsInt.bottom = fm.bottom + mDotSize.toInt();
（这是对使用 TextView 填充的此答案的最后一次迭代的更改。由于此更改，TextView 不再需要UnderDotSpan class。虽然我加了TextView，但其实并不需要。）
最后一个问题是如果点比文本宽，则点在开始和结束处被截断。 clipToPadding="false" 在这里不起作用，因为点被截断不是因为它被裁剪到填充，而是因为它被裁剪到我们所说的文本宽度在 getSize() 中。为了解决这个问题，我修改了 getSize() 方法来检测点何时比文本测量值宽，并增加返回值以匹配点的宽度。名为 mStartShim 的新值是必须应用于文本绘图和点以使其适合的量。
最后一个问题是点的中心是文本底部下方点的半径而不是直径，因此绘制点的代码在 draw() 中更改为：
canvas.drawCircle(x + textSize / 2, bottom.toFloat(), mDotSize / 2, paint)
（我也改了代码做Canvas翻译而不是添加偏移量。效果是一样的。）
结果如下：
activity_main.xml
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:background="@android:color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
MainActivity.java
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val text = "1"
val spannable = SpannableString(text)
spannable.setSpan(UnderDotSpan(this@MainActivity, 0xFF039BE5.toInt(), textView.currentTextColor),
0, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
textView.setText(spannable, TextView.BufferType.SPANNABLE)
}
}
UnderDotSpan.kt
// From the original UnderDotSpan: Also implement the LineHeightSpan.WithDensity interface to
// compute the height of our "dotted" font.
class UnderDotSpan(private val mDotSize: Float, private val mDotColor: Int, private val mTextColor: Int) : ReplacementSpan(), LineHeightSpan.WithDensity {
companion object {
@JvmStatic
private val DEFAULT_DOT_SIZE_IN_DP = 16
}
// Additional horizontal space to the start, if needed, to fit the dot
var mStartShim = 0;
constructor(context: Context, dotColor: Int, textColor: Int)
: this(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_DOT_SIZE_IN_DP.toFloat(),
context.resources.displayMetrics), dotColor, textColor)
// ReplacementSpan override to determine the size (length) of the text.
override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fm: Paint.FontMetricsInt?): Int {
val baseTextWidth = paint.measureText(text, start, end)
// If the width of the text is less than the width of our dot, increase the text width
// to match the dot's width; otherwise, just return the width of the text.
mStartShim = if (baseTextWidth < mDotSize) ((mDotSize - baseTextWidth) / 2).toInt() else 0
return Math.round(baseTextWidth + mStartShim * 2)
}
override fun draw(canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int,
y: Int, bottom: Int, paint: Paint) {
if (TextUtils.isEmpty(text)) {
return
}
val textSize = paint.measureText(text, start, end)
paint.color = mDotColor
canvas.save()
// Draw the circle in the horizontal center and under the text. Add in the
// offset (mStartShim) if we had to increase the length of the text to accommodate our dot.
canvas.translate(mStartShim.toFloat(), -mDotSize / 2)
// Draw a circle, but this could be any other shape or drawable. It just has
// to fit into the allotted space which is the size of the dot.
canvas.drawCircle(x + textSize / 2, bottom.toFloat(), mDotSize / 2, paint)
paint.color = mTextColor
// Keep the starting shim, but reset the y-translation to write the text.
canvas.translate(0f, mDotSize / 2)
canvas.drawText(text, start, end, x, y.toFloat(), paint)
canvas.restore()
}
// LineHeightSpan.WithDensity override to determine the height of the font with the dot.
override fun chooseHeight(charSequence: CharSequence, i: Int, i1: Int, i2: Int, i3: Int,
fontMetricsInt: Paint.FontMetricsInt, textPaint: TextPaint) {
val fm = textPaint.fontMetricsInt
fontMetricsInt.top = fm.top
fontMetricsInt.ascent = fm.ascent
fontMetricsInt.descent = fm.descent
// Our "dotted" font now must accommodate the size of the dot, so change the bottom of the
// font to accommodate the dot.
fontMetricsInt.bottom = fm.bottom + mDotSize.toInt();
fontMetricsInt.leading = fm.leading
}
// LineHeightSpan.WithDensity override that is needed to satisfy the interface but not called.
override fun chooseHeight(charSequence: CharSequence, i: Int, i1: Int, i2: Int, i3: Int,
fontMetricsInt: Paint.FontMetricsInt) {
}
}
对于在文本下方放置小图的更一般情况，以下 class 有效并基于 UnderDotSpan：
UnderDrawableSpan.java
public class UnderDrawableSpan extends ReplacementSpan implements LineHeightSpan.WithDensity {
final private Drawable mDrawable;
final private int mDrawableWidth;
final private int mDrawableHeight;
final private int mMargin;
// How much we need to jog the text to line up with a larger-than-text-width drawable.
private int mStartShim = 0;
UnderDrawableSpan(Context context, Drawable drawable, int drawableWidth, int drawableHeight,
int margin) {
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
mDrawable = drawable;
mDrawableWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
(float) drawableWidth, metrics);
mDrawableHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
(float) drawableHeight, metrics);
mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
(float) margin, metrics);
}
@Override
public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y,
int bottom, @NonNull Paint paint) {
if (TextUtils.isEmpty(text)) {
return;
}
float textWidth = paint.measureText(text, start, end);
float offset = mStartShim + x + (textWidth - mDrawableWidth) / 2;
mDrawable.setBounds(0, 0, mDrawableWidth, mDrawableHeight);
canvas.save();
canvas.translate(offset, bottom - mDrawableHeight);
mDrawable.draw(canvas);
canvas.restore();
canvas.save();
canvas.translate(mStartShim, 0);
canvas.drawText(text, start, end, x, y, paint);
canvas.restore();
}
// ReplacementSpan override to determine the size (length) of the text.
@Override
public int getSize(@NonNull Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
float baseTextWidth = paint.measureText(text, start, end);
// If the width of the text is less than the width of our drawable, increase the text width
// to match the drawable's width; otherwise, just return the width of the text.
mStartShim = (baseTextWidth < mDrawableWidth) ? (int) (mDrawableWidth - baseTextWidth) / 2 : 0;
return Math.round(baseTextWidth + mStartShim * 2);
}
// LineHeightSpan.WithDensity override to determine the height of the font with the dot.
@Override
public void chooseHeight(CharSequence charSequence, int i, int i1, int i2, int i3,
Paint.FontMetricsInt fontMetricsInt, TextPaint textPaint) {
Paint.FontMetricsInt fm = textPaint.getFontMetricsInt();
fontMetricsInt.top = fm.top;
fontMetricsInt.ascent = fm.ascent;
fontMetricsInt.descent = fm.descent;
// Our font now must accommodate the size of the drawable, so change the bottom of the
// font to accommodate the drawable.
fontMetricsInt.bottom = fm.bottom + mDrawableHeight + mMargin;
fontMetricsInt.leading = fm.leading;
}
// Required but not used.
@Override
public void chooseHeight(CharSequence charSequence, int i, int i1, int i2, int i3,
Paint.FontMetricsInt fontMetricsInt) {
}
}
将以下可绘制对象 XML 与 UnderDrawableSpan 结合使用会产生以下结果：。 （drawable 的宽度和高度设置为 12dp。文本的字体大小为 24sp。）
gradient_drawable.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="4dp"
android:height="4dp" />
<gradient
android:type="radial"
android:gradientRadius="60%p"
android:endColor="#e96507"
android:startColor="#ece6e1" />
</shape>
我最近有机会重新审视这个问题和答案。我正在 post 编写 UnderDrawableSpan 代码的更灵活的版本。在 GitHub 上有一个 demo project。
UnderDrawableSpan.kt（更新）
/**
* Place a drawable at the bottom center of text within a span. Because this class is extended
* from [ReplacementSpan], the span must reside on a single line and cannot span lines.
*/
class UnderDrawableSpan(
context: Context, drawable: Drawable, drawableWidth: Int, drawableHeight: Int, margin: Int
) : ReplacementSpan(), LineHeightSpan.WithDensity {
// The image to draw under the spanned text. The image and text will be horizontally centered.
private val mDrawable: Drawable
// The width if the drawable in dip
private var mDrawableWidth: Int
// The width if the drawable in dip
private var mDrawableHeight: Int
// Margin in dip to place around the drawable
private var mMargin: Int
// Amount to offset the text from the start.
private var mTextOffset = 0f
// Amount to offset the drawable from the start.
private var mDrawableOffset = 0f
// Descent specified in font metrics of the TextPaint.
private var mBaseDescent = 0f
init {
val metrics: DisplayMetrics = context.resources.displayMetrics
mDrawable = drawable
mDrawableWidth = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, drawableWidth.toFloat(), metrics
).toInt()
mDrawableHeight = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, drawableHeight.toFloat(), metrics
).toInt()
mMargin = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, margin.toFloat(), metrics
).toInt()
}
override fun draw(
canvas: Canvas, text: CharSequence, start: Int, end: Int, x: Float, top: Int, y: Int,
bottom: Int, paint: Paint
) {
canvas.drawText(text, start, end, x + mTextOffset, y.toFloat(), paint)
mDrawable.setBounds(0, 0, mDrawableWidth, mDrawableHeight)
canvas.save()
canvas.translate(x + mDrawableOffset + mMargin, y + mBaseDescent + mMargin)
mDrawable.draw(canvas)
canvas.restore()
}
// ReplacementSpan override to determine the width that the text and drawable should occupy.
// The computed width is determined by the greater of the text width and the drawable width
// plus the requested margins.
override fun getSize(
paint: Paint, text: CharSequence?, start: Int, end: Int, fm: Paint.FontMetricsInt?
): Int {
val textWidth = paint.measureText(text, start, end)
val additionalWidthNeeded = mDrawableWidth + mMargin * 2 - textWidth
// If the width of the text is less than the width of our drawable, increase the text width
// to match the drawable's width; otherwise, just return the width of the text.
return if (additionalWidthNeeded >= 0) {
// Drawable is wider than text, so we need to offset the text to center it.
mTextOffset = additionalWidthNeeded / 2
textWidth + additionalWidthNeeded
} else {
// Text is wider than the drawable, so we need to offset the drawable to center it.
// We do not need to expand the width.
mDrawableOffset = -additionalWidthNeeded / 2
textWidth
}.toInt()
}
// Determine the height for the ReplacementSpan.
override fun chooseHeight(
text: CharSequence?, start: Int, end: Int, spanstartv: Int, lineHeight: Int,
fm: Paint.FontMetricsInt, paint: TextPaint
) {
// The text height must accommodate the size of the drawable. To make the accommodation,
// change the bottom of the font so there is enough room to fit the drawable between the
// font bottom and the font's descent.
val tpMetric = paint.fontMetrics
mBaseDescent = tpMetric.descent
val spaceAvailable = fm.descent - mBaseDescent
val spaceNeeded = mDrawableHeight + mMargin * 2
if (spaceAvailable < spaceNeeded) {
fm.descent += (spaceNeeded - spaceAvailable).toInt()
fm.bottom = fm.descent + (tpMetric.bottom - tpMetric.descent).toInt()
}
}
// StaticLayout prefers LineHeightSpan.WithDensity over this function.
override fun chooseHeight(
charSequence: CharSequence?, i: Int, i1: Int, i2: Int, i3: Int, fm: Paint.FontMetricsInt
) = throw IllegalStateException("LineHeightSpan.chooseHeight() called but is not supported.")
}