Android UI实现多行文本折叠展开效果实现多行文本折叠展开效果
上文介绍了单行文本水平触摸滑动效果,通过EditText实现TextView单行长文本水平滑动效果。
本文继续介绍了多行文本折叠展开,自定义布局View实现多行文本折叠和展开
1.概述概述
经常在APP中能看到有引用文章或大段博文的内容,他们的展示样式也有点儿意思,默认是折叠的,当你点击文章之后它会自
动展开。再次点击他又会缩回去。
网上有找到部分效果,感觉不是很满意。最后自己尝试用 自定义布局layout 写了个demo。比较简陋,不过可以用了。有这方
面需求的朋友可以稍加改造下。如有更好的创意,也不妨分享一下。
效果图:
2.具体实现具体实现
但从实现效果方面来看,只用简单定义必要view即可,后变为了方便扩展使用和挪用,又对整个布局进行封装,方便直接使
用。
2.1 通过多个布局组合实现通过多个布局组合实现
第一想法当然是用多个View组合来实现。那么久定义一个LinearLayout布局分别嵌套TextView和ImageView来做。
大概步骤:
– 定义布局,垂直的线性LinearLayout布局、TextView和ImageView。 在layout中定义基本组件。
– 设置TextView的高度为指定行数*行高。 不使用maxLine的原因是maxLine会控制显示文本的行数,不方便后边使用动画展
开全部内容。因此这里TextView的高度也因该为wrap_content。
– 给整个布局添加点击事件,绑定动画。 点击时,若TextView未展开则展开至其实际高度,imageView 旋转;否则回缩至 指
定行数*行高 , imageView 旋转缩回。
开始编写代码:
1.在xml中定义布局:
<LinearLayout
android:id="@+id/description_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="12dip"
android:paddingRight="12dip"
android:paddingTop="5dip" >