Android UI 控件之TextView

TextView(文本框)，用于显示文本的一个控件

基本属性

android:id 设置该控件的唯一标识；android:layout_width 设置控件的宽度，可设置warp_content（自适应宽度）match_parent or fill_parent(充满父组件)或者宽度值（数值加宽度单位）；android:background 设置控件的背景；android:layout_weight 权重，控件占父控件剩余空间的比例大小，可设置0，1，2...，未设置则默认为0；android:gravity 设置元素在该控件里的显示位置，top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical等，多个可用|分割；android:layout_gravity 设置控件在父控件中的显示位置，top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical等，多个可用|分割。android:layout_margin 设置控件距离上下左右的距离；android:layout_marginTop 设置控件距离上面的距离；android:layout_marginLeft 设置控件距离左边距离；android:layout_marginRight 设置控件距离右边距离；android:layout_marginBottom 设置控件距离下面距离；android:layout_marginStart 设置控件距离开始位置的距离；android:layout_marginEnd 设置控件距离结束位置的距离；android:padding 设置控件上下左右的内边距；android:paddingLeft 设置控件距离左边的内边距；android:paddingTop 设置控件距离上面的内边距；android:paddingRight 设置控件距离右边的内边距；android:paddingBottom 设置控件距离底部的内边距；android:paddingStart 设置控件距离开始位置的内边距；android:paddingEnd 设置控件距离结束位置的内边距；android:maxHeight 设置控件的最大高度；android:maxWidth 设置控件的最大宽度；android:minHeight 设置控件的最小高度；android:minWidth 设置控件的最小宽度；android:drawablePadding 设置控件中图片与文字之间的空隙；android:drawableLeft 设置控件图片显示在文字左边；android:drawableRight 设置控件图片显示在文字右边；android:drawableTop 这是控件图片显示在文字上面；android:drawableBottom 设置控件图片显示在文字下面；android:drawableStart 设置控件图片显示在文字的开始处；android:drawableEnd 设置控件的图片显示在文字的结尾处；android:text 设置控件显示的文字；android:textColor 设置控件显示的文字颜色；android:textSize 设置控件显示的文字大小,推荐使用sp；android:textAllCaps 设置控件文本全部大写。可能的值是“true”或“false”；android:textStyle 设置字形[bold(粗体) 0, italic(斜体) 1,bolditalic(又粗又斜) 2] 可以设置一个或多个，用“|”隔开；android:typeface 设置文本字体，必须是以下常量值之一：normal 0, sans 1, serif 2； android:textAppearance 设置文字外观。如“?android:attr/textAppearanceLargeInverse  ”这里引用的是系统自带的一个外观，？表示系统是否有这种外观，否则使用默认的外观。可设置的值如下：textAppearanceButton/textAppearanceInverse/textAppearanceLarge/textAppearanceLargeInverse/textAppearanceMedium/textAppearanceMediumInverse/textAppearanceSmall/textAppearanceSmallInverse；  android:textColorHighlight 设置控件被选中文字的底色，默认为蓝色；android:textColorHint 设置提示信息文字的颜色，默认为灰色。与hint一起使用；android:textColorLink 设置文字链接的颜色；android:textScaleX 设置文字之间间隔，默认为1.0f；android:textIsSelectable 表示可被选择的非可编辑的文本的内容。可能的值是“true”或“false”。；android:textSelectHandle; 设置系统文本选中中部时出现的复制箭头；android:textSelectHandleLeft; 设置系统文本选中左边时出现的复制箭头；android:textSelectHandleRight; 设置系统文本选中右边时出现的复制箭头；android:maxLength 设置文本的最大长度；android:maxEms 设置最大系统兼容；android:maxLines 设置最大文本行数；android:minEms  设置最小系统兼容；android:minLines  设置最小文本行数；android:shadowColor 设置阴影颜色；android:shadowDx 设置阴影水平偏移；android:shadowDy 设置阴影垂直偏移；android:shadowRadius 设置阴影半径；android:singleLine 设置是否单行显示；android:lines 设置多行显示；android:lineSpacingExtra 设置额外的文字间距；android:lineSpacingMultiplier 设置额外的文字间距，乘数；android:autoLink 设置识别链接类型,当文字中出现了URL，E-Mail，电话号码，地图的时候，我们可以通过设置autoLink属性；当我们点击文字中对应部分的文字，即可跳转至某默认APP，比如一串号码，点击后跳转至拨号界面！可设置all,web,email,phone,map,none；android:autoText 设置是否自动检测错误；android:bufferType 决定getText()返回的类型；android:capitalize 设置指定使用类型，指定该TextView中有一个文本输入法会自动利用什么类型的用户。不要自动大写任何东西 none，大写每句的第一个字 sentences，大写每个单词的第一个字母 words，大写每一个字符 characters；android:digits 设置文字输入规则；android:cursorVisible 设置光标可见（默认值）或不可见。默认为false；android:editable 如果设置为true，指定TextView的一个输入法；android:fontFamily 设置字体系列（由字符串命名）的文本；android:gravity 指定如何排列由视图的x和/或y轴的文本时，该文本比视图小；android:hint 设置文本空白时的提示语；android:inputType 数据的类型被放置在一个文本字段。手机，日期，时间，号码，密码等；android:password 字段的字符是否显示为密码的点，而不是它们本身。可能的值是“true”或“false”；android:phoneNumber 如果设置，则指定TextView具有一个电话号码的输入法。可能的值是“true”或“false”；android:marqueeRepeatLimit 设置表示滚动回数，marquee_forever表示一直滚动；android:ellipsize 设置文字超出范围显示方式，start省略号在开、middle省略号在中间、end省略号在结尾、marquee跑马灯显示；focusableInTouchMode="true"；android:focusable="true" 要显示该跑马灯，view必须要获得焦点，只有在取得焦点的情况下跑马灯才会显示；

一些属性讲解

layout_weight

下面给出设置layout_weight时控件宽度的计算：
如下代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:orientation="horizontal" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="1"        android:textColor="＠android:color/white"        android:layout_weight="1"        android:gravity="center"        android:background="#FF00FF"/>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="2"        android:gravity="center"        android:background="#00FF00"        android:textColor="＠android:color/white"        android:layout_weight="2" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="3"        android:gravity="center"        android:background="#0000FF"        android:textColor="＠android:color/white"        android:layout_weight="3" /></LinearLayout>

三个文本框的都是layout_width=”wrap_content”时,得到以下效果：

    系统先给3个TextView分配他们的宽度值 wrap_content（宽度足以包含他们的内容1,2,3即可），然后会把剩下来的屏幕空间按照1:2:3的比列分配给3个textview，所以就出现了上面的图像。
    而当layout_width=”match_parent”时，如果分别给三个TextView设置他们的Layout_weight为1、2、2的话即代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:orientation="horizontal" >    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="1"        android:textColor="＠android:color/white"        android:layout_weight="1"        android:gravity="center"        android:background="#FF00FF"/>    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="2"        android:gravity="center"        android:background="#00FF00"        android:textColor="＠android:color/white"        android:layout_weight="2" />    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="3"        android:gravity="center"        android:background="#0000FF"        android:textColor="＠android:color/white"        android:layout_weight="2" /></LinearLayout>

则会出现如下效果：

    系统先给3个textview分配他们所要的宽度match_parent，也就是说每一都是填满他的父控件，这里就是屏幕的宽度,那么这时候的剩余空间=1个parent_width-3个parent_width=-2个parent_width (parent_width指的是屏幕宽度 )
    那么第一个TextView的实际所占宽度应该=match_parent的宽度,即parent_width + 他所占剩余空间的权重比列1/5 * 剩余空间大小（-2 parent_width）=3/5parent_width
    同理第二个TextView的实际所占宽度=parent_width + 2/5*(-2parent_width)=1/5parent_width;
    第三个TextView的实际所占宽度=parent_width + 2/5*(-2parent_width)=1/5parent_width；所以就是3:1:1的比列显示了。

paddingStart与paddingEnd

根据左右对齐方式来起作用的，左对齐时, paddingStart 对应 paddingLeft, paddingEnd 对应 paddingRight右对齐时, 正好相反 。

gravity与layout_gravity

gravity 设置控件里面的元素显示的位置，可设top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical等，多个可用|分割；
layout_gravity 设置控件在父控件的显示位置，top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical等，多个可用|分割。
以下为gravity与layout_gravity的效果：

TextView 中设置gravity,这TextView中文字位置显示为gravity设置的值：<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:orientation="horizontal" >    <TextView        android:layout_width="200dp"        android:layout_height="wrap_content"        android:text="this is word."        android:background="#FF00FF"        android:gravity="center" /></LinearLayout>

效果图如下：

TextView 中设置layout_gravity,TextView在父控件中显示的位置如下：<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="this is word."        android:background="#FF00FF"        android:layout_gravity="center"/></LinearLayout>

效果图如下：

实际例子

带边框的TextView

编写一个ShapeDrawable资源文件，首先在drawable目录下新建一个xml文件，然后写入如下代码：（demo.xml)<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <!-- 设置背景颜色色 -->    <solid android:color="#FFFFFF" />    <!-- 设置边框颜色与边框宽度 -->    <stroke        android:width="2dp"        android:color="#51A8F2" />    <!-- 设置四个圆角的半径 如果四个角圆角半径一样可以直接设置radius="10dp"-->    <corners        android:bottomLeftRadius="10dp"        android:bottomRightRadius="10dp"        android:topLeftRadius="10dp"        android:topRightRadius="10dp" />    <!-- 设置边距-->    <padding        android:bottom="5dp"        android:left="5dp"        android:right="5dp"        android:top="5dp" /></shape>然后在TextView中设置background为上面的ShapeDrawable资源文件，如下：<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <TextView        android:layout_width="200dp"        android:layout_height="50dp"        android:text="this is word."        android:gravity="center"        android:background="@drawable/demo"        android:layout_gravity="center"/></LinearLayout>

效果图如下：

ShapeDrawble 资源文件的节点和属性介绍： <solid android:color = "xxx"> 这个是设置背景颜色的<stroke android:width = "xdp" android:color="xxx"> 这个是设置边框的粗细,以及边框颜色的<padding androidLbottom = "xdp"> 这个是设置边距的<corners android:topLeftRadius="10dp"> 这个是设置圆角的<gradient> 这个是设置渐变色的,可选属性有: startColor:起始颜色 endColor:结束颜色 centerColor:中间颜色 angle:方向角度,等于0时,从左到右,然后逆时针方向转,当angle = 90度时从下往上 type:设置渐变的类型<size android:height="100dp" android:width="100dp"></size>设置ShapeDrawable的大小

带图片的TextView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:background="#FFFFFF">    <TextView    android:id="@+id/textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:gravity="center"        android:drawableTop="@mipmap/loading_more_earth0"        android:drawableLeft="@mipmap/loading_more_earth2"        android:drawableRight="@mipmap/loading_more_earth4"        android:drawableBottom="@mipmap/loading_more_earth6"        android:drawablePadding="10dp"        android:text="带图片的TextView" /></LinearLayout>

显示效果图如下：

在xml中我们无法设置图片的大小，如果想设置图片的大小，必须通过Java代码实现，如下：TextView textView = (TextView) findViewById(R.id.textView);Drawable[] drawable = textView.getCompoundDrawables();// 数组下表0~3,依次是:左上右下  drawable[1].setBounds(100, 0, 200, 200);textView.setCompoundDrawables(drawable[0],drawable[1],drawable[2],drawable[3]); 

代码解析：

• Drawable[] drawable = textView.getCompoundDrawables( ); 获得四个不同方向上的图片资源,数组元素依次是:左上右下的图片
• drawable[1].setBounds(100, 0, 200, 200); 接着获得资源后,可以调用setBounds设置左上右下坐标点,比如这里设置了代表的是: 长是:从离文字最左边开始100dp处到200dp处 宽是:从文字上方0dp处往上延伸200dp!
• textView.setCompoundDrawables(drawable[0], drawable[1], drawable[2], drawable[3]);为TextView重新设置drawable数组!没有图片可以用null代替!

显示Html

除了显示普通文本外，TextView还预定义了一些类似于HTML的标签，通过这些标签，我们可以使 TextView显示不同的字体颜色，大小，字体，甚至是显示图片，或者链接等！我们只要使用HTML中的一些 标签，加上android.text.HTML类的支持，即可完成上述功能！

当然，并不是支持所有的标签，常用的有下述这些：

<font>：设置颜色和字体。<big>：设置字体大号<small>：设置字体小号<i><b>：斜体粗体<a>：连接网址<img>：图片

    如果直接setText的话是没作用的，我们需要调用Html.fromHtml()方法将字符串转换为CharSequence接口， 然后再进行设置，如果我们需要相应设置，需要为TextView进行设置，调用下述方法：setMovementMethod(LinkMovementMethod.getInstance())

TextView textview = (TextView)findViewById(R.id.tv);String s = "<font color='blue'><b>百度一下，你就知道~：</b></font><br>";s += "<a href = 'http://www.baidu.com'>百度</a>";textview.setText(Html.fromHtml(s));textview.setMovementMethod(LinkMovementMethod.getInstance());

SpannableString&SpannableStringBuilder定制文本

SpannableString、SpannableStringBuilder与String的关系

首先SpannableString、SpannableStringBuilder基本上与String差不多，也是用来存储字符串，但它们俩的特殊就在于有一个SetSpan（）函数，能给这些存储的String添加各种格式或者称样式（Span），将原来的String以不同的样式显示出来，比如在原来String上加下划线、加背景色、改变字体颜色、用图片把指定的文字给替换掉，等等。所以，总而言之，SpannableString、SpannableStringBuilder与String一样， 首先也是传字符串，但SpannableString、SpannableStringBuilder可以对这些字符串添加额外的样式信息，但String则不行。

注意：如果这些额外信息能被所用的方式支持，比如将SpannableString传给TextView；也有对这些额外信息不支持的，比如Canvas绘制文字，对于不支持的情况，SpannableString和SpannableStringBuilder就是退化为String类型，直接显示原来的String字符串，而不会再显示这些附加的额外信息。

SpannableString与SpannableStringBuilder区别

它们的区别在于 SpannableString像一个String一样，构造对象的时候传入一个String，之后再无法更改String的内容，也无法拼接多个 SpannableString；而SpannableStringBuilder则更像是StringBuilder，它可以通过其append()方法来拼接多个String。

//使用SpannableString，必须一次传入，构造完成  SpannableString spannableString = new SpannableString("hyn_独行者");  //使用SpannableStringBuilder,可以使用append()再添加  SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder();  spannableStringBuilder.append("hyn_独行者");  spannableStringBuilder.append("就爱");  spannableStringBuilder.append("独行");  

可供我们使用的API

• BackgroundColorSpan 背景色
• ClickableSpan 文本可点击，有点击事件
• ForegroundColorSpan 文本颜色（前景色）
• MaskFilterSpan 修饰效果，如模糊(BlurMaskFilter)、浮雕(EmbossMaskFilter
• MetricAffectingSpan 父类，一般不用
• RasterizerSpan 光栅效果
• StrikethroughSpan 删除线（中划线）
• SuggestionSpan 相当于占位符
• UnderlineSpan 下划线
• AbsoluteSizeSpan 绝对大小（文本字体）
• DynamicDrawableSpan 设置图片，基于文本基线或底部对齐。
• ImageSpan 图片
• RelativeSizeSpan 相对大小（文本字体）
• ReplacementSpan 父类，一般不用
• ScaleXSpan 基于x轴缩放
• StyleSpan 字体样式：粗体、斜体等
• SubscriptSpan 下标（数学公式会用到）
• SuperscriptSpan 上标（数学公式会用到）
• TextAppearanceSpan 文本外貌（包括字体、大小、样式和颜色）
• TypefaceSpan 文本字体
• URLSpan 文本超链接

使用示例

SpannableString span = new SpannableString("红色打电话斜体删除线绿色下划线图片:.");//1.设置背景色,setSpan时需要指定的flag,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE(前后都不包括)span.setSpan(new ForegroundColorSpan(Color.RED), 0, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);//2.用超链接标记文本span.setSpan(new URLSpan("tel:[phone]"), 2, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);//3.用样式标记文本（斜体）span.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), 5, 7, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);//4.用删除线标记文本span.setSpan(new StrikethroughSpan(), 7, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);//5.用下划线标记文本span.setSpan(new UnderlineSpan(), 10, 16, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);//6.用颜色标记span.setSpan(new ForegroundColorSpan(Color.GREEN), 10, 13,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);//7.获取Drawable资源Drawable d = getResources().getDrawable(R.drawable.icon);d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());//8.创建ImageSpan,然后用ImageSpan来替换文本ImageSpan imgspan = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);span.setSpan(imgspan, 18, 19, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);