#TextView 显示多行html 并且对齐

先来看问题:如下图,是用拼接html 的方式用一个textView 显示,新需求是让他们每列对齐

原始界面

这个是这样实现的 holder.tvItemTrainPriceList.setText(Html.fromHtml(builder.toString()));

修改后页面

1. 第一个解决方案-修改标签样式-table

<table width = '100%' height='100%' >
  <col align="left" />
  <col align="left" />
  <col align="left" />

  <tr>
    <td><font color='#A7A7A7'>无座  </font></td>
    <td><font color='#A7A7A7' style='width:200px;display:inline-block;'>¥364.5  </font></td>
    <td><font color='#A7A7A7'>(无票)</font></td>
  </tr>
  <tr>
	<td><font color='#A7A7A7'>一等座  </font></td>
	<td><font color='#A7A7A7' style='width:200px;display:inline-block;'>¥19400.0  </font></td>
	<td><font color='#A7A7A7'>(无票)</font></td>
  </tr>
   <tr>
	<td><font color='#A7A7A7'>二等座  </font></td>
    <td><font color='#A7A7A7' style='width:200px;display:inline-block;'>¥119.5  </font></td>
    <td><font color='#A7A7A7'>(余100张)</font></td>
  </tr>
</table>
复制代码

无座	¥364.5	(无票)
一等座	¥19400.0	(无票)
二等座	¥119.5	(余100张)

怎奈何Android TextView 不支持 Table 标签

尝试自定义解析器也失败了

2. 第二个解决方案-用webview

1.准备用webview.loadData(tmp,"text/html","utf-8"); 结果出现中文乱码,

2.用这个解决webview.loadData(tmp, "text/html; charset=UTF-8", null);

3.结果出现字体大小问题,和webview 的父布局属性: warp_content 冲突,以及无法自动撑开布局等问题,只能弃用

3. 第三个解决方案-换成gridView

1.准备在adapter 里面嵌套gridView 想想太蛋疼,直接放弃

4. 第四个解决方案-添加空格

1.峰回路转,第四个方案终于完美实现一开始不管怎么调整都对齐不了,经过多次尝试发现 Android中空格字符有这么几种:

  == 普通的英文半角空格

  ==   ==   == no-break space （普通的英文半角空格但不换行）

　 == 中文全角空格 （一个中文宽度）

  ==   == en空格 （半个中文宽度）

  ==   == em空格 （一个中文宽度）

  == 四分之一em空格 （四分之一中文宽度）

对应的html 空格如下:

    不断行的空白（1个字符宽度）

    半个空白（1个字符宽度）

    一个空白（2个字符宽度）

    窄空白（小于1个字符宽度）

3.结论:

1. 一个汉字用: 四个   占位
2. 如果是数字: 一个阿拉伯数字, 用三个 thinsp; 占位

String htmlString = "<span style=''color='#585858'>商务座</font>
<font color='#FF6113' style='width:200px;display:inline-block;'>¥1024.5&thinsp;&thinsp;&thinsp;</font>
<font color='#585858'>(余1张)</font>
<br/>
<span style=''color='#585858'>硬座&nbsp;&nbsp;&nbsp;&nbsp;</font>
<font color='#FF6113' style='width:200px;display:inline-block;'>¥102.5&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;</font>
<font color='#585858'>(余10张)</font>
<br/>
<span style=''color='#585858'>商务座</font>
<font color='#FF6113' style='width:200px;display:inline-block;'>¥10200.5</font>
<font color='#585858'>(余100张)</font>
<br/>
<span style=''color='#A7A7A7'><font color='#A7A7A7'>二等座</font>
<font color='#A7A7A7' style='width:200px;display:inline-block;'>¥119.5&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;</font>
<font color='#A7A7A7'>(无票)</font>";

holder.tvItemTrainPriceList.setText(Html.fromHtml(builder.toString()));

复制代码

结果是这样的,成功搞定