将 ImageSpan 对齐到 TextView 的顶部

Posted

技术标签:

【中文标题】将 ImageSpan 对齐到 TextView 的顶部【英文标题】:Aligning ImageSpan to the top of the TextView 【发布时间】:2013-12-21 22:25:20 【问题描述】:

目前,我希望在文本之间添加一个图像并将其对齐到 TextView 的顶部。

类似这样的:

我能找到的唯一垂直对齐方式是基线(似乎将它放在文本中心的正下方)和底部对齐。

如果我使用 ALIGN_BASELINE 会发生什么:

有没有办法让它与顶部对齐?

我当前的代码:

    txtView.setText(this.addImageAsterisk(
        "The string to have asterisk at the end*"), BufferType.SPANNABLE);

然后

private CharSequence addImageAsterisk(String string) 
    Drawable d = context.getResources().getDrawable(R.drawable.img_asterisk); 

    ImageSpan imageSpan = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
    final SpannableString spannableString = new SpannableString(string);
    spannableString.setSpan(imageSpan, string.length()-1, string.length(), 0);
    return spannableString;

删除 ImageSpan.ALIGN_BASELINE 将其设置为与底部对齐,这也不是我的预期结果。

---谢谢用户Lalit Poptani,我尝试应用您的答案---- 应用这个之后,会发生什么是整个 textview 似乎有额外的边距顶部。

在应用跨度之前:

This is the text*

应用 SuperscriptSpanAdjuster 后

(some extra space)
This is the text*

我的代码:

String string = "This is the text*";
Drawable d = this.context.getResources().getDrawable(R.drawable.img_asterisk); 

d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight()); 

ImageSpan imageSpan = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
SuperscriptSpanAdjuster s = new SuperscriptSpanAdjuster(1.5);
final SpannableString spannableString = new SpannableString(string);
spannableString.setSpan(s, string.length() - 1, string.length(), 0);
spannableString.setSpan(imageSpan, string.length(), string.length() + 1, 0);
textView.setText(spannableString);

【问题讨论】:

分享您的代码。并通过附上示例图片来明确您真正想要什么。 【参考方案1】:

只需将您的可绘制对象包装在 inset drawable 中,并将 inset bottom 设置为某个值,例如 8dp。不是最好的解决方案,但会起作用。

修改你的drawable/img_asterisk.xml --

<inset
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetBottom="8dp">

    <!-- Your previous asterisk drawable, probably a 'shape' -->

</inset>

【讨论】:

【参考方案2】:

您可以做的是使用自定义 MetricAffectingSpan 来保持其比率,例如,

public class SuperscriptSpanAdjuster extends MetricAffectingSpan 
    double ratio = 0.5;

    public SuperscriptSpanAdjuster(double ratio) 
        this.ratio = ratio;
    

    @Override
    public void updateDrawState(TextPaint paint) 
        paint.baselineShift += (int) (paint.ascent() * ratio);
    

    @Override
    public void updateMeasureState(TextPaint paint) 
        paint.baselineShift += (int) (paint.ascent() * ratio);
    

您可以使用SpannableString 将星号应用于您的字符串,例如,

SpannableString mString = new SpannableString("This is what I wanted*");
mString.setSpan(new SuperscriptSpanAdjuster(0.5), mString.length() - 1, 
                     mString.length(), SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
mTextView.append("\n");
mTextView.append(mString);

这是根据您的需要将星号附加到您的文本中。你的输出将是,

【讨论】:

应用这个之后,我的文本似乎有额外的页边距。 可以通过链接SuperscriptSpanAdjuster(0.5)的构造函数参数来增加或减少边距 啊,你是对的 :) 但是 SuperscriptSpanAdjuster 似乎只适用于文本,但是当我在带有 ImageSpan 的部分上使用它时,ImageSpan 仍然保持在相同的位置

以上是关于将 ImageSpan 对齐到 TextView 的顶部的主要内容,如果未能解决你的问题,请参考以下文章

AndroidRichText 让Textview轻松的支持富文本(图像ImageSpan点击效果等等类似QQ微信聊天)

[bug修复方案分享]ImageSpan居中问题

减少 ImageSpan 的高度和宽度

Android TextView中插入图片不居中的问题

将 TextView 左对齐和居中对齐

Android TextView 文本对齐