6

我正在尝试在 TextView/EditText 中格式化 Hashtags(比如 Material Design Specs 中提到的 Chips)。我可以使用ReplacementSpan. 但问题是我无法增加 TextView/EditText 中的行距。见下图 在此处输入图像描述

问题是如何为主题标签添加顶部和底部边距?

这是我在文本中添加背景的代码:

   /**
     * First draw a rectangle
     * Then draw text on top
     */
    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        RectF rect = new RectF(x, top, x + measureText(paint, text, start, end), bottom);
        paint.setColor(backgroundColor);
        canvas.drawRoundRect(rect, CORNER_RADIUS, CORNER_RADIUS, paint);
        paint.setColor(textColor);
        canvas.drawText(text, start, end, x, y, paint);
    }
4

3 回答 3

11

不久前我遇到了类似的问题,这是我提出的解决方案:

xml中的托管TextView:

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="18dp"
        android:paddingBottom="18dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:gravity="fill"
        android:textSize="12sp"
        android:lineSpacingExtra="10sp"
        android:textStyle="bold"
        android:text="@{viewModel.renderedTagBadges}">

自定义版本ReplacementSpan

public class TagBadgeSpannable extends ReplacementSpan implements LineHeightSpan {

    private static int CORNER_RADIUS = 30;
    private final int textColor;
    private final int backgroundColor;
    private final int lineHeight;

    public TagBadgeSpannable(int lineHeight, int textColor, int backgroundColor) {
        super();
        this.textColor = textColor;
        this.backgroundColor = backgroundColor;
        this.lineHeight = lineHeight;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        final float textSize = paint.getTextSize();
        final float textLength = x + measureText(paint, text, start, end);
        final float badgeHeight = textSize * 2.25f;
        final float textOffsetVertical = textSize * 1.45f;

        RectF badge = new RectF(x, y, textLength, y + badgeHeight);
        paint.setColor(backgroundColor);
        canvas.drawRoundRect(badge, CORNER_RADIUS, CORNER_RADIUS, paint);

        paint.setColor(textColor);
        canvas.drawText(text, start, end, x, y + textOffsetVertical, paint);
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        return Math.round(paint.measureText(text, start, end));
    }

    private float measureText(Paint paint, CharSequence text, int start, int end) {
        return paint.measureText(text, start, end);
    }

    @Override
    public void chooseHeight(CharSequence charSequence, int i, int i1, int i2, int i3, Paint.FontMetricsInt fontMetricsInt) {
        fontMetricsInt.bottom += lineHeight;
        fontMetricsInt.descent += lineHeight;
    }
}

最后是创建 Spannable 的构建器

public class AndroidTagBadgeBuilder implements TagBadgeBuilder {

    private final SpannableStringBuilder stringBuilder;
    private final String textColor;
    private final int lineHeight;

    public AndroidTagBadgeBuilder(SpannableStringBuilder stringBuilder, int lineHeight, String textColor) {
        this.stringBuilder = stringBuilder;
        this.lineHeight = lineHeight;
        this.textColor = textColor;
    }

    @Override
    public void appendTag(String tagName, String badgeColor) {
        final String nbspSpacing = "\u202F\u202F"; // none-breaking spaces

        String badgeText = nbspSpacing + tagName + nbspSpacing;
        stringBuilder.append(badgeText);
        stringBuilder.setSpan(
            new TagBadgeSpannable(lineHeight, Color.parseColor(textColor), Color.parseColor(badgeColor)),
            stringBuilder.length() - badgeText.length(),
            stringBuilder.length()- badgeText.length() + badgeText.length(),
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        );
        stringBuilder.append("  ");
    }

    @Override
    public CharSequence getTags() {
        return stringBuilder;
    }

    @Override
    public void clear() {
        stringBuilder.clear();
        stringBuilder.clearSpans();
    }
}

结果将如下所示: 在 TextView 中呈现的徽章

TagBadgeSpannable根据自己的喜好调整措施。

我已经使用此代码将一个非常小的示例项目上传到github,因此请随时查看。

注意:该示例使用 Android 数据绑定,并以 MVVM 风格编写

于 2016-08-19T17:07:49.410 回答
8

Android 中的文本标记文档记录很差,编写此代码就像在黑暗中摸索。

我已经做了一点,所以我将分享我所知道的。

您可以通过将芯片跨度包装在LineHeightSpan. LineHeightSpan是一个扩展ParagraphStyle标记界面的界面,因此这告诉您它会影响段落级别的外观。也许解释它的一个好方法是将您的ReplacementSpan子类与 HTML进行比较<span>,而ParagraphStylespan 就像LineHeightSpanHTML 一样<div>

LineHeightSpan接口由一种方法组成:

public void chooseHeight(CharSequence text, int start, int end,
                         int spanstartv, int v,
                         Paint.FontMetricsInt fm);

为段落中的每一行调用此方法

  • text是你的Spanned字符串。
  • start是当前行开头的字符的索引
  • end是当前行末尾字符的索引
  • spanstartv是(IIRC)整个跨度本身的垂直偏移
  • v是(IIRC)当前行的垂直偏移量
  • fmFontMetrics对象,它实际上是一个返回的(输入/输出)参数。您的代码将更改fmTextView在绘图时使用这些更改。

因此,TextView将对其处理的每一行调用一次此方法。根据参数以及您的Spanned字符串,您设置FontMetrics以使用您选择的值呈现线条。

这是我为列表中的项目符号项(想想)做的一个示例<ol><li>,我希望在每个列表项之间进行一些分隔:

    @Override
    public void chooseHeight(CharSequence text, int start, int end, int spanstartv, int v, Paint.FontMetricsInt fm) {

        int incr = Math.round(.36F * fm.ascent); // note: ascent is negative

        // first line: add space to the top
        if (((Spanned) text).getSpanStart(this) == start) {
            fm.ascent += incr;
            fm.top = fm.ascent + 1;
        }

        // last line: add space to the bottom
        if (((Spanned) text).getSpanEnd(this) == end) {
            fm.bottom -= incr;
        }

    }

您的版本可能会更简单,只需FontMetrics为调用它的每一行更改相同的方式。

在解密 . 时FontMetrics,记录器和调试器是您的朋友。你只需要不断调整值,直到你得到你喜欢的东西。

于 2016-08-09T14:24:00.377 回答
1

BackgroundColorSpan不起作用 吗?

对于您的具体情况,您还可以为 TextView 设置 lineSpacing。

最后一个选项(未对此进行测试)是计算跨度的高度大于您正在绘制的高度。您可以检查DynamicDrawableSpan中的getSize 实现,以了解如何使用给定的 FontMetrics 实例作为参数来设置跨度的高度。

于 2016-08-16T08:05:03.887 回答