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. <TextView android:id=”@+id/tv_auto_link_web”
  7.     android:layout_height=”wrap_content”
  8.     android:layout_width=”fill_parent”
  9.     android:autoLink=”web”
  10.     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=”电话 : 18511896990 , 邮件 : 904279436@qq.com , 网址 : 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=”电话 : 18511896990 , 邮件 : 904279436@qq.com , 网址 : 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=”电话 : 18511896990 , 邮件 : 904279436@qq.com , 网址 : 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=”电话 : 18511896990 , 邮件 : 904279436@qq.com , 网址 : 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指定背景颜色,边框颜色,边框宽度,以及边框角度,颜色渐变等效果;

.

 

 

.

 

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

效果图 :

 

  

 

标签