教你实现一个具备展开折叠功能TextView.docx
- 文档编号:876644
- 上传时间:2022-10-13
- 格式:DOCX
- 页数:10
- 大小:18.25KB
教你实现一个具备展开折叠功能TextView.docx
《教你实现一个具备展开折叠功能TextView.docx》由会员分享,可在线阅读,更多相关《教你实现一个具备展开折叠功能TextView.docx(10页珍藏版)》请在冰豆网上搜索。
教你实现一个具备展开折叠功能TextView
教你实现一个具备展开折叠功能的TextView
可折叠的textview是一个很常见的功能,相信大家都在微信朋友圈体验过这种场景:
朋友发的笑话都只有半截,下面是一片白色,你要展开全文之后才能知道最后结果。
其实这也不是什么高大上的东西,网上也有现成的例子,但是使用起来还是得稍微调整一下,最牛逼的应该就是Manabu-GT的ExpandableTextView。
那么我们通过对它的学习,自己来撸一发
项目已经发布在github上
我们先实现一个基本功能,能点击收放就行了,其他效果先不管
定义相关基本属性
仔细看下上图,其实这个自定义的控件也就由两部分组成,一个是正常的显示文本部分,另外一个是收放的按钮,因此我们可以通过组合布局的形式来实现
首先写死id,这是因为我们要在组合布局里面操作这2个TextView,所以最简单的途径就是直接拿到这2个对象进行使用
xmlversion="1.0"encoding="utf-8"?
>
--原始textview-->
--收起展开按钮textview-->
然后是自定义属性的设计
xmlversion="1.0"encoding="utf-8"?
>
--允许显示最大行数-->
剩下就是很传统的初始化
publicclassExpandableTextViewextendsLinearLayout{
TextViewid_source_textview;
TextViewid_expand_textview;
publicExpandableTextView(Contextcontext){
this(context,null);
}
publicExpandableTextView(Contextcontext,AttributeSetattrs){
super(context,attrs);
init(context,attrs);
}
privatevoidinit(Contextcontext,AttributeSetattrs){
setOrientation(VERTICAL);
TypedArrayarray=context.obtainStyledAttributes(attrs,;
maxExpandLines=array.getInteger(,3);
array.recycle();
}
@Override
protectedvoidonFinishInflate(){
super.onFinishInflate();
id_source_textview=(TextView)findViewById(;
id_expand_textview=(TextView)findViewById(;
id_expand_textview.setOnClickListener(newOnClickListener(){
@Override
publicvoidonClick(Viewv){
}
});
}
@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
}
}
OK,大家都会的说完了,下面开始分逻辑一一说明
测量
onMeasure想必不用多说了,他是负责对ViewGroup进行测量,用来把握整体ViewGroup的大小。
那么我们这里就可以利用这个方法来对组合布局收放的大小进行控制
publicvoidsetText(Stringtext){
isChange=true;
id_source_textview.setText(text);
}
首先,如果你在两次setText之间没有发生文本变化,或者这个组合布局本身都不显示,那么我们果断的终止计算操作,因为这个计算过程是没有意义的
//如果隐藏控件或者textview的值没有发生改变,那么不进行测量
if(getVisibility()==GONE||!
isChange){
return;
}
isChange=false;
完成上述的判断之后,我们就开始真正的去实现收起一个textview的功能了
//初始化默认状态,即正常显示文本
id_expand_textview.setVisibility(GONE);
id_source_textview.setMaxLines(Integer.MAX_VALUE);
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
如果文本行数不满足收起展开的最小行数,那么终止,而以初始的状态展现在我们的眼前
//如果本身没有达到收起展开的限定要求,则不进行处理
if(id_source_textview.getLineCount()<=maxExpandLines){
return;
}
默认我们是设置成收起状态的,在收起状态时,我们设置当前行数为最大可显示行数,并且按钮显示出来
if(isCollapsed){
id_source_textview.setLines(maxExpandLines);
}
id_expand_textview.setVisibility(VISIBLE);
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
测量部分就结束了。
记住这里又一个关键点,每次UI的变化,都需要我们去重新测量,不然最终获取出来的数据就会有问题
点击效果
无非就是收放的切换
id_expand_textview.setOnClickListener(newOnClickListener(){
@Override
publicvoidonClick(Viewv){
isCollapsed=!
isCollapsed;
if(isCollapsed){
id_expand_textview.setText("展开");
}
else{
id_expand_textview.setText("收起");
}
//不带动画的处理方式
isChange=true;
requestLayout();
}
});
使用
xmlversion="1.0"encoding="utf-8"?
>
android="/res/android" android: layout_width="match_parent" android: layout_height="match_parent"> < android: id="@+id/expandable_text" android: layout_width="match_parent" android: layout_height="wrap_content"> android: id="@id/id_source_textview" android: layout_width="wrap_content" android: layout_height="wrap_content"/> android: id="@id/id_expand_textview" android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="展开"/> expandable_text=(ExpandableTextView)findViewById(; expandable_text.setText("挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的"+ "挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的"+ "挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的"+ "挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的"+ "挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的"+ "挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的挨打的"); 】 不带动画效果的收放功能 动画效果 基本功能我们是完成了,但是不能仅仅满足这一点点。 通过点击进行过渡切换,这样的效果体验上肯定会更好一些 继续添加我们的自定义属性,这里我们添加的是动画执行时间 --动画执行时间--> 默认为500ms duration=array.getInteger(,500); 动画参数的初始化 既然涉及到高度的变化,那么我们就必须要知道收起与展开2个不同状态下的高度值,因为动画变化区间就在这2个值范围内。 展开状态下的高度就是设置maxLines为Integer.Max时候ViewGroup的高度,收起状态下的高度就是设置了maxExpandLines值之后的ViewGroup的高度 获取文本的高度 //初始化高度赋值,为后续动画事件准备数据 realTextViewHeigt=getRealTextViewHeight(id_source_textview); privateintgetRealTextViewHeight(TextViewtextView){ //getLineTop返回值是一个根据行数而形成等差序列,如果参数为行数,则值即为文本的高度 inttextHeight=textView.getLayout().getLineTop(textView.getLineCount()); returntextHeight+textView.getCompoundPaddingBottom()+textView.getCompoundPaddingTop(); } 收起之后的高度,这个需要等ViewGroup渲染完成之后才能真正获取到。 这里lastHeight指的是总高度减去文本部分的高度,也就是收放按钮所占区域高度 if(isCollapsed){ id_sour
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实现 一个 具备 展开 折叠 功能 TextView