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

<?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);
            }
        });
    }
}