Android界面编程之三 第二组UI组件：TextView及其子类

2.3.1 TextView与EditText的功能和用法

TextView直接继承了View，它还是EditText、Button两个UI组件类的父类。

TextView的作用就是在界面上显示文本

它还派生了一个CheckedTextView，该子类增加了一个checked状态，通过setChecked(boolean)和isChecked()来改变、访问组件的checked状态，该组件还可通过setCheckMarkDrawable()方法来设置它的勾选图标

TextView还派生了Button类

android:autoLink	是否符合指定格式的文本转换为可单机的超链接形式
android:autoText	控制是否可将URL、E-mail地址等连接自动转换为可单击的链接
android:capitalize	控制是否可将用户输入的文本转换为大写字母，支持如下属性： none;sentences;words;characters(不转换；句首；词首；每个)
android:cursorVisible	设置该文本框的光标是否可见
android:digits	若设为true，则对应一个数字输入方法，并只接受合法字符
android:drawableBottom	在文本框文本的底端绘制图像
android:drawableEnd
android:drawableLeft
android:drawableRight
android:drawablePadding	设置文本框与图形之间的间距
android:drawableStart
android:drawableTop
android:editable	是否允许编辑
android:ellipsize	设置当文本超过TextView的长度时如何处理文本内容，支持的属性值有： none start ：开始处截断 middle end marquee：使用marquee滚动显示文本
android:ems	设置该组件宽度，以em为单位
android:fontFamily	字体
android:height	高度
android:hint	内容为空时，文本框内默认显示的提示文本
android:gravity	对齐方式
android:imeActionId	当该文本框关联输入法时，为输入法提供EditorInfo.actionId值
android:imeActionLabel
android:imeOptions	关联输入法时，为输入法指定额外的选项
android:includeFontPadding	是否为字体保留足够的空间，默认为true
android:inputMethod	为文本框指定特定输入法，该属性值为输入法的全限定类名
android:inputType	指定该文本框的类型。支持大量属性值，不同属性值用于指定特定的输入框
android:lineSpacingExtra	控制两行文本之间的额外间距。与android:lineSpacingMultiplier属性结合使用
android:lineSpacingMultiplier	控制两行文本之间的额外间距。每行文本为高度*该属性值+android:lineSpacingMultiplier属性值
android:lines	默认占几行
android:linksClickable	控制URL、E-mail等链接是否可点击
android:marqueeRepeatLimit	设置marquee动画重复次数
android:maxEms	最大宽度，以em为单位
android:maxHeight	最大宽度，以pixel为单位
android:maxLength	最大字符长度
android:maxLines	最多占几行
android:maxWidth	（pixel）
android:minEms	最小宽度（em）
android:minHeight	(pixel)
android:minLines	最少占几行
android:minWidth	最小宽度（pixel）
android:numeric	设置关联的数值输入法，支持如下属性： integer；signed；decimal
android:password	设置是一个密码框（以点代替字符）
android:phoneNumber	值接受电话号码
android:privateImeOptions
android:scrollHorizontally	不够显示时是否允许滚动显示
android:selectAllOnFocus	如果文本框内容可选择，设置是否当它获得焦点时自动选中所有文本
android:shadowColor	阴影的颜色
android:shadowDx	阴影在水平方向的偏移
android:shadowDy
android:shadowRadius	阴影模糊程度，该值越大阴影越模糊
android:singleLine	是否为单行模式，设置为true，文本框不会换行
android:text
android:textAllCaps
android:textAppearance
android:textColor
android:textColorHighlight	被选中时的颜色
android:textColorHint	提示文本颜色
android:textColorLink
android:textIsSelectable	不能编辑时，文字是否可以被选中
android:textScaleX	水平方向上的缩放因子
android:textSize
android:textStyle
android:textface
android:width	文本框宽度（pixel）

TextView测试实例

xml代码

< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    android:orientation = "vertical"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    >
   
    < TextView
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "@string/hello"
android:textSize = "20pt"
android:drawableEnd = "@drawable/ic_launcher"
    />
    < TextView
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:singleLine = "true"
android:text = "@string/long_hello"
android:ellipsize = "middle"
android:textAllCaps = "true"
    />
    < TextView
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:singleLine = "true"
android:text = "@string/multi_contact"
android:autoLink = "email|phone"
    />
    < TextView
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "@string/test"
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 = "fill_parent"
android:layout_height = "wrap_content"
android:text = "@string/password_hint"
android:password = "true"
    />
    < CheckedTextView
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:text = "可勾选的文本"
android:checkMark = "@drawable/ok"

    />

</ LinearLayout >

示例2：圆角、边框的TextView

xml代码：

    < TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:text = "带边框的文本"
        android:textSize = "24pt"
        android:background = "@drawable/bg_border"
        />
    < TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:text = "圆角边框、渐变背景的文本"
        android:textSize = "24pt"
        android:background = "@drawable/bg_border2"

        />

bg_border.xml代码：

< shape xmlns:android = "http://schemas.android.com/apk/res/android" >
    < solid android:color = "#0000" />
    < stroke android:width = "4px"
        android:color = "#f00" />

    </shape>

bg_border2.xkl代码：

< shape xmlns:android = "http://schemas.android.com/apk/res/android"
    android:shape = "rectangle" >
    < corners android:topLeftRadius = "20px"
        android:topRightRadius = "5px"
        android:bottomLeftRadius = "5px"
        android:bottomRightRadius = "20px"
        />
    < stroke android:width = "4px"
        android:color = "#f0f" />
    < gradient android:startColor = "#f00"
        android:centerColor = "#0f0"
        android:endColor = "#00f"
        android:type = "sweep"
        />
   

</ shape >

---

2.3.2 EditText的功能与用法

EditText与TextView公用了绝大部分XML属性和方法，EditText的不同在于，其可接受输入

EditText最重要的属性是inputType，该属性随着Android的升级而不断得到丰富

EditText还派生了如下两个子类：

AutoCompleteTextView:有自动完成功能的EditText，通常与Adapter结合使用

ExtractEditText：并非UI组件，而是EditText组件的底层服务类，负责提供全屏输入法支持

示例：用户友好的输入界面

main.xml代码如下：

< TableLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    android:orientation = "vertical"
    android:layout_width = "fill_parent"
    android:layout_height = "fill_parent"
    android:stretchColumns = "1"
     >
< TableRow >
    < TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:text = "User name"
        android:textSize = "16sp"
        />
    < EditText
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:hint = "Please enter login account"
        android:selectAllOnFocus = "true"
        />
    </ TableRow >
    < TableRow >
    < TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:text = "Code:"
        android:textSize = "16sp"
        />
    < EditText
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
android:inputType = "numberPassword"
        />
    </ TableRow >
    < TableRow >
    < TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:text = "Age:"
        android:textSize = "16sp"
       
        />
    < EditText
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
android:inputType = "number"
        />
    </ TableRow >
    < TableRow >
    < TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:text = "Birthday:"
        android:textSize = "16sp"
        />
    < EditText
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
android:inputType = "date"
        />
    </ TableRow >
    < TableRow >
    < TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:text = "PhoneNumble:"
        android:textSize = "16sp"
        />
    < EditText
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:hint = "Please input your phone number"
        android:selectAllOnFocus = "true"
android:inputType = "phone"
        />
    </ TableRow >
   
    < Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "Register!"
        />

</ TableLayout >

---

2.3.3 按钮（Button）组件的功能和用法

Button继承TextView；可通过android:background属性为按钮增加背景颜色或背景图片

为了定义图片随用户动作改变的按钮，可考虑使用xml资源文件来定义Drawable对象，再将Drawable对象设Button的 android:background属性值，或设为ImageButton的android:src属性值

Button生成的按钮功能很强大，不仅可以是普通的文字按钮，也可以定制生任意形状，并可以随用户交互动作改变外观

按钮，圆形按钮、带文字的图片按钮

< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    android:orientation = "vertical"
android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    >

    < Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "文字带阴影的按钮"
        android:textSize = "12pt"
        android:shadowColor = "#aa5"
        android:shadowRadius = "1"
        android:shadowDx = "5"
        android:shadowDy = "5"
        />
    < Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:background = "@drawable/red"
        android:text = "普通按钮"
        android:textSize = "10pt"
       
        />
    < Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:background = "@drawable/button_selector"
        android:text = "带文字的图片按钮"
        android:textSize = "11pt"
        />

</ LinearLayout >

Button_selector.xml资源文件代码：

< selector xmlns:android = "http://schemas.android.com/apk/res/android" >
    < item android:state_pressed = "true"
        android:drawable = "@drawable/red"
        />
    < item android:state_pressed = "false"
        android:drawable = "@drawable/purple"
        />

</ selector >

---

2.3.4 使用9Patch图片作为按钮背景

以.9.png结尾，它在原始图片四周各添加一个宽度为1px的线条，这4条线就决定了该图片的缩放规则、内容显示规则

---

2.3.5 单选按钮（RadioButton）与复选框（CheckBox）的功能与用法

RadioButton,CheckBox,ToggleButton, Switch 都继承自Button，可以直接使用Button支持的各种属性和方法

RadioButton,CheckBox多一个可选中功能，可额外指定一个android:checked属性，用于指定RadioButton、CheckBox初始时是否被选中

如果在xml布局文件中默认勾选某个单选按钮，则必须为该组单选按钮的每个按钮指定android:id属性值，否则可能不能正常工作。

为了监听单选按钮、复选按钮的勾选状态，可以为它们添加事件监听器

示例代码:main.xml

< TableLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    android:orientation = "vertical"
android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    >
< TableRow >
    < TextView
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "性别："
        android:textSize = "16pt"
        />
    < RadioGroup android:id = "@+id/rg"
        android:orientation = "horizontal"
        android:layout_gravity = "center_horizontal"
        >
    < RadioButton
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:id = "@+id/male"
        android:text = "男"
        android:checked = "true"
        />
    < RadioButton
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:id = "@+id/female"
        android:text = "女"
        android:checked = "true"
        />
    </ RadioGroup >
    </ TableRow >
    < TableRow >
    < TextView
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "喜欢的颜色"
        android:textSize = "16px"
        />
    < LinearLayout android:layout_gravity = "center_horizontal"
        android:orientation = "vertical"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        >
< CheckBox android:layout_width = "wrap_content"
    android:layout_height = "wrap_content"
    android:text = "红色"
    android:checked = "true"
/>
< CheckBox android:layout_width = "wrap_content"
    android:layout_height = "wrap_content"
    android:text = "蓝色"
/>
< CheckBox android:layout_width = "wrap_content"
    android:layout_height = "wrap_content"
    android:text = "绿色"
/>
</ LinearLayout >
    </ TableRow >
    < TextView
        android:id = "@+id/show"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        />

</ TableLayout >

添加监听器的代码：main.java

public class MainActivity extends ActionBarActivity {

RadioGroup rg ;
TextView show ;

@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout. activity_main );
rg = (RadioGroup) findViewById(R.id. rg );
show = (TextView) findViewById(R.id. show );


rg .setOnCheckedChangeListener( new OnCheckedChangeListener()
{
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
String tip = checkedId == R.id. male ?
"你选择了男" : "你选择了女" ;
show .setText(tip);
}
});

}

}

---

2.3.6状态开关按钮（ToggleButton）与开关（Switch）的功能与用法

ToggleButton、Switch与CheckBox的区别主要体现在功能上

ToggleButton所支持的XML属性：

android:checked	setChecked(boolean)	设置该按钮是否被选中
android:textOff		设置该按钮的状态关闭时显示的文本
android:textOn		打开时显示文本

Switch所支持的XML属性：

android:checked
android:switchMinWidth		开关的最小宽度
android:switchPadding		开关与标题文本之间的空白
android:switchTextAppearance		开关图标上的文本样式
android:textOff		开关状态关闭时显示的文本
android:TextOn		开关状态打开时显示的文本
android:textStyle		开关的文本风格
android:thumb		使用自定义Drawable绘制该开关的开关按钮
android:track		使用自定义Drawable绘制该开关的开关轨道
android:typeface		设置该开关的文本字体风格

动态控制布局代码：

main.xml

< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
    android:orientation = "vertical"
    android:id = "@+id/test"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
>

    < ToggleButton
        android:id = "@+id/toggle"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:textOff = "横向排列"
        android:textOn = "纵向排列"
        android:checked = "true"
        />
    < Switch
        android:id = "@+id/switcher"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:textOff = "横向排列"
        android:textOn = "纵向排列"
        android:thumb = "@drawable/check"
        android:checked = "true"

        />

    < Button/>………..

</ LinearLayout >

控制程序代码：main.java

public class MainActivity extends ActionBarActivity {

ToggleButton toggle ;
Switch switcher ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super .onCreate(savedInstanceState);
        setContentView(R.layout. activity_main );
        toggle = (ToggleButton) findViewById(R.id. toggle );
        switcher = (Switch) findViewById(R.id. switcher );
        final LinearLayout test = (LinearLayout) findViewById(R.id. test );
        OnCheckedChangeListener listener = new OnCheckedChangeListener()
        {
        @Override
        public void onCheckedChanged(CompoundButton button,
        boolean isChecked)
        {
        if (isChecked)
        {
        test.setOrientation(1);
        }
        else
        {
        test.setOrientation(0);
        }
        }
        };
        toggle .setOnCheckedChangeListener(listener);
        switcher .setOnCheckedChangeListener(listener);
    }

}

---

2.3.7 时钟（AnalogClock和DigitalClock）的功能与用法

DigitalClock本身就继承了TextView，它显示当前时间，与TextView不同的是，为DigitalClock设置android:text属性没有作用

AnalogClock继承了View组件，重写了View的OnDraw方法，AnalogClock支持的xml属性如下

android:dial	设置模拟时钟表盘使用的图片
android:hand_hour	时针表盘使用的图片
android:hand_minute	分针表盘使用的图片

AnalogClock不会显示当前秒数，而DigitalClock会显示

示例代码：

< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:gravity = "center_horizontal"
    >

    < AnalogClock
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        />
    < DigitalClock
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:textSize = "14pt"
        android:textColor = "#f0f"
        android:drawableRight = "@drawable/ic_launcher"
        />
    < AnalogClock
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:dial = "@drawable/watch"
        android:hand_minute = "@drawable/hand"
        />

</ LinearLayout >

---

2.3.8 计时器Chronometer

其与DigitalClock都继承自TextView

它只提供了一个android:format属性，用于指定计时器的计时格式

它支持的方法有：

setBase(long base):设置计时器起始时间

setFormat(String format):设置显示时间格式

start()

stop()

setOnChronometerTickListener(Chronometer.OnChronometerTickListener listener):为计时器绑定时间监听器

示例程序代码：

public class MainActivity extends ActionBarActivity {

Chronometer ch ;
Button start ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super .onCreate(savedInstanceState);
        setContentView(R.layout. activity_main );
        ch = (Chronometer) findViewById(R.id. test );
        start = (Button) findViewById(R.id. start );
        start .setOnClickListener( new OnClickListener()
        {
        @Override
        public void onClick(View source)
        {
        ch .setBase(SystemClock.elapsedRealtime());
        ch .start();
        start .setEnabled( false );
        }
        });
        ch .setOnChronometerTickListener( new OnChronometerTickListener()
        {
        @Override
        public void onChronometerTick(Chronometer ch)
        {
        if (SystemClock.elapsedRealtime() - ch.getBase() > 5*1000)
        {
        ch.stop();
        start .setEnabled( true );
        }
        }
        });

    }