半行文字显示“查看更多”TailTextView

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了半行文字显示“查看更多”TailTextView相关的知识，希望对你有一定的参考价值。

参考技术A 当一个文本过长的时候会显示很多行，为了显示更多的信息（露出更多的view），会出现查看更多的需求。类似于下图：

因为是在TextView内部处理这个事，所以一定要自定义TextView，把新的TextView叫做TailTextView。
大致思路如下：

自定义属性写了两个：showTail（是否显示小尾巴）和tailColor（尾巴颜色）
重写onMeasure方法，先使用super的测量方法得到TextView每一行的布局
拿到TextView前maxLines-1行的文字，作为一定显示的文字，最后一行作为要处理的文字
测量出小尾巴的宽度，将一行最大的宽度减去小尾巴宽度，得到原来文字最大宽度，使用这个宽度对最后一行文字进行裁切。
在刚才得到的文字上加上“…查看更多”，设置span，回调被裁切方法。
将新的Text重新设置到TextView上。

效果就是上面放的图了。

设置maxLines属性之后就不要设置ellipsize="end"了，可能会引起最后一行的宽度测量不准确。
screenWidth * 0.6f有点草率，可以修改的
如果要使用原来的maxLines属性的功能就设置showTail为false
没有给出TailTextView的全文，但核心内容就是这些了

Markdown 语法手册 - 完整版（下）

6. 引用

语法说明：

引用需要在被引用的文本前加上>符号。

代码：

  1. > 这是一个有两段文字的引用,
  2. > 无意义的占行文字1.
  3. > 无意义的占行文字2.
  4. >
  5. > 无意义的占行文字3.
  6. > 无意义的占行文字4.

显示效果：

这是一个有两段文字的引用, 
无意义的占行文字1. 
无意义的占行文字2.

无意义的占行文字3. 
无意义的占行文字4.

Markdown 也允许你偷懒只在整个段落的第一行最前面加上 > ：

代码：

  1. > 这是一个有两段文字的引用,
  2. 无意义的占行文字1.
  3. 无意义的占行文字2.
  5. > 无意义的占行文字3.
  6. 无意义的占行文字4.

显示效果：

这是一个有两段文字的引用, 
无意义的占行文字1. 
无意义的占行文字2.

无意义的占行文字3. 
无意义的占行文字4.

6.1. 引用的多层嵌套

区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 > ：

代码：

  1. >>> 请问 Markdwon 怎么用？ - 小白
  3. >> 自己看教程！ - 愤青
  5. > 教程在哪？ - 小白

显示效果：

请问 Markdwon 怎么用？ - 小白

自己看教程！ - 愤青

教程在哪？ - 小白

6.2. 引用其它要素

引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等：

代码：

  1. > 1. 这是第一行列表项。
  2. > 2. 这是第二行列表项。
  3. >
  4. > 给出一些例子代码：
  5. >
  6. > return shell_exec("echo $input | $markdown_script");

显示效果：

  1. 这是第一行列表项。
  2. 这是第二行列表项。

给出一些例子代码：

  1. return shell_exec("echo $input | $markdown_script");

7. 插入图像

图片的创建方式与超链接相似，而且和超链接一样也有两种写法，行内式和参考式写法。

语法中图片Alt的意思是如果图片因为某些原因不能显示，就用定义的图片Alt文字来代替图片。 图片Title则和链接中的Title一样，表示鼠标悬停与图片上时出现的文字。 Alt 和 Title 都不是必须的，可以省略，但建议写上。

7.1. 行内式

语法说明：![图片Alt](图片地址 “图片Title”)

代码：

  1. 美丽花儿：
  2. ![美丽花儿](http://ww2.sinaimg.cn/large/56d258bdjw1eugeubg8ujj21kw16odn6.jpg "美丽花儿")

显示效果：

美丽花儿： 

7.2. 参考式

语法说明：

在文档要插入图片的地方写![图片Alt][标记]

在文档的最后写上[标记]:图片地址 “Title”

代码：

  1. 美丽花儿：
  2. ![美丽花儿][flower]
  4. [flower]:http://ww2.sinaimg.cn/large/56d258bdjw1eugeubg8ujj21kw16odn6.jpg "美丽花儿"

显示效果：

美丽花儿： 

8. 内容目录

在段落中填写 [TOC] 以显示全文内容的目录结构。

效果参见最上方的目录

9. 注脚

语法说明：

在需要添加注脚的文字后加上脚注名字[^注脚名字],称为加注。 然后在文本的任意位置(一般在最后)添加脚注，脚注前必须有对应的脚注名字。

注意：经测试注脚与注脚之间必须空一行，不然会失效。成功后会发现，即使你没有把注脚写在文末，经Markdown转换后，也会自动归类到文章的最后。

代码：

  1. 使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2], 你可以使用 Leanote[^Le] 编辑器进行书写。
  3. [^1]:Markdown是一种纯文本标记语言
  5. [^2]:HyperText Markup Language 超文本标记语言
  7. [^Le]:开源笔记平台，支持Markdown和笔记直接发为博文

显示效果：

使用 Markdown1可以效率的书写文档, 直接转换成 HTML2, 你可以使用 Leanote3 编辑器进行书写。

注：脚注自动被搬运到最后面，请到文章末尾查看，并且脚注后方的链接可以直接跳转回到加注的地方。

10. LaTeX 公式

10.1. $ 表示行内公式：

代码：

  1. 质能守恒方程可以用一个很简洁的方程式 $E=mc^2$ 来表达。

显示效果：

质能守恒方程可以用一个很简洁的方程式  来表达。

10.2 $$ 表示整行公式：

代码：

  1. $$sum_{i=1}^n a_i=0$$
  3. $$f(x_1,x_x,ldots,x_n) = x_1^2 + x_2^2 + cdots + x_n^2 $$
  5. $$sum^{j-1}_{k=0}{widehat{gamma}_{kj} z_k}$$

访问 MathJax 参考更多使用方法。

11. 流程图

代码：

  1. flow
  2. st=>start: Start:>https://www.zybuluo.com
  3. io=>inputoutput: verification
  4. op=>operation: Your Operation
  5. cond=>condition: Yes or No?
  6. sub=>subroutine: Your Subroutine
  7. e=>end
  9. st->io->op->cond
  10. cond(yes)->e
  11. cond(no)->sub->io

显示效果：

StartverificationYour OperationYes or No?EndYour Subroutineyesno

更多语法参考：流程图语法参考

12 .表格

语法说明：

  1. 不管是哪种方式，第一行为表头，第二行分隔表头和主体部分，第三行开始每一行为一个表格行。
  2. 列于列之间用管道符|隔开。原生方式的表格每一行的两边也要有管道符。
  3. 第二行还可以为不同的列指定对齐方向。默认为左对齐，在-右边加上:就右对齐。

代码：

简单方式写表格：

  1. 学号|姓名|分数
  2. -|-|-
  3. 小明|男|75
  4. 小红|女|79
  5. 小陆|男|92

原生方式写表格：

  1. |学号|姓名|分数|
  2. |-|-|-|
  3. |小明|男|75|
  4. |小红|女|79|
  5. |小陆|男|92|

为表格第二列指定方向：

  1. 产品|价格
  2. -|-:
  3. Leanote 高级账号|60元/年
  4. Leanote 超级账号|120元/年

显示效果： 
简单方式写表格：

学号姓名分数
小明 男 75
小红 女 79
小陆 男 92

原生方式写表格：

学号姓名分数
小明 男 75
小红 女 79
小陆 男 92

为表格第二列指定方向：

产品价格
Leanote 高级账号 60元/年
Leanote 超级账号 120元/年

13. 分隔线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

代码：

  1. * * *
  3. ***
  5. *****
  7. - - -
  9. ---------------------------------------

显示效果都一样：

14. 代码

对于程序员来说这个功能是必不可少的，插入程序代码的方式有两种，一种是利用缩进(Tab), 另一种是利用”`”符号（一般在ESC键下方）包裹代码。

语法说明：

  1. 插入行内代码，即插入一个单词或者一句代码的情况，使用`code`这样的形式插入。
  2. 插入多行代码，可以使用缩进或者“` code “`,具体看示例。

注意： 缩进式插入前方必须有空行

8.1. 行内式

代码：

  1. C语言里的函数 `scanf()` 怎么使用？

显示效果：

C语言里的函数 scanf() 怎么使用？

8.2. 缩进式多行代码

缩进 4 个空格或是 1 个制表符

一个代码区块会一直持续到没有缩进的那一行（或是文件结尾）。

代码：

  1. #include <stdio.h>
  2. int main(void)
  3. {
  4. printf("Hello world ");
  5. }

显示效果：

  1. #include <stdio.h>
  2. int main(void)
  3. {
  4. printf("Hello world ");
  5. }

8.3. 用六个`包裹多行代码

代码：

  1. ```
  2. #include <stdio.h>
  3. int main(void)
  4. {
  5. printf("Hello world ");
  6. }
  7. 、、、

显示效果：

  1. #include <stdio.h>
  2. int main(void)
  3. {
  4. printf("Hello world ");
  5. }

8.4. HTML 原始码

在代码区块里面， & 、 < 和 > 会自动转成 HTML 实体，这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码，只需要复制贴上，剩下的 Markdown 都会帮你处理，例如：

代码：

第一个例子：

  1. <div class="footer">
  2. © 2004 Foo Corporation
  3. </div>

第二个例子：

  1. <table>
  2. <tr>
  3. <th rowspan="2">值班人员</th>
  4. <th>星期一</th>
  5. <th>星期二</th>
  6. <th>星期三</th>
  7. </tr>
  8. <tr>
  9. <td>李强</td>
  10. <td>张明</td>
  11. <td>王平</td>
  12. </tr>
  13. </table>

显示效果：

第一个例子： 


© 2004 Foo Corporation 

 

第二个例子：

值班人员星期一星期二星期三
李强 张明 王平
    1. Markdown是一种纯文本标记语言 ?
    2. HyperText Markup Language 超文本标记语言 ?
    3. 开源笔记平台，支持Markdown和笔记直接发为博文 ?

以上是关于半行文字显示“查看更多”TailTextView的主要内容，如果未能解决你的问题，请参考以下文章

如何让一个单元格内容显示两行文字呢？

WPFListBox GridViewColumn Header 文字换行文字多行显示

换行文字隐藏省略号问题

ios中怎么让uibutton显示两行文字

Markdown 语法手册 - 完整版（下）

css3实现超过两行文字，超出用三个点显示（兼容性不行，仅供学习）