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代码

<LinearLayoutxmlns: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"
    />
    <TextViewandroid: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代码：

<shapexmlns:android="http://schemas.android.com/apk/res/android">
    <solidandroid:color="#0000"/>
    <strokeandroid:width="4px"
        android:color="#f00"/>

    </shape>

bg_border2.xkl代码：

<shapexmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <cornersandroid:topLeftRadius="20px"
        android:topRightRadius="5px"
        android:bottomLeftRadius="5px"
        android:bottomRightRadius="20px"
        />
    <strokeandroid:width="4px"
        android:color="#f0f"/>
    <gradientandroid: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代码如下：

<TableLayoutxmlns: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生成的按钮功能很强大，不仅可以是普通的文字按钮，也可以定制生任意形状，并可以随用户交互动作改变外观

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

<LinearLayoutxmlns: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资源文件代码：

<selectorxmlns:android="http://schemas.android.com/apk/res/android">
    <itemandroid:state_pressed="true"
        android:drawable="@drawable/red"
        />
    <itemandroid: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

<TableLayoutxmlns: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"
        />
    <RadioGroupandroid: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"
        />
    <LinearLayoutandroid:layout_gravity="center_horizontal"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
<CheckBoxandroid:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="红色"
    android:checked="true"
/>
<CheckBoxandroid:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="蓝色"
/>
<CheckBoxandroid: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

publicclassMainActivity extends ActionBarActivity {

RadioGroup rg;
TextView show;

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


rg.setOnCheckedChangeListener(newOnCheckedChangeListener()
{
@Override
publicvoidonCheckedChanged(RadioGroup group,intcheckedId) {
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

<LinearLayoutxmlns: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

publicclassMainActivity 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
        publicvoidonCheckedChanged(CompoundButton button,
        booleanisChecked)
        {
        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会显示

示例代码：

<LinearLayoutxmlns: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):为计时器绑定时间监听器

示例程序代码：

publicclassMainActivity 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(newOnClickListener()
        {
        @Override
        publicvoidonClick(View source)
        {
        ch.setBase(SystemClock.elapsedRealtime());
        ch.start();
        start.setEnabled(false);
        }
        });
        ch.setOnChronometerTickListener(newOnChronometerTickListener()
        {
        @Override
        publicvoidonChronometerTick(Chronometer ch)
        {
        if(SystemClock.elapsedRealtime() - ch.getBase() > 5*1000)
        {
        ch.stop();
        start.setEnabled(true);
        }
        }
        });

    }