今天再次学习了一下android中最常见的控件--TextView是使用与其属性方法。记录下来,以免忘记。
先看看使用TextView能实现些申明特殊的效果把:
图1 textView实现跑马灯效果
图2 TextView实现解析简单的html网页
图3 实现多个TextView的跑马灯和折叠TextView
常见属性设置
省略了必要设置的宽和、高属性和常见的位置设置属性。
android:text <!--设置文本内容 后面是对应的java--> setText();
android:textSize <!--设置文字的大小,推荐单位为dp--> setTextSize();
android:textColor <!--设置文字的颜色--> setTextColor();
android:textStyle <!--设置文字形状--> setTextStyle();
android:typeface <!--设置文本字体,normal,sans,serif,monospace--> setTypeface();
android:textScaleX <!--设置文字之间的间隔,默认为1.0f--> setTextScaleX();
android:background <!--设置背景颜色--> setBackgroundColor();
android:textColorLink <!--设置文字链接的颜色--> setTextColorLink();
android:lines <!--设置文本行数--> setLines();
android:singleLine <!--单行显示,现在已经不推荐使用--> setSingleLine();
TextView高级属性设置
高级是不是高级我不知道,但是下面这些属性我个人用的比较少:
android:autoLink //设置是否显示为可点击的链接。可选值(none/web/email/phone/map/all)
android:drawableBottom //在text的下方输出一个drawable(图片),同理可在上、左右输出图片
android:drawablePadding //设置text与drawable(图片)的间隔,需在有图片的情况下使用,否则无效
android:ellipsize //设置当文字过长时,该控件该如何显示。可设置如下属性值:"start"省略号显示在开头;"end”省略号显示在结尾;"middle"省略号显示在中间; "marquee" 以跑马灯的方式显示(动画横向移动)
android:linksClickable //设置点击时是否链接,即使设置了autoLink
android:marqueeRepeatLimit //在ellipsize设定为marquee时,设置重复滚动的次数,设置为marquee_forever时表示无限次。
android:shadowRadius //设置阴影的半径。设置为0.1就变成字体的颜色了,一般设置为3.0的效果比较好
android:shadowColor //指定文本阴影的颜色,需要与shadowRadius一起使用
TextView中使用富文本
我原本以为TextView只能用来显示文字,后来发现TextView远远比想象的要强大的多,我们甚至可以用他来翻译网页。现在让我记录下TextView是怎么解析html的吧:
相信大家都知道在java代码中的setText()这个方法吧,我们可以在里面传入CharSequence,让其在TextView中显示出来。在android中又有Html.fromHtml()可以将html转化成CharSequence。所以,对Html进行最简单的解析可以这样写:
mHtml = "<html><body>这里添加了超链接,点击试试把<a href='http://www.baidu.com'>连接文本</a></body></html>";
//此处省略了findViewById
mTextView.setText(Html.fromHtml(mHtml));
结果如图:
图4 简单的html解析
是不是很简单,但是点击连接文本,发现并没有反应,这个因为我们还没有为他设置响应点击事件,设置也很简单,代码如下:
mTextView.setMovementMethod(LinkMovementMethod.getInstance());//响应html中的点击事件
当解析的html比较多,一个页面不能显示完全时,可以设置滑动显示:
mTextView.setMovementMethod(ScrollingMovementMethod.getInstance());// 滚动
好了,以为这样就完了?No。TextView强大的功能还在后面呢。当html中有图片时,我们又该怎么解析呢??只需要重写Html.fromHtml()中的ImageGetter方法,就可以添加图片到TextView中进行显示,是不是很神奇?
例如,我们对网络图片进行解析:可以这样重写ImageGetter()方法。
Html.ImageGetter mImgGetFormNetwork = new Html.ImageGetter() {
public Drawable getDrawable(String source) {
Drawable drawable = null;
URL url;
try {
url = new URL(source);
drawable = Drawable.createFromStream(url.openStream(), ""); //获取网路图片
} catch (Exception e) {
return null;
}
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable
.getIntrinsicHeight());
return drawable;
}
};
调用的时候可以这样:
mTextView.setText(Html.fromHtml(mHtml1,mImgGetFormNetwork,null));
不过加载网络图片还不不建议直接放在主线程中,放在主线程会导致UI阻塞,强烈不推荐这么写,可以考虑开一个线程来进行获取图片。
最后,想要你的程序运行,还需要添加网络访问权限:
<uses-permission android:name="android.permission.INTERNET" />
到现在,我们的TextView不但可以显示文字,还可以显示图片了。但是android中的html解析能力十分有限,当html中有不可识别的标签时,我们又该怎么做呢?注意看,Html.fromHtml();中一共有三个参数,最后一个就是让我们来解决不能识别的tag的。最后一个参数是TagHandler,我们只需要通过重写TagHandker来识别自身的标签,就可以达到正确解析的目的,那么怎么使用呢?可以直接参考源博客http://blog.csdn.net/u010418593/article/details/9322197,也可以参考下面的代码:
重写TagHandler,在这里我们对其不能解析的size标签进行自定义解析:
/**
* Created by 24540 on 2016/11/9.
* 参考博客:http://blog.csdn.net/u010418593/article/details/9322197
*/
class SizeLabel implements Html.TagHandler {
private int size;
public SizeLabel(int size) {
this.size = size;
}
@Override
public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) {
/**
* 参数:
* opening:为true时表示开始解析,为false时表示解析完
* tag:当前解析的标签
* output:文本中的内容
* xmlReader:xml解析器
**/
// 判断当前解析的tag是否为size,并且已经解析完毕(在没有解析完毕之前output中没有数据)
if(tag.toLowerCase().equals("size") && !opening) {
// 通过output调用setSpan方法,改变文本的0下标到最后的下标的大小;
// 最后的参数用来标识在span范围内的文本前后输入新的字符时是否也改变它们的效果;
Log.d("TAG","size里面的内容在这里"+output);
output.setSpan(new AbsoluteSizeSpan(size), 0, output.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}
}
}
回到MainActivity中,下面是我们的调用:
String html = "<font color='red' face='verdana'><size>自定义Html标签</size>普通的大小</font>";
mText2.setText(Html.fromHtml(html,null,new SizeLabel(20)));
效果如下所示:
图5 解析不能识别的tag
可以看出来,对size的解析符合我们的预想。
对上面的综合运行,就可以解析出简单的html页面,图2就是我解析出来的一个简答的html界面。效果还可以吧~~。
TextView的其他效果
图1的跑马灯效果:只需要在xml文件中定义:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_test"
android:ellipsize="marquee"
android:focusableInTouchMode="true"
android:focusable="true"
android:background="#00ff00"
android:textSize="20sp"
android:textColor="#3c44af"
android:textAppearance="?android:attr/textAppearanceLargeInverse"
android:marqueeRepeatLimit="marquee_forever"
android:text="这里实现跑马灯效果,我先输入很多很多的内容,一行不能显示完全。"
android:singleLine="true"
/>
其中 android:ellipsize="marquee"、android:focusable="true"、android:singleLine="true"是实现跑马灯的关键。
图2中多个TextView的跑马灯效果:
对图1的实现效果简单说明下,只有当TextView获取焦点的时候,‘android:focusable="true"’才能出现跑马灯的效果,当是当有多个TextView,用上述方法就行不同了,因为我们无效同时获取多个TExtView的焦点,从而会导致只有一个TextView才能实现跑马灯的效果。想实现多个TextView的跑马灯效果也很简单,只需要重写TextView默认获取到焦点就可以了。
package students.textviewdemo;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.TextView;
/**
* Created by 24540 on 2016/11/9.
*/
public class HorseRaceLamp extends TextView{
public HorseRaceLamp(Context context) {
super(context);
}
public HorseRaceLamp(Context context, AttributeSet attrs) {
super(context, attrs);
}
public HorseRaceLamp(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public HorseRaceLamp(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr);
}
@Override
public boolean isFocused() {
return true;//在这里设置获取焦点,如此便可实现多个TextView的跑马灯效果
}
}
在xml文件中进行引用就可以了:
<students.textviewdemo.HorseRaceLamp
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:singleLine="true"
android:text="这里要实现跑马等效果,所以这里的内容肯定不能太少了,为此我在这里添加了很多没用的内容" />
<students.textviewdemo.HorseRaceLamp
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:paddingTop="10dp"
android:singleLine="true"
android:text="挫折时,要像大树一样,被砍了,还能再长;也要像杂草一样,虽让人践踏,但还能勇敢地活下去" />
很简单把。下面介绍怎么折叠TextView
因为个人感觉这样写还是不够好,所以就不把代码贴上来,简单的说下思路。过两天在琢磨一下,用更好的方式实现。
要实现折叠效果,肯定是需要一个TextView和一个Imageview的。当我们点击ImageView时,对TextView的line进行设置。再次点击还原设置即可实现这样的效果。
---优雅的代码估计应该可以在一周内更新。