这次还是用开源项目来实现效果,我个人觉得上面的这个效果还是很赞的。于是就记录下如何实现这个效果,其实相当简单。这就是开源项目写的好的例子,整个开源项目的代码十分清晰,逻辑和代码结构都很棒,接入自己的工程也十分方便,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 collapsed -
animDuration
(defaults to 300ms) Duration of the Animation for the expansion/collapse -
animAlphaStart
(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 TextView -
collapseDrawable
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