给TextView添加前置ImageSpan时平板端出现额外行间距问题

嘿，我来帮你搞定这个头疼的跨设备显示问题！你说在Nexus 7这类平板上给TextView加ImageSpan后，文本行之间多出了空白，但Nexus 5X手机上显示正常，对吧？我之前也遇到过类似的情况，大概率是ImageSpan的对齐方式和不同设备的行高计算逻辑在搞鬼。

为啥会出现这种差异？ #

平板和手机的屏幕密度、TextView默认布局逻辑不一样。默认的ImageSpan是ALIGN_BOTTOM对齐，也就是图片底部和文本底部对齐，这种情况下平板的TextView可能会把行高拉得更开，来容纳图片，就出现了额外空白。另外你代码里拼接title时加的" " + name，也可能和ImageSpan的布局产生奇怪的交互。

具体怎么解决？ #

1. 给ImageSpan换个对齐方式 #

把默认的ALIGN_BOTTOM改成ALIGN_BASELINE，让图片的基线和文本基线对齐，这样系统计算行高时就不会乱加空白了：

ImageSpan imageSpan = new ImageSpan(yourDrawable, ImageSpan.ALIGN_BASELINE);

2. 让Drawable适配屏幕密度 #

平板的dpi更高，直接用原始尺寸的图标会显得过大，撑高行高。你可以根据屏幕密度缩放Drawable：

float density = getResources().getDisplayMetrics().density;
// 比如你要24dp的图标，计算适配后的像素尺寸
int iconSize = (int) (24 * density + 0.5f);
yourDrawable.setBounds(0, 0, iconSize, iconSize);

3. 给TextView固定行高 #

要是上面的方法还没解决，就直接给TextView设置固定行高，避免系统自动调整：

<!-- 在布局里加这两行 -->
<TextView
    ...
    android:lineHeight="24sp"
    android:minLineHeight="24sp"/>

或者代码里设置：

int lineHeight = (int) (24 * getResources().getDisplayMetrics().density + 0.5f);
yourTextView.setLineHeight(lineHeight);

4. 换个方式拼接文本和ImageSpan #

你现在是先拼接字符串再处理，不如直接用SpannableString来组合，避免空格带来的问题：

// 先组装文本内容
String content = name + " " + itemCount + " " + itemNoun;
SpannableString spannable = new SpannableString(content);
// 在开头插入ImageSpan（如果是要放在name前面的话，调整span的起始位置）
spannable.setSpan(imageSpan, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
yourTextView.setText(spannable);

测试建议 #

改完之后在Nexus 7和5X上都测一下，确保行间距一致。要是还有问题，可以试试用DynamicDrawableSpan来自定义图片的布局逻辑，但一般上面的方法就能解决大部分情况啦。

内容的提问来源于stack exchange，提问作者Katy Colins