Android应用的界面编程(三)--TextView及其子类

第二组UI组件：textView及其子类

一、TextView及其子类的类图

TextView作用就是在界面上显示文本，相当于一个文本编辑器，不过它不能编辑文本，如果想要编辑文本，可以使用它的子类EditText，EditText允许用户编辑文本框中的内容。

二、TextView常用的xml属性及相关方法

xml属性	相关方法	说明
android:autoLink	setAutoLinkMask(int)	是否将符合指定格式的文本转换为可单击的超链接形式
android:autoText	setKeyLinstener(KeyLinstener)	控制是否将的URL、email等地址自动转换为可单击的链接
android:linksClickable	setLinksClickable(boolean)	控制该文本框的URL、email等链接是否具可以点击
android:capitalize	setKeyLinstener(KeyLinstener)	控制是否将用户输入的文本转换为大写字母
android:cursorVisible	setCursorVisiblek(boolean)	设置该文本框的光标是否可见
android:drawableBottom	setCompoundDrawablesWithIntrinsicBounds(Drawable,Drawable,Drawable,Drawable)	在文本框底端处绘制图像
android:drawableTop	setCompoundDrawablesWithIntrinsicBounds(Drawable,Drawable,Drawable,Drawable)	在文本框顶端处绘制图像
android:drawableEnd	setCompoundDrawablesWithIntrinsicBounds(Drawable,Drawable,Drawable,Drawable)	在文本框结尾处绘制图像
android:drawableLeft	setCompoundDrawablesWithIntrinsicBounds(Drawable,Drawable,Drawable,Drawable)	在文本框左边处绘制图像
android:drawableRight	setCompoundDrawablesWithIntrinsicBounds(Drawable,Drawable,Drawable,Drawable)	在文本框右边处绘制图像
android:drawablePadding	setCompoundDrawablesWithIntrinsicBounds(Drawable,Drawable,Drawable,Drawable)	设置文本框内文本与图形的间距
android:drawableStart	setCompoundDrawablesWithIntrinsicBounds(Drawable,Drawable,Drawable,Drawable)	在文本框开始处绘制图像
android:editable		设置文本框是否允许被编辑
android:ellipsize	setEllipsize(TextUitls,TruncateAt)	当显示文本超过了TextView的宽度时，如何处理文本
android:ems	setEms(int)	设置文本框的宽度
android:height	setHeight(int)	设置文本框的高度
android:fontFamily	setTypeface(Typeface)	设置文本框内文本的字体
android:gravity	setGravity(int)	设置文本框内文本的对齐方式
android:hint	setHint(int)	设置文本框内容为空时，文本框内默认显示的提示文字
android:inputType	setRawInputType(int)	设置文本框输入方式
android:lines	setLines(int)	设置文本框默认占几行
android:maxEms	setMaxEms(int)	设置文本框最大宽度
android:maxHeight	setMaxHeight(int)	设置文本框最大高度
android:maxLenghth	setMaxLenghth(int)	设置文本框最大字符长度
android:maxWidth	setMaxWidth(int)	设置文本框最大宽度
android:maxLines	setMaxLines(int)	设置文本框最多占几行
android:maxEms	setMaxEms(int)	设置文本框最小宽度
android:minHeight	setMinHeight(int)	设置文本框最小高度
android:minLenghth	setMinxLenghth(int)	设置文本框最小长度
android:minWidth	setMinWidth(int)	设置文本框最小宽度
android:minLines	setMinLines(int)	设置文本框最少占几行
android:passwordd	setTransformatinMethod(TransformatinMethod)	设置文本框是一个密码框
android:phoneNumber	setKeyListener(KeyListener)	设置文本框只接受电话号码
android:scrollHorizontally	setHorizontallyScrolling(boolean)	设置文本框不够显示全部内容时是否允许水平滚动
android:selectAllOnFocus	setSelectAllOnFocus(boolean)	如果文本框内的内容可选择，设置是否当它获得焦点时自动选择所有文本
android:shawdowColor	setshadowLayer(float,float,float,int)	设置文本框内文本的阴影的颜色
android:shawdowDx	setshadowLayer(float,float,float,int)	设置文本框内文本的阴影在水平方向的偏移
android:shawdowDy	setshadowLayer(float,float,float,int)	设置文本框内文本的阴影在垂直方向的偏移
android:shawdowRadius	setshadowLayer(float,float,float,int)	设置文本框内文本的阴影的模糊程度，值越大，阴影越模糊
android:singleLine	setTransformationMethod()	设置文本框是否为单行模式
android:text	setText(CharSequence)	设置是否将文本框文本的内容
android:textAllCaps	setAllCaps(boolean)	设置是否将文本框中所有字幕显示为大写字母
android:textAppearance		设置文本框的颜色、字体、大小等样式
android:textColor	setTextColor(ColorStateList)	设置文本框中文本的颜色
android:textColorHighlight	setHighlightColor(int)	设置文本框被选中时的颜色
android:textColorHint	setHintTextColor(int)	设置文本框中提示文本的颜色
android:textColorLink	setLinkTextColor(int)	设置文本框中链接的颜色
android:textIsSelectable	setTextSelectedable()	设置该文本框不能编辑时，文本框内的文本是否可以被选中
android:textSize	setTextSize(float)	设置文本框的字体大小
android:textStyle	setTypeface(Typeface)	设置文本框内字体风格，如粗体、斜体等
android:width	setWidth(int)	设置该文本框的宽度

* ellipsize的属性值有:*

–none：不做任何处理；

–start：在文本开始处截断，并显示省略号

–middle：在文本中间处截断，并显示省略号

–end:在文本结尾处截断，并显示省略号

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

实例1：圆角边框、渐变色的TextView

app/src/main/res/layout/textview_test.xml

<
16310
/ul>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.textviewtest.MainActivity">
<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="wrap_content"
android:layout_height="wrap_content"
android:text="带边框的文本"
android:textSize="24pt"
android:background="@drawable/bg_border"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="圆角渐变背景的文本"
android:textSize="24pt"
android:background="@drawable/bg_border2"/>
</LinearLayout>
</RelativeLayout>

第一个文本框的背景是由xml文件定义的，该文件放在Drawable里面，该xml文件也可以当初Drawable使用。下面为两个Drawable文件

app/src/main/res/drawable/bg_border.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="4px" android:color="#f00"/>
</shape>

app/src/main/res/drawable/bg_border2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--指定圆角矩形的四个圆角半径-->
<corners android:topLeftRadius="20px"
android:bottomRightRadius="30px"
android:bottomLeftRadius="20px"
android:topRightRadius="30px"/>
<!--指定边框线条的宽度和颜色-->
<stroke android:width="4px" android:color="#f0f"/>
<!--指定渐变背景颜色，使用sweep类型的渐变,颜色从红色-绿色-蓝色-->
<gradient android:startColor="#f00"
android:centerColor="#00f"
android:endColor="#0f0"
android:type="sweep"/>

</shape>

此处Activity的代码省略，简单的添加布局文件就可以了看到显示效果。

三、EditText的功能与用法

EditText最重要的属性是inputType，用于将EditText设置为指定类型的输入组件，inputType能接受的属性值非常丰富，比如：numberPassword、number、date、phone……

实例2：用户输入界面设计

app/src/main/res/layout/edittext_test.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="用户名:"
android:textSize="24dp"/>
<EditText
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:hint="请填写登陆账号"
android:selectAllOnFocus="true"/>
</TableRow>

<TableRow>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="密码:"
android:textSize="24dp"/>
<EditText
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:inputType="numberPassword"
android:selectAllOnFocus="true"/>
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="年龄:"
android:textSize="24dp"/>
<EditText
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:inputType="number"
android:selectAllOnFocus="true"/>
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="生日:"
android:textSize="24dp"/>
<EditText
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:inputType="date"
android:selectAllOnFocus="true"/>
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="电话号码:"
android:textSize="24dp"/>
<EditText
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:inputType="phone"
android:hint="请填写正确的电话号码"
android:selectAllOnFocus="true"/>
</TableRow>
</TableLayout>

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

Button主要是在UI界面生成一个按钮，按钮可以共用户单击，当用户单击按钮后，会触发一个onClick事件。按钮使用很简单，可以通过指定android:background属性为按钮增加背景颜色或背景图片，背景图片可以考虑使用自定义的drawable对象使得按钮更加多样化。

实例3：按钮和可变按钮

- app/src/main/res/layout/button_test.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">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="带阴影的文字按钮"
android:shadowDx="5"
android:shadowDy="5"
android:shadowColor="@color/colorAccent"
android:shadowRadius="2"
android:textSize="12pt"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮"
android:textSize="10pt"
android:background="@drawable/m1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="图片按钮"
android:textSize="12pt"
android:background="@drawable/btn_selector"
/>

</LinearLayout>

图片按钮的背景图片也为自定的的xml文件，通过自定义xml可以使的Button更加多样化。下面为Drawable下的xml文件。

app/src/main/res/drawable/btn_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--指定按下时的图片-->
<item android:state_pressed="true"
android:drawable="@drawable/m1"/>

<!--指定松开时的图片-->
<item android:state_pressed="false"
android:drawable="@drawable/m2"/>
</selector>

五、单选钮（RadioButton）和复选框（CheckBox）的功能与用法

单选钮（RadioButton）和复选框（CheckBox）直接继承了Button类，但是他们与普通按钮不同的是，他们多了一个可选中的功能，因此都可额外指定android：checked属性，设置默认情况是否被选中。RadioButton和CheckBox不同之处在于，一组RadioButton只能选中其中一个，通常和RadioGroup一起使用，而CheckBox能选中多个。

实例4：利用单选框和复选框获取用户信息

- app/src/main/res/layout/radiobtn_checkbtn_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow>
<TextView android:text="性别:"
android:textSize="12pt"
android:layout_width="30pt"
android:layout_height="wrap_content"/>
<RadioGroup android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/rg">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/male"
android:text="女"
android:textSize="24dp"
android:checked="true"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/female"
android:text="男"
android:textSize="24dp"/>
</RadioGroup>
</TableRow>

<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="喜欢的颜色:"
android:textSize="10pt"/>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal">
<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="白色"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="蓝色"/>

</LinearLayout>
</TableRow>
<TextView android:id="@+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</TableLayout>

app/src/main/java/org/MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.radiobtn_checkbtn_layout);
RadioGroup rg=(RadioGroup) findViewById(R.id.rg);
final TextView message=(TextView)findViewById(R.id.message);
rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener(){
@Override
public void onCheckedChanged(RadioGroup radioGroup,int checkedId){
String tip=checkedId==R.id.male?
"您的性别是女人":"您的性别是男人";
message.setText(tip);
}
});

}
}

六、状态开关按钮（ToggleButton）和开关（Switch）的功能和用法

状态开关按钮（ToggleButton）和开关（Switch）也是Button派生出来额，本质也是按钮。从功能上面看ToggleButton和Switch与CheckBox复选框很相似，都可以提供两种状态，不过ToggleButton和Switch通常用于切换程序中的某种状态。

ToggleButton支持的xml属性

xml属性	相关方法	说明
android:checked	setChecked(boolean)	设置按钮是否被选中
android:textOff		设置按钮状态关闭时显示的文本
android:textOn		设置按钮状态打开时显示的文本

Switch支持的xml属性及相关方法

xml属性	相关方法	说明
android:checked	setChecked(boolean)	设置开关是否被选中
android:switchMinWidth	setSwitchMinWidth(int)	设置开关的最小宽度
android:swithPadding	setSwitchPadding(int)	设置开关与标题之文本间的空白
android:textOff	setTextOff(CharSequence)	设置开关状态关闭时显示的文本
android:textOn	setTextOn(CharSequence)	设置开关状态打开时显示的文本
android:textStyle	setSwitchTypeface(Typeface)	设置开关的文本风格
android:thumb	setThumbResource(int)	指定使用自定义Drawable绘制该开关的开关按钮
android:track	setTrackResource(int)	指定使用自定义Drawable绘制该开关的开关轨道

实例5：利用开关控制布局状态

app/src/main/res/layout/togglebtn_switch_layout.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">
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/toggle"
android:textOff="横向排列"
android:textOn="纵向排列"
android:checked="true"/>
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/switcher"
android:textOff="横向排列"
android:textOn="纵向排列"
android:checked="true"/>
<LinearLayout
android:id="@+id/test"
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="btn1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn3"/>
</LinearLayout>
</LinearLayout>

app/src/main/java/org/MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.LinearLayout;
import android.widget.Switch;
import android.widget.ToggleButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
public class ToggleTest extends Activity {
ToggleButton toggleButton;
Switch switcher;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.togglebtn_switch_layout);
toggleButton=(ToggleButton)findViewById(R.id.toggle);
switcher =(Switch)findViewById(R.id.switcher);
final LinearLayout test= (LinearLayout)findViewById(R.id.test);
OnCheckedChangeListener listener=new OnCheckedChangeListener()
{
public void onCheckedChanged(CompoundButton button,boolean isChecked) {
if (isChecked) {
test.setOrientation(LinearLayout.VERTICAL);
toggleButton.setChecked(true);
switcher.setChecked(true);
} else {
test.setOrientation(LinearLayout.HORIZONTAL);
toggleButton.setChecked(false);
switcher.setChecked(false);
}
}
};
toggleButton.setOnCheckedChangeListener(listener);
switcher.setOnCheckedChangeListener(listener);

}
}

七、时钟（AnalogClock和TextClock）的功能与用法

时钟UI组件是两个很简单的UI组件，AnalogClock和TextClock都会显示时间，不同的是TextClock显示数字时钟，可以显示当前秒数，AnalogClock显示模拟时钟，不会显示当前秒数。

1.TextClock本身就继承了TextView，也就是说，它也是一个文本框，只是显示的内容固定是当前的时间。TextClock以24小时制或者12小时制来显示时间，格式由相关属性控制。

TextClock支持的xml属性及其方法

xml属性	相关方法	说明
android:format12Hour	setFormat12Hour(CharSequence)	设置该时钟以12小时制显示
android:format24Hour	setFormat24Hour(CharSequence)	设置该时钟以24小时制显示
android:timeZone	setTimeZone（String））	设置该时钟的时区

2.AnalogClock则继承； View组件，它重写了View的OnDraw方法，他会在View上绘制模拟时钟。

AnalogClock相关属性及方法

xml属性	说明
android:dial	设置该模拟时钟的表盘显示图片
android:hand_hour	设置该模拟时钟的时针显示图片
android:hand_minute	设置该模拟分针的表盘显示图片

实例6：手机时钟

<?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:gravity="center_horizontal">
<!--定义模拟时钟-->
<AnalogClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<!--定义数字时钟-->
<!--24小时格式：android:format12Hour="yyyy年MM月dd日 H:mm EEEE"
12小时格式：android:format12Hour="yyyy年MM月dd日 h:mma EEEE"  -->
<TextClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10pt"
android:textColor="#ff00f0"
android:format12Hour="yyyy年mm月dd日 h:mma EEE"/>
<!--定义模拟时钟，自定义表盘，时钟，分针-->
<AnalogClock
android:layout_width="208dp"
android:layout_height="220dp"
android:dial="@drawable/dial"
android:hand_minute="@drawable/time"/>
</LinearLayout>

八、计时器（Chronometer）

Chronometer和TextClock相似，也继承了TextView，因此都会显示一段文本，但是Chronometer不显示当前时间，它显示从某个时间段开始，一共过去了多少时间。它只提供了一个方法，android：format属性，用于指定计时器的计时格式。除此之外，它提供了以下的方法：

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

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

start() 开始计时

stop()结束计时

setOnChronometerTickListener(Chronometer.OnChronometerTickListener listener)为计时器绑定监听事件，当计时器改变时触发该监听。

实例7：计时器

app/src/main/res/layout/chronometer_test.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:gravity="center_horizontal">
<Chronometer
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ch"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/begin"
android:text="开始"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/end"
android:text="结束"/>
</LinearLayout>
</LinearLayout>

app/src/main/java/org/MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.os.SystemClock;
import android.view.View;
import android.widget.Button;
import android.widget.Chronometer;

public class ChronometerTest extends Activity {
Chronometer ch;
Button begin;
Button end;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chronometer_test);
ch=(Chronometer)findViewById(R.id.ch);
begin=(Button)findViewById(R.id.begin);
end=(Button)findViewById(R.id.end);
begin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ch.setBase(SystemClock.elapsedRealtime());
ch.start();
begin.setEnabled(false);
end.setEnabled(true);
}
});
end.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ch.stop();
end.setEnabled(false);
begin.setEnabled(true);
}
});
}
}