俗话说“九层之台,起于垒土”,无论多么美观的UI界面,开始都是先创建容器,然后不断的向容器中添加界面组件,最后才形成一个美丽的UI界面。再好不过的是,Android 给我们提供了大量的 UI 控件,合理地使用这些控件就可以非常轻松地编写出相当不错的界面,下面我们分别挑选几种常用的控件并介绍下它们的使用方法,而对于那些不太常用的,我会以后随用随加。
一、TextView
TextView、EditText、AutoCompleteTextView、MultAutoCompletTextView 、(TextSwitcher) 、(DigitalClock)、ExtractEditText、CheckedTextView、Chronometer 这些都属于文本类的控件,这里面我们首先介绍下 TextView。
TextView 可以说是 Android 中最简单的一个控件了,它直接继承了View,并且它还是 EditText、Button 两个控件的父类,所以它的属性也适用于 EditText 和 Button, 它主要用于在界面上显示一段文本信息,我们前面其实也已经和它打过了一些打交道了,比如之前我们在第一个 Android 工程中看到的 “Hello world” 就是用它实现的!
上栗子:不同的颜色、字体与带有链接的文本显示
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 设置字号为20pt,文本框结尾处绘制图片 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="测试文字1"
android:textSize="20pt"
android:drawableEnd="@drawable/ic_launcher"/>
<!-- 设置中间省略,所有字母大写 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="测试文字2测试文字2测试文字2测试文字2测试文字2测试文字2"
android:ellipsize="middle"
android:textAllCaps="true"/>
<!-- 对邮件、电话增加链接 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="测试文字3"
android:autoLink="email|phone"/>
<!-- 设置文字颜色、大小,并使用阴影 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="测试文字4"
android:shadowColor="#00f"
android:shadowDx="10.0"
android:shadowDy="8.0"
android:shadowRadius="3.0"
android:textColor="#f00"
android:textSize="18pt"/>
<!-- 测试密码框 -->
<TextView android:id="@+id/passwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:password="true"/>
<CheckedTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="可勾选的文本"
android:checkMark="@drawable/ok" />
</LinearLayout>
外面的 LinearLayout 先忽略不看,使用 android:layout_width 指定了控件的宽度,使用 android:layout_height 指定了控件的高度。 Android 中所有的控件都具有这两个属性,可选值有三种 match_parent、 fill_parent 和 wrap_content,其中 match_parent 和 fill_parent 的意义相同,现在官方更加推荐使用 match_parent。
match_parent 表示让当前控件的大小和父布局的大小一样,也就是由父布局来决定当前控件的大小。wrap_content 表示让当前控件的大小能够刚好包含住里面的内容,也就是由控件内容决定当前控件的大小。所以上面的代码就表示让 TextView 的宽度和父布局一样宽,也就是手机屏幕的宽度,让 TextView 的高度足够包含住里面的内容就行。
当然除了使用上述值,你也可以对控件的宽和高指定一个固定的大小,但是这样做有时会在不同手机屏幕的适配方面出现问题。我们通过 android:text 指定了 TextView 中显示的文本内容。由于TextView提供了大量的XML属性,因此我们可以通过其它的属性控制文本的行为,这里先不做介绍,详细的属性稍后给出。
现在运行程序,效果如下:
栗子2:圆角边框、渐变背景的文本显示
默认情况下,TextView 是不带边框的,如果想为它添加边框可以考虑为它设置一个背景带有边框效果的Drawable,这样就实现了带边框的 TextView,也正因如此,我们可以用这样的方法给TextView添加渐变的背景。
- main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 通过android:background指定背景 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="带边框的文本"
android:textSize="25pt"
android:background="@drawable/bg_border"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="圆角边框、渐变背景的文本"
android:textSize="25pt"
android:background="@drawable/bg_border2"/>
</LinearLayout>
- bg_border1.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 设置背景色为透明色 -->
<solid android:color="#0000"/>
<!-- 设置红色边框 -->
<stroke android:width="6px" android:color="#f00" />
</shape>
- bg_border2.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 指定圆角矩形的4个圆角的半径 -->
<corners android:topLeftRadius="20px"
android:topRightRadius="5px"
android:bottomRightRadius="20px"
android:bottomLeftRadius="5px"/>
<!-- 指定边框线条的宽度和颜色 -->
<stroke android:width="4px" android:color="#f0f" />
<!-- 指定使用渐变背景色,使用sweep类型的渐变颜色从红色→绿色→蓝色 -->
<gradient android:startColor="#f00"
android:centerColor="#0f0"
android:endColor="#00f"
android:type="sweep"/>
</shape>
运行效果如下:
下面给出TextView的常用属性:
再次提醒:TextView 的属性同样适用于 EditText 和 Button,故我们讲解 Button 时不再给出重复的属性说明。
(1)文本相关:
- android:text:设置要显示的文本。
- android:textColor:设置文本颜色
- android:textColorHighlight:被选中文字的底色,默认为蓝色
- android:textColorHint:设置提示信息文字的颜色,默认为灰色,与hint一起使用。
- android:textColorLink:文字链接的颜色.
- android:textScaleX:设置文字之间间隔,默认为1.0f。
- android:textSize:设置文字大小,推荐度量单位”sp”,如”15sp”
- android:textStyle:设置字形[bold(粗体) 0, italic(斜体) 1, bolditalic(又粗又斜) 2] 可以设置一个或多个,用“|”隔开
- android:typeface:设置文本字体,必须是以下常量值之一:normal 0, sans 1, serif 2, monospace(等宽字体) 3]
- android:autoLink:设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接,可选值(none/web/email/phone/map/all) 。
- android:linksClickable:设置链接是否点击连接,即使设置了autoLink。
- android:bufferType:指定getText()方式取得的文本类别。选项 editable 类似于StringBuilder可追加字符,也就是说getText后可调用append方法设置文本内容,选项 spannable 则可在给定的字符区域使用样式。
- android:editable:设置是否可编辑。
- android:editorExtras:设置文本的额外的输入数据。
- android:hintText:为空时显示的文字提示信息,可通过textColorHint设置提示信息的颜色。
- android:inputType:设置文本的类型,用于帮助输入法显示合适的键盘类型。在EditView中再详细说明,这里无效果。
(2)宽高位置:
- android:gravity:设置文本位置,如设置成“center”,文本将居中显示。
- android:includeFontPadding:设置文本是否包含顶部和底部额外空白,默认为true。
- android:ems:设置TextView的宽度为N个字符的宽度。这里测试为一个汉字字符宽度 。
- android:height:设置文本区域的高度,支持度量单位:px(像素)/dp/sp/in/mm(毫米) 。
- android:maxHeight:设置文本区域的最大高度 。
- android:minHeight:设置文本区域的最小高度 。
- android:width:设置文本区域的宽度,支持度量单位:px(像素)/dp/sp/in/mm(毫米),与layout_width的区别看这里。
- android:maxWidth:设置文本区域的最大宽度 。
- android:minWidth:设置文本区域的最小宽度。
- android:maxLength:限制显示的文本长度,超出部分不显示。
- android:lines:设置文本的行数,设置两行就显示两行,即使第二行没有数据。
- android:maxLines:设置文本的最大显示行数,与width或者layout_width结合使用,超出部分自动换行,超出行数将不显示。
- android:minLines:设置文本的最小行数,与lines类似。
- android:lineSpacingExtra:设置行间距。
- android:lineSpacingMultiplier:设置行间距的倍数。如”1.2”
(3)输入法相关:
- android:digits:设置允许输入哪些字符。如“1234567890.+-*/% ()” 等。
- android:autoText:如果设置,将自动执行输入值的拼写纠正,在显示输入法并输入的时候起作用。
- android:capitalize:设置英文字母大写类型。此处无效果,需要弹出输入法才能看得到。
- android:inputMethod:为文本指定输入法,需要完全限定名(完整的包名)。例如:com.google.android.inputmethod.pinyin,但是这里报错找不到。
- android:privateImeOptions:设置输入法选项。
(4)图片背景:
- android:drawableBottom:在 text 的下方输出一个 drawable,如图片。如果指定一个颜色的话会把 text 的背景设为该颜色,并且同时和 background 使用时覆盖后者。
- android:drawableLeft:在text的左边输出一个drawable,如图片。
- android:drawableRight:在text的右边输出一个drawable。
- android:drawableTop:在text的正上方输出一个drawable。
- android:drawablePadding:设置text与drawable(图片)的间隔,与drawableLeft、drawableRight、drawableTop、drawableBottom一起使用,可设置为负数,单独使用没有效果。
- android:shadowColor:指定文本阴影的颜色,需要与shadowRadius一起使用
- android:shadowDx:设置阴影横向坐标开始位置。
- android:shadowDy:设置阴影纵向坐标开始位置。
- android:shadowRadius:设置阴影的半径。设置为0.1就变成字体的颜色了,一般设置为3.0的效果比较好。
(5)显示样式:
- android:numeric:如果被设置,该TextView有一个数字输入法。此处无用,设置后唯一效果是TextView有点击效果。
- android:password:以小点”.”显示文本
- android:phoneNumber:设置为电话号码的输入方式。
- android:scrollHorizontally:设置文本超出TextView的宽度的情况下,是否出现横拉条。
- android:ellipsize:设置当文字过长时,该控件该如何显示。有如下值设置:“start”省略号显示在开头;“end”省略号显示在结尾;“middle”省略号显示在中间; “marquee” ——以跑马灯的方式显示(动画横向移动) 。
- android:singleLine:设置单行显示。如果和layout_width一起使用,当文本不能全部显示时,后面用“…”来表示。
- android:textAppearance:设置文字外观。如“?android:attr/textAppearanceLargeInverse”这里引用的是系统自带的一个外观,?表示系统是否有这种外观,否则使用默认的外观。
可设置的值有:
textAppearanceButton / textAppearanceInverse / textAppearanceLarge / textAppearanceLargeInverse / textAppearanceMedium / textAppearanceMediumInverse / textAppearanceSmall / textAppearanceSmallInverse
(6)光标相关:
- android:cursorVisible:设定光标为显示/隐藏,默认为显示。
- android:freezesText:设置保存文本的内容以及光标的位置。
- android:selectAllOnFocus:如果文本是可选择的,让他获取焦点而不是将光标移动为文本的开始位置或者末尾位置。TextView中设置后无效果。
(7)其它:
- android:maxEms:设置TextView的宽度为最长为N个字符的宽度。与ems同时使用时覆盖ems选项。
- android:minEms:设置TextView的宽度为最短为N个字符的宽度。与ems同时使用时覆盖ems选项。
- android:imeOptions:附加功能,设置右下角IME动作与编辑框相关的动作,如actionDone右下角将显示一个“完成”,而不设置默认是一个回车符号。
- android:imeActionId:设置IME动作ID。
- android:imeActionLabel:设置IME动作标签。
- android:marqueeRepeatLimit:在ellipsize指定marquee的情况下,设置重复滚动的次数,当设置为marquee_forever时表示无限次。
感谢优秀的你跋山涉水看到了这里,不如关注下让我们永远在一起!