搏击赛,电子桌牌,芳华 迅雷下载
上文介绍了，通过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" > <textview android:id="@+id/description_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:textcolor="@android:color/black" android:textsize="18dip" > </textview> <imageview android:id="@+id/expand_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:paddingbottom="5dip" android:paddingleft="5dip" android:paddingright="5dip" android:paddingtop="5dip" android:src="@drawable/text_ic_expand" android:visibility="gone" /> </linearlayout>
2.首先在activity中定义并初始化这些view：
我要评论
public class mainactivity extends activity {
textview descriptionview;
view layoutview ,expandview; //linearlayout布局和imageview
int maxdescripline = 3; //textview默认最大展示行数
//在oncreate中初始化
{
layoutview = findviewbyid(r.id.description_layout);
descriptionview = (textview)findviewbyid(r.id.description_view);
expandview = findviewbyid(r.id.expand_view);
}
}
3.然后设置textview显示文本，再根据默认展示行数设置其高度，并根据其是否已完全显示（当前展示行数是否大于等于实际行数）来判断需不需要点击更多按钮。
//设置文本
descriptionview.settext(gettext(r.string.content));
//descriptionview设置默认显示高度
descriptionview.setheight(descriptionview.getlineheight() * maxdescripline);
//根据高度来判断是否需要再点击展开
descriptionview.post(new runnable() {
@override
public void run() {
expandview.setvisibility(descriptionview.getlinecount() > maxdescripline ? view.visible : view.gone);
}
});
因为textview设置的是wrap_content，所以会显示实际高度和行数，这里根据maxdescripline来设置其高度。
看了最后一行代码可能有人会问？imageview （点击展开更多）是否应该显示 的判断逻辑为什么要放在post方法里边呢？ 这是由于在oncreate方法中定义设置的textview不会马上渲染并显示，所以textview的getlinecount()获取到的值一般都为零，因此使用post会在其绘制完成后来对imageview进行显示控制。
ps: 感觉我描述不清的朋友可以看下stackoverflow 上的讲解 how to use getlinecount() in textview android.
4.给layoutview设置点击事件。
给imageview定义一个rotateanimation的旋转动画，在旋转过程中根据旋转百分比进度控制textview高度，进而达到我们想要的效果。
layoutview.setonclicklistener(new view.onclicklistener() {
boolean isexpand;//是否已展开的状态
@override
public void onclick(view v) {
isexpand = !isexpand;
descriptionview.clearanimation();//清楚动画效果
final int deltavalue;//默认高度，即前边由maxline确定的高度
final int startvalue = descriptionview.getheight();//起始高度
int durationmillis = 350;//动画持续时间
if (isexpand) {
/**
* 折叠动画
* 从实际高度缩回起始高度
*/
deltavalue = descriptionview.getlineheight() * descriptionview.getlinecount() - startvalue;
rotateanimation animation = new rotateanimation(0, 180, animation.relative_to_self, 0.5f, animation.relative_to_self, 0.5f);
animation.setduration(durationmillis);
animation.setfillafter(true);
expandview.startanimation(animation);
} else {
/**
* 展开动画
* 从起始高度增长至实际高度
*/
deltavalue = descriptionview.getlineheight() * maxdescripline - startvalue;
rotateanimation animation = new rotateanimation(180, 0, animation.relative_to_self, 0.5f, animation.relative_to_self, 0.5f);
animation.setduration(durationmillis);
animation.setfillafter(true);
expandview.startanimation(animation);
}
animation animation = new animation() {
protected void applytransformation(float interpolatedtime, transformation t) { //根据imageview旋转动画的百分比来显示textview高度，达到动画效果
descriptionview.setheight((int) (startvalue + deltavalue * interpolatedtime));
}
};
animation.setduration(durationmillis);
descriptionview.startanimation(animation);
}
});
至此，通过布局已经实现了我们想要的效果。具体代码参见代码示例 的第一部分。
当然，我们可以这样使用，但是每次都这么重写未免显得有些麻烦。因此有必要把他写成一个单独控件，方便我们以后的开袋即食。废话不多说，上菜。
2.2 通过自定义view组合封装
这个view的布局结构并不打算使用xml来定义layout，直接定义一个继承linearlayout的moretextview类.这个类里边添加textview和imageview。
1.使用styleable自定义view属性
为了后边能够方便的在xml布局中使用moretextview这个自定义view，类似通过
android：text = “xxx”
android：textsize = “xxx”
这样快捷的绑定文本内容和设置字体大小等属性，我们可以通过 declare-styleable在values文件下的xml中自定义我们想要的属性，并在view中获取和使用。详细使用declare-styleable的内容会在后边补充，这里简要说下。
比如，moretextview应该有的基本属性,像 文本字体大小(textsize)、颜色(textcolor)和文本内容（text），还有默认显示行数(maxline)等几种属性。我们要想像textview一样直接在xml中设置绑定，可以这样做。
首先在values目录下新建个attrs.xml(名字随意),并定义moretextview这些属性。
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="moretextstyle"> <attr name="textsize" format="dimension"/> <attr name="textcolor" format="color"/> <attr name="maxline" format="integer" /> <attr name="text" format="string" /> </declare-styleable> </resources>
2.自定义moretextview并获取这些属性的值
上边定义了这些属性，就等于允许我们在xml中使用
more：text = “xxx”
more：textsize = “xxx”
more : textcolor = “xxx”
more : maxline = “xxx”
(注： more这个关键字可以随意)
这样直接设置属性值。那么具体怎么取值，我们稍后来讲。
（1）定义moretextview的属性：
public class moretextview extends linearlayout{
protected textview contentview; //文本正文
protected imageview expandview; //展开按钮
//对应styleable中的属性
protected int textcolor;
protected float textsize;
protected int maxline;
protected string text;
//默认属性值
public int defaulttextcolor = color.black;
public int defaulttextsize = 12;
public int defaultline = 3;
//....实现部分略
}
（2）moretextview的构造方法：
public moretextview(context context, attributeset attrs) {
super(context, attrs);
initalize();
initwithattrs(context, attrs);
bindlistener();
}
这三个方法简单说明下：
initalize()初始化并添加view。初始化textview和imageview,并添加到moretextview中去。
initwithattrs(context, attrs)取值并设置。利用attrs从xml布局中取我们配置好的text/textsize/textcolor/maxline等属性的属性值，并设置到view上去。
bindlistener()绑定点击事件并设置动画。 给当前moretextview设置点击事件，实现点击折叠和展开。
各个方法的具体实现：
//初始化并添加view
protected void initalize() {
setorientation(vertical); //设置垂直布局
setgravity(gravity.right); //右对齐
//初始化textview并添加
contentview = new textview(getcontext());
addview(contentview, linearlayout.layoutparams.match_parent, linearlayout.layoutparams.wrap_content);
//初始化imageview并添加
expandview = new imageview(getcontext());
int padding = dip2px(getcontext(), 5);
expandview.setpadding(padding, padding, padding, padding);
expandview.setimageresource(r.drawable.text_ic_expand);
linearlayout.layoutparams llp = new linearlayout.layoutparams(linearlayout.layoutparams.wrap_content, linearlayout.layoutparams.wrap_content);
addview(expandview, llp);
取值并设置这部分有必要将一下。我们利用typedarray从定义的styleable中取出属性值，赋给我们定义好的类的属性变量。记得取完之后调用recycle()回收释放。
protected void initwithattrs(context context, attributeset attrs) {
typedarray a = context.obtainstyledattributes(attrs,
r.styleable.moretextstyle);
int textcolor = a.getcolor(r.styleable.moretextstyle_textcolor,
defaulttextcolor); //取颜色值，默认defaulttextcolor
textsize = a.getdimensionpixelsize(r.styleable.moretextstyle_textsize, defaulttextsize);//取颜字体大小，默认defaulttextsize
maxline = a.getint(r.styleable.moretextstyle_maxline, defaultline);//取颜显示行数，默认defaultline
text = a.getstring(r.styleable.moretextstyle_text);//取文本内容
//绑定到textview bindtextview(textcolor,textsize,maxline,text);
a.recycle();//回收释放
}
//绑定到textview
protected void bindtextview(int color,float size,final int line,string text){
contentview.settextcolor(color);
contentview.settextsize(typedvalue.complex_unit_px,size);
contentview.settext(text);
contentview.setheight(contentview.getlineheight() * line);
post(new runnable() {//前面已讲，不再赘述
@override
public void run() {
expandview.setvisibility(contentview.getlinecount() > line ? view.visible : view.gone);
}
});
}
最后设置点击事件。
//点击展开与折叠，不再赘述
protected void bindlistener(){
setonclicklistener(new view.onclicklistener() {
boolean isexpand;
@override
public void onclick(view v) {
isexpand = !isexpand;
contentview.clearanimation();
final int deltavalue;
final int startvalue = contentview.getheight();
int durationmillis = 350;
if (isexpand) {
deltavalue = contentview.getlineheight() * contentview.getlinecount() - startvalue;
rotateanimation animation = new rotateanimation(0, 180, animation.relative_to_self, 0.5f, animation.relative_to_self, 0.5f);
animation.setduration(durationmillis);
animation.setfillafter(true);
expandview.startanimation(animation);
} else {
deltavalue = contentview.getlineheight() * maxline - startvalue;
rotateanimation animation = new rotateanimation(180, 0, animation.relative_to_self, 0.5f, animation.relative_to_self, 0.5f);
animation.setduration(durationmillis);
animation.setfillafter(true);
expandview.startanimation(animation);
}
animation animation = new animation() {
protected void applytransformation(float interpolatedtime, transformation t) {
contentview.setheight((int) (startvalue + deltavalue * interpolatedtime));
}
};
animation.setduration(durationmillis);
contentview.startanimation(animation);
}
});
}
另外，定义几个方法方便外部调用（获取文本textview，直接设置文本内容），同时还定义了一个dip转像素的静态方法。
public textview gettextview(){
return contentview;
}
public void settext(charsequence charsequence){
contentview.settext(charsequence);
}
public static int dip2px(context context, float dipvalue){
final float scale = context.getresources().getdisplaymetrics().density;
return (int)(dipvalue * scale + 0.5f);
}
其实到这里，我们的自定义多文本折叠展开moretextview已经完成了。如何使用呢？
在layout/xx.xml中使用
要想方便的使用我们刚刚的自定义属性来定义值，记得在xml namespace中定义应用：
自动引用命名空间res-auto
xmlns:more=”http://schemas.android.com/apk/res-auto”
或者 直接定义包名
xmlns:more=”http://schemas.android.com/apk/res/com.qiao.moretext”
命名空间后边跟的 more即下边你要使用自定义属性的开头部分。
比如我们的activity_main.xml
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:more="http://schemas.android.com/apk/res/com.qiao.moretext" android:id="@+id/root" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:orientation="vertical" > <com.qiao.moretext.moretextview android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dip" more:textcolor="@android:color/black" more:textsize="18dip" more:maxline="3" more:text="@string/content"/> </linearlayout>
在java中直接定义使用
由于上边定义moretextview只定义了一种构造方法 moretextview(context context, attributeset attrs) ，所以使用时，也只能：
moretextview content = new moretextview(mainactivity.this, null);
content.settext(gettext(r.string.content));
//然后addview到你要添加的地方
当然，聪明如你，可肯定知道怎么定义另外的构造方法来简单实用啦。
–>
moretextview(context context){
//使用默认值直接初始化
bindtextview()；
}
3.综述
综上呢，我们已经完成了所要实现的功能，作为ui呢，他可能会有些简陋，但作为一个demo起到示范作用已经够了。后边我们可能会考虑把它作为微博的一个listitem做成列表一样，并加入点赞等功能。有兴趣不妨做一下咯。。
源码示例下载地址：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio开发小型对话机器人app(实例代码)
Android通过Java sdk的方式接入OpenCv的方法
Android 通过cmake的方式接入opencv的方法步骤
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)
网友评论