Android UI 设计之 TextView EditText 组件属性方法最详细解析

TextView 相关类的继承结构 : 

-- 常用的组件 : TextView 直接继承View类, 同时是 EditText 和 Button 两组组件类的父类; 

一. TextView详解

1. TextView文本链接相关XML属性方法

(1) 设置单个连接

文本转链接 : 将指定格式的文本转换成可单击的超链接形式;

-- XML属性 : android:autoLink, 该属性有属性值 : none, web, email, phone, map, all;

-- 方法 : setAutoLinkMask(int);

eg : 

[html] view plaincopy

1. <TextView android:id="@+id/tv_auto_link_phone"  
2.     android:layout_height="wrap_content"  
3.     android:layout_width="fill_parent"  
4.     android:autoLink="phone"  
5.     android:text="18511896990 可单击的电话链接"/>  
6.   
7. <TextView android:id="@+id/tv_auto_link_web"  
8.     android:layout_height="wrap_content"  
9.     android:layout_width="fill_parent"  
10.     android:autoLink="web"  
11.     android:text="baidu.com 可单击的网页链接"/>  

效果图 : 

     

(3) 同时设置多个种类的链接

如果一个文本中有多个种类的链接, android:autoLink属性使用"|"分隔, 例如 phone|email|web 等;

如果同时设置所有类型连接转换, 使用 "all" 属性即可;

示例 : 

[html] view plaincopy

1. <!-- 如果一个TextView中有多个种类的链接, autoLink属性使用 " | "分隔即可 -->  
2. ;TextView   
3.  android:layout_height="wrap_content"  
4.  android:layout_width="wrap_content"  
5.  android:text="电话 : [phone] , 邮件 : [e-mail] , 网址 : baidu.com"  
6.  android:autoLink="web|email|phone"/>     

效果图 : 

2. 绘制图像相关XML属性

绘图设置 : XML属性可以指定在TextView文本的 左, 右, 上, 下, 开始, 结尾 处设置图片, 还可以设置文本 与图片之间的间距;

-- 在文本框四周绘制图片XML属性 : 

在文本框左边绘制指定图像 :android:drawableLeft;

在文本框右边绘制指定图像 :android:drawableRight;

在文本框上边绘制指定图像 :android:drawableTop;

在文本框下边绘制指定图像 : android:drawableBottom;

-- 设置图片方法 : setCompoundDrawablesWithIntrinsicBounds(drawable,drawable,drawable,drawable);

设置图片与文本间距 : 相当于图片距离文字的距离, 注意要带上单位, 建议单位是dip;

-- XML属性 :android:drawablePadding;

实例 : 

[html] view plaincopy

1. <!-- 该TextView的四周都有图片, 四个图片距离文字有50dip的距离 -->  
2. <TextView android:id="@+id/tv_adrawable_left_right"  
3.     android:layout_height="wrap_content"  
4.     android:layout_width="wrap_content"  
5.     android:drawableLeft="@android:drawable/sym_action_call"  
6.     android:drawableRight="@android:drawable/sym_action_call"  
7.     android:drawableTop="@android:drawable/sym_action_call"  
8.     android:drawableBottom="@android:drawable/sym_action_call"  
9.     android:drawablePadding="50dip"  
10.     android:text="左右上下有图片"/>  

显示效果图 : 

3. 显示省略

单行设置 : 显示省略的时候, 必须设置文本行数为单行, 才能看出效果,  android:singleLine 可以设置是否单行显示;

省略设置 : 当显示文本超过了TextView长度后处理文本内容的方法; 

-- XML属性 :android.ellipsize; 

-- XML属性值 : 

none :不做任何处理; 

start : 文本开始处截断, 显示省略号;

middle : 文本中间截断, 显示省略号;

end : 文本结尾处截断, 显示省略号;

marquee : 使用marquee滚动动画显示文本;

-- 设置方法 : setEllipsize();

示例 : 

[html] view plaincopy

1. <!-- 设置android:singleLine属性单行, 并设置在结尾处截断 -->  
2. ;TextView   
3.  android:layout_height="wrap_content"  
4.  android:layout_width="wrap_content"  
5.  android:text="电话 : [phone] , 邮件 : [e-mail] , 网址 : baidu.com"  
6.  android:singleLine="true"  
7.  android:ellipsize="end"  
8.  />   

效果图 : 

4. 设置颜色 大小 阴影

 

设置文本颜色 : 

-- XML属性 :android:textColor, 值是颜色代码, 也可以是资源文件中的颜色;

-- 方法 : setTextColor().

设置文本大小 : 

-- XML属性 : android:textSize, 值是float值, 注意带上单位pt;

-- 方法 : setTextSize(float);

设置阴影 : 

-- XML属性 : 

设置阴影颜色 : android:shadowColor;

设置阴影水平方向偏移 : android:shadowDx;

设置阴影垂直方向偏移 : android:shadowDy;

设置阴影模糊程度 : android:shadowRadius;

-- 方法 : setShadowLayer(float, float, float, int);

示例 : 

[html] view plaincopy

1. <TextView   
2.     android:layout_height="wrap_content"  
3.     android:layout_width="wrap_content"  
4.     android:text="电话 : [phone] , 邮件 : [e-mail] , 网址 : baidu.com"  
5.     android:textColor="#f00"  
6.     android:textSize="15pt"  
7.     android:shadowColor="#00f"  
8.     android:shadowDx="10"  
9.     android:shadowDy="8"  
10.     android:shadowRadius="3"  
11.     />   

效果图 : 

5. 显示的文本为密码

设置文本框是一个密码框 : 如果要设置显示的文本是密码的话, 那么显示出来的就是 "." , 不能显示具体的内容;

-- XML属性 :android:password, 如果是密码的话, 设置为true;

-- 方法 :setTransformationMethod(TransformationMethod);

示例 : 

[html] view plaincopy

1. <TextView   
2.     android:layout_height="wrap_content"  
3.     android:layout_width="wrap_content"  
4.     android:text="电话 : [phone] , 邮件 : [e-mail] , 网址 : baidu.com"  
5.     android:password="true"  
6.     />     

效果图 : 

6. 可勾选的文本

CheckedTextView介绍 : TextView 派生出一个 CheckedTextView , CheckedTextView 增加了一个checked 状态, 可以通过调用setChecked(boolean) 方法设置checked状态, 使用isChecked()方法获取checked状态, 还可以通过setCheckMarkDrawable()方法 设置它的勾选图标;

--XML属性 :android:checkMark, 属性值是一个drawable图片;单选可以设置成 "?android:attr/listChoiceIndicatorSingle" 属性,多选可以设置成 "?android:attr/listChoiceIndicatorMultiple" 属性;

示例 : 

[html] view plaincopy

1. <CheckedTextView   
2.     android:layout_height="wrap_content"  
3.     android:layout_width="wrap_content"  
4.     android:text="你是猴子请来的救兵吗"  
5.     android:checkMark="@drawable/ok"  
6.     />    

效果图 : 

7. 设置TextView文本边框 背景渐变

使用背景 : TextView 是没有边框的, 如果要加上边框, 可以通过设置TextView的背景添加边框;

自定义背景: 使用XML文件定义一个drawable图像, 可以为该Drawable指定背景颜色,边框颜色,边框宽度,以及边框角度,颜色渐变等效果;

.

代码示例 : 

布局文件代码 : 

[html] view plaincopy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"   
5.     android:orientation="vertical">  
6.   
7.     <TextView   
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:text="喜当爹"  
11.         android:textSize="24dp"  
12.         android:background="@drawable/background_frame"/>  
13.       
14.     <TextView   
15.         android:layout_width="wrap_content"  
16.         android:layout_height="wrap_content"  
17.         android:text="背景颜色,边框颜色,边框宽度,以及边框角度,颜色渐变等效果"  
18.         android:textSize="24dp"  
19.         android:background="@drawable/background_frame2"/>  
20.   
21. </LinearLayout>  

资源文件代码 : 

background_frame.xml : 

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
3.       
4.     <!-- 设置背景为透明色 -->  
5.     <solid android:color="#0000" />  
6.       
7.     <!-- 设置边框的厚度为4像素, 设置边框颜色 -->  
8.     <stroke android:width="10px"  
9.         android:color="#01DF01"/>  
10.   
11. </shape>  

background_frame2.xml : 

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:shape="rectangle">  
4.     <!--  
5.         android:shape="rectangle" 指定该图形的类型为矩形 
6.      -->  
7.        
8.      <!-- 设置该矩形的四个角的角度弧度 -->  
9.      <corners   
10.          android:topLeftRadius="20px"  
11.          android:topRightRadius="5px"  
12.          android:bottomRightRadius="20px"  
13.          android:bottomLeftRadius="5px"/>  
14.        
15.      <!-- 设置边框的宽度和颜色 -->  
16.      <stroke   
17.          android:width="10px"  
18.          android:color="#F0F"/>  
19.        
20.      <!-- 设置背景颜色渐变 从 红色  -> 绿色 -> 蓝色, 渐变的类型为sweep渐变 -->  
21.      <gradient   
22.          android:startColor="#f00"  
23.          android:centerColor="#0f0"  
24.          android:endColor="#00f"  
25.          android:type="sweep"/>  
26.       
27.   
28. </shape>  

效果图 : 

8. 分析Android:layout_width 与 android:width 与 android:minWidth区别及共存策略

.

策略 : 

-- 当android:layout_width为fill_parent的时候, android:width 与 android:minWidth 设置不起作用;

-- 当android:layout_width为warp_content的时候,android:width 与 android:minWidth 单独设置的时候都起作用, 两者一起设置android:width起作用;

--当android:layout_width为具体数值的时候, android:width 与 android:minWidth 都不起作用;

得出结论 : 

三者优先级顺序 : 

android:layout_width > android:width > android:minWidth ; 

源码 : 

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.       
7.     <TextView   
8.         android:layout_height="wrap_content"  
9.         android:layout_width="fill_parent"  
10.         android:background="#DF8326"  
11.         android:text="宽度填充全部"/>  
12.     <TextView android:layout_width="wrap_content" android:layout_height="10px"/>  
13.       
14.     <TextView   
15.         android:layout_height="wrap_content"  
16.         android:layout_width="fill_parent"  
17.         android:width="100dp"  
18.         android:background="#DF8326"  
19.         android:text="width不起作用"/>  
20.     <TextView android:layout_width="wrap_content" android:layout_height="10px"/>  
21.       
22.     <TextView   
23.         android:layout_height="wrap_content"  
24.         android:layout_width="fill_parent"  
25.         android:minWidth="50dp"  
26.         android:background="#DF8326"  
27.         android:text="minWidth不起作用"/>  
28.     <TextView android:layout_width="wrap_content" android:layout_height="10px"/>  
29.       
30.     <TextView   
31.         android:layout_height="wrap_content"  
32.         android:layout_width="fill_parent"  
33.         android:width="50dp"  
34.         android:minWidth="50dp"  
35.         android:background="#DF8326"  
36.         android:text="都不起作用"/>  
37.     <TextView android:layout_width="wrap_content" android:layout_height="40px"/>  
38.       
39.       
40.     <TextView   
41.         android:layout_height="wrap_content"  
42.         android:layout_width="wrap_content"  
43.         android:background="#DF8326"  
44.         android:text="宽度包裹全部"/>  
45.     <TextView android:layout_width="wrap_content" android:layout_height="10px"/>  
46.       
47.     <TextView   
48.         android:layout_height="wrap_content"  
49.         android:layout_width="wrap_content"  
50.         android:width="150dp"  
51.         android:background="#DF8326"  
52.         android:text="width起作用"/>  
53.     <TextView android:layout_width="wrap_content" android:layout_height="10px"/>  
54.       
55.     <TextView   
56.         android:layout_height="wrap_content"  
57.         android:layout_width="wrap_content"  
58.         android:minWidth="120dp"  
59.         android:background="#DF8326"  
60.         android:text="minWidth起作用"/>  
61.     <TextView android:layout_width="wrap_content" android:layout_height="10px"/>  
62.   
63.     <TextView   
64.         android:layout_height="wrap_content"  
65.         android:layout_width="wrap_content"  
66.         android:width="150dp"  
67.         android:minWidth="120dp"  
68.         android:background="#DF8326"  
69.         android:text="都有的时候width起作用"/>  
70.     <TextView android:layout_width="wrap_content" android:layout_height="40px"/>  
71.       
72.       
73.     <TextView   
74.         android:layout_height="wrap_content"  
75.         android:layout_width="200dp"  
76.         android:background="#DF8326"  
77.         android:text="layout_width为200dp"/>  
78.     <TextView android:layout_width="wrap_content" android:layout_height="10px"/>  
79.       
80.     <TextView   
81.         android:layout_height="wrap_content"  
82.         android:layout_width="200dp"  
83.         android:width="150dp"  
84.         android:background="#DF8326"  
85.         android:text="layout_width为200dp, width150dp"/>  
86.     <TextView android:layout_width="wrap_content" android:layout_height="10px"/>  
87.       
88.     <TextView   
89.         android:layout_height="wrap_content"  
90.         android:layout_width="200dp"  
91.         android:minWidth="120dp"  
92.         android:background="#DF8326"  
93.         android:text="layout_width为200dp,minWidth100dp"/>  
94.     <TextView android:layout_width="wrap_content" android:layout_height="10px"/>  
95.       
96.     <TextView   
97.         android:layout_height="wrap_content"  
98.         android:layout_width="200dp"  
99.         android:width="150dp"  
100.         android:minWidth="120dp"  
101.         android:background="#DF8326"  
102.         android:text="都有的时候都不起作用"/>  
103.     <TextView android:layout_width="wrap_content" android:layout_height="10px"/>  
104.       
105. </LinearLayout>  

效果图 : 

9. 显示HTML效果页面

使用Html.fromHtml("")方法, 参数是html界面内容, 可以使用html标签设置文本效果;

例如可以使用Html.fromHtml("<font size='20' color='red'>变大, 红色</font>");

案例 : 

[java] view plaincopy

1. textView.setText(Html.fromHtml("<font color='red'><big>变大, 红色 </big></font>" +  
2.         " 正常  " +  
3.         "<font color='green'><small>  变小, 绿色</small></font> "));  

效果 : 

总结 在Android中显示HTML页面的方法 :

-- 浏览器访问 : 

[java] view plaincopy

1. Uri uri = Uri.parse("http://blog.csdn.net/shulianghan");  
2. Intent intent = new Intent(Intent.ACTION_VIEW, uri);  
3. startActivity(intent);  

-- 使用TextView显示 : 

[java] view plaincopy

1. TextView tv_1 = (TextView)findViewById(R.id.tv_1);  
2. tv_1.setText(Html.fromHtml("<font size='20' color='#ff0000'>显示网页信息</font>"));  

-- 使用WebView组件显示 : 

[java] view plaincopy

1. WebView webview = (WebView) findViewById(R.id.wv);  
2. webview.getSettings().setJavaScriptEnabled(true);  
3. webview.loadUrl("http://blog.csdn.net/shulianghan");    

10. Spannable设置TextView特效

a. 创建Spannable对象 : 使用new SpannableString("")创建该对象, 传入想要添加效果的字符串;

b. 为指定范围的字符串添加效果 : span.setSpan(new AbsoluteSizeSpan(58), 1, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE), 为下标从 1 ~ 5的字符串添加 字体大小为58像素的效果;

c. 将Spannable对象设置给TextView : textView.setText(span);

实例 : 

源码 : 

[java] view plaincopy

1. TextView textView = (TextView) findViewById(R.id.tv_1);  
2. Spannable span = new SpannableString("使用Spannable设置字体效果");    
3. span.setSpan(new AbsoluteSizeSpan(58), 1, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
4. span.setSpan(new ForegroundColorSpan(Color.RED), 1, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
5. span.setSpan(new BackgroundColorSpan(Color.YELLOW), 1, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
6. textView.setText(span);  

效果图 : 

 

.

作者 :万境绝尘 

转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/18964835

.

二. EditText属性详解

共享属性 : EditText 与 TextView共享大部分XML属性, 但是EditText可以接受用户输入;

类型定义属性 : EditText最重要的属性是android:inputType, 该属性用来定义输入的数据类型; 

自动完成功能输入组件 :AutoCompletetextView, 该组件是带自动完成功能的组件, 通常与Adapter一起使用;

全屏输入法 :ExtractEditText, EditText的底层服务类, 负责提供全屏输入法;

案例 : 

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"   
5.     android:stretchColumns="1">  
6.       
7.     <!--   
8.         android:stretchColumns 属性表示 第一列允许被拉伸, 注意索引从0开始  
9.         android:hint 属性表示Edittext没有输入之前显示的内容  
10.         android:selectAllOnFocus 如果文本框的内容可选择, 当该EditText获取焦点时是否全部选中内容  
11.      -->  
12.       
13.     <TableRow >  
14.         <TextView   
15.             android:layout_width="fill_parent"  
16.             android:layout_height="wrap_content"   
17.             android:text="用户名 : "  
18.             android:textSize="16sp"  
19.             />  
20.         <EditText   
21.             android:layout_width="fill_parent"  
22.             android:layout_height="wrap_content"  
23.             android:hint="请填写登陆账号"  
24.             android:selectAllOnFocus="true"/>      
25.     </TableRow>  
26.       
27.     <!--  
28.         android:inputType = "numberPassword" 属性设置该输入框输入密码, 输入进去的值都显示 点号 
29.      -->  
30.     <TableRow >  
31.         <TextView   
32.             android:layout_width="fill_parent"  
33.             android:layout_height="wrap_content"  
34.             android:text="密码 : "  
35.             android:textSize="16sp"/>  
36.         <EditText   
37.             android:layout_width="fill_parent"  
38.             android:layout_height="wrap_content"  
39.             android:inputType="textPassword"/>  
40.     </TableRow>  
41.       
42.     <!--  
43.         android:inputType = "number" 属性设置数字 
44.      -->  
45.     <TableRow >  
46.         <TextView   
47.             android:layout_width="fill_parent"  
48.             android:layout_height="wrap_content"  
49.             android:text="年龄 : "  
50.             android:textSize="16sp"/>  
51.         <EditText   
52.             android:layout_width="fill_parent"  
53.             android:layout_height="wrap_content"  
54.             android:inputType="number"/>  
55.     </TableRow>  
56.       
57.     <!--  
58.         android:inputType = "data" 属性设置日期 
59.      -->  
60.     <TableRow >  
61.         <TextView   
62.             android:layout_width="fill_parent"  
63.             android:layout_height="wrap_content"  
64.             android:text="生日 : "  
65.             android:textSize="16sp"/>  
66.         <EditText   
67.             android:layout_width="fill_parent"  
68.             android:layout_height="wrap_content"  
69.             android:inputType="date"/>  
70.     </TableRow>  
71.       
72.     <!--  
73.         android:inputType = ""phone"" 属性设置电话 
74.      -->  
75.     <TableRow >  
76.         <TextView   
77.             android:layout_width="fill_parent"  
78.             android:layout_height="wrap_content"  
79.             android:text="电话 : "  
80.             android:textSize="16sp"/>  
81.         <EditText   
82.             android:layout_width="fill_parent"  
83.             android:layout_height="wrap_content"  
84.             android:hint="请输入电话号码"  
85.             android:selectAllOnFocus="true"  
86.             android:inputType="phone"/>  
87.     </TableRow>  
88.   
89. </TableLayout>  

效果图 :