首页 > 代码库 > 用开源项目ExpandableTextView打造可以下拉扩展的TextView
用开源项目ExpandableTextView打造可以下拉扩展的TextView
这次还是用开源项目来实现效果,我个人觉得上面的这个效果还是很赞的。于是就记录下如何实现这个效果,其实相当简单。这就是开源项目写的好的例子,整个开源项目的代码十分清晰,逻辑和代码结构都很棒,接入自己的工程也十分方便,10分钟之内搞定。
一、下载开源项目,导入lib
项目地址:https://github.com/Manabu-GT/ExpandableTextView
这个项目是用Android Studio编写的,如果你是用eclipse来构建,就需要做一些修改。如果懒得修改,就用我在本文末尾分享的源码吧。
二、在xml中放入控件
这个在点击后可以展开的控件叫做:ExpandableTextView,同样是一个自定义控件,使用方式自然是放在xml中啦。只要记得写写命名空间:xmlns:expandableTextView="http://schemas.android.com/apk/res-auto"
<com.ms.square.android.expandabletextview.ExpandableTextView android:id="@+id/expand_text_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" expandableTextView:maxCollapsedLines="8" expandableTextView:animAlphaStart="1"> <TextView android:id="@id/expandable_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:fontFamily="sans-serif-light" android:textSize="16sp" android:textColor="#666666" /> <ImageButton android:id="@id/expand_collapse" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:layout_gravity="right|bottom" android:background="@android:color/transparent"/> </com.ms.square.android.expandabletextview.ExpandableTextView>
Note:如果你没有特殊需求,请不要随便删除这里面的textView和ImageView。而且请务必保证这两个控件的id是:expandable_text,expand_collapse。
我们现在可以看出,这个控件其实就是一个容器,包含了这两个view,编辑器中的预览图如下:
如果你的eclipse提示预览图出现错误,无法加载drawable什么的,重启一下就好了。因为这里用到了lib中默认的箭头(右下角的图片)
三、在xml中设置控件
我们先来看看这个自定义控件可以设置的属性
3.1 ExpandableTextView
Also, you can optionally set the following attributes in your layout xml file to customize the behavior of the ExpandableTextView.
maxCollapsedLines
(defaults to 8) The maximum number of text lines allowed to be shown when the TextView gets collapsedanimDuration
(defaults to 300ms) Duration of the Animation for the expansion/collapseanimAlphaStart
(defaults to 0.7f) Alpha value of the TextView when the animation starts (NOTE) Set this value to 1 if you want to disable the alpha animation.expandDrawable
Customize a drawable set to ImageButton to expand the TextViewcollapseDrawable
Customize a drawable set to ImageButton to collapse the TextView
maxCollapsedLines:
textView在收起后还能展示的行数,默认值是8,这里的8是8行的意思
animDuration:动画持续时间,设置点击后textView展开的动画时间,默认是300,单位ms。这个不建议修改
animAlphaStart:动画开始的透明度,点击后textview会从这个透明度开始慢慢变到不透明,默认是0.7f。我建议修改为1(不透明),保证不会出现闪烁
expandDrawable:右下角的imageview在textView展开时显示的图片,是drawable类型
collapseDrawable:右下角imageview在textView收起时展示的图片,是drawable类型
题外话:虽然这里面可以通过xml属性进行设置,但它没有提供完善的java代码设置方案,所以如果真的需要可以自定在源码中进行添加。
3.2 TextView
这个开源项目做的好的一点就是最大限度的引用了现有的控件,这里显示文字的仍旧是textview,我们可以很方便的进行操作。而外层的ExpandableTextView就是一个容器,对textview进行修改。
<TextView android:id="@id/expandable_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:fontFamily="sans-serif-light" android:textSize="16sp" android:textColor="#666666" />
这里可以设置文字的颜色等,至于fontFamily我多说一句,它是设置字体的属性,如果没有用这个属性,那么就会采用系统默认的,如果像上述一样用了无衬线细字体,那么就会如下面右图所示
android:fontFamily="sans-serif" // roboto regular android:fontFamily="sans-serif-light" // roboto light android:fontFamily="sans-serif-condensed" // roboto condensed android:fontFamily="sans-serif-thin" // roboto thin (android 4.2) android:fontFamily="sans-serif-medium" // roboto medium (android 5.0)
in combination with
android:textStyle="normal|bold|italic"
this 14 variants are possible:
- Roboto regular
- Roboto italic
- Roboto bold
- Roboto bold italic
- Roboto-Light
- Roboto-Light italic
- Roboto-Thin
- Roboto-Thin italic
- Roboto-Condensed
- Roboto-Condensed italic
- Roboto-Condensed bold
- Roboto-Condensed bold italic
- Roboto-Medium
- Roboto-Medium italic
from:http://stackoverflow.com/questions/12128331/how-to-change-fontfamily-of-textview-in-android/12128448
四、在Java代码中使用
使用方式和textview一样,没社么可以多说的。如果是在listView中使用,就把它当一个view放进去就好了,具体可以参考项目提供的demo
package com.example.test;import com.ms.square.android.expandabletextview.ExpandableTextView;import android.app.Activity;import android.os.Bundle;public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ExpandableTextView expTv = (ExpandableTextView) findViewById(R.id.expand_text_view); //expTv.setText("hello world"); expTv.setText(getString(R.string.android5_0_text)); }}
strings.xml
<?xml version="1.0" encoding="utf-8"?><resources> <string name="app_name">Test</string> <string name="hello_world">Hello world!</string> <string name="android5.0_text">谷歌对各版本的系统安装量进行了追踪,去年12月,Android 4.4 KitKat系统的份额从33.9(百分之)升至39.1(百分之),而Android 5.0甚至没有出现在榜单上。 需要注意的是,谷歌在报告中并没有对份额低于0.1(百分之)的系统进行统计。两 年前发布的Android 4.3 Jelly Bean系统依然占据主导地位,份额为 46(百分之),Android 4.0 Ice Cream Sandwich的 份额为6.7(百分之),Android 2.3 Gingerbread的份额为 7.8(百分之),Android 2.2 Froyo的份额为0.4(百分之)。尽管很多用户尚未用上Android 5.0系统,但这并不妨碍 谷歌的更新不发。消息称,谷歌可能 会在今年2月发布Android 5.1,更新包括:Android 5.0中缺失的静音模式被重新加入;系统稳定性提 升;改进内存管理性能;修复应用突然关闭问题;修复使用Wi-Fi时网络设备过度消耗问题;修复 无线网络连接问题。</string></resources>
五、多说一句
最后想分享下这个效果实现的思路,view在绘制过程中会有自己的大小,而我们可以通过给view添加动画的方式来让其变化大小,在其变化大小的时候与他相邻的view也会被挤压,这就是listview中出现点击textview展开后,下方view被压的原因。归根结底,我们的实现思路是方式view到屏幕中,点击后view会出现动画,让自己的大小真正发生改变,在改变的时候要对textview进行绘制,这样才能出现现在的效果。所以,很多看起来高大上的东西,我们如果细细分析,会发现原理其实很简单。我们也是可以实现的,只不过别人已经做好了,我们就不要重复造轮子了。
源码下载:http://download.csdn.net/detail/shark0017/8346821
用开源项目ExpandableTextView打造可以下拉扩展的TextView