安卓应用的界面编程(3)

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

1.

TextView（不允许用户编辑文本内容）直接继承了View，同时是EditText（允许用户编辑文本内容）/Button两个UI组件类的父类。TextView的作用就是在界面上显示文本（类似JLabel）

下面是TextView的几个使用例子

<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:layout_marginTop="30pt"
            android:text="我爱Java"
            android:textSize="20pt"
            android:drawableEnd="@drawable/doge"
            android:drawableRight="@drawable/doge"/>
        <!-- 设置中间省略，所以字母大写 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:text="我爱Java 我爱Java 我爱Java 我爱Java 我爱Java 我aaa Java"
            android:ellipsize="middle"
            android:textAllCaps="true"/>
        <!-- 对邮件/电话增加链接 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:text="邮件是somebody@163.com,电话是222266666"
            android:autoLink="email|phone"/>
        <!-- 设置文字颜色/大小，并使用阴影 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="测试文字"
            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"
            android:password="true"/>
        <CheckedTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="可勾选的文本"
            android:checkMark="@drawable/doge"/>
    </LinearLayout>

 

然后是一个圆角边框/渐变背景的TextView的实例

先在两个XML文件中定义两个背景文件

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>

bg_border1.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>

新增xml文件时，它是跑到layout目录下的而且还无法移动。。我就把文件写好剪切到了drawable文件夹里面。

然后添加一个布局文件border到layout目录下

<?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="24pt"
        android:background="@drawable/bg_border"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="圆角边框/渐变背景的文本"
        android:textSize="24pt"
        android:background="@drawable/bg_border1"/>
</LinearLayout>

在引用背景的两行有感叹号提示错误。但是找不到错误，程序运行的错误是空指针异常，不知道怎么修改。但是可以看到右方的实例效果图。

 错误的地方，求大神讲解

 

2.EditText的功能与用法

 与TextView最大的区别是可以接受用户输入。最重要的属性是inputType,该属性相当于HTML的<input.../>元素的type属性，用于将EditView设置为指定类型的输入组件。

下面是一个用户相对友好的输入界面

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="32sp" />
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="用户名："
            android:textSize="16sp"/>
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请填写登陆账号"
            android:selectAllOnFocus="true"/>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="密码："
            android:textSize="16sp"/>
        <!-- android:inputType="numberPassword"表明只能接受数字密码 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="numberPassword"/>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="年龄："
            android:textSize="16sp"/>
        <!-- inputType="number"表明是数值输入框 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="number"/>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="生日："
            android:textSize="16sp"/>
        <!-- inputType="date"表明是日期输入框 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="date"/>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="电话号码："
            android:textSize="16sp"/>
        <!-- inputType="phone"表明是输入电话号码的输入框 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请填写您的电话号码"
            android:selectAllOnFocus="true"
            android:inputType="phone"/>
    </TableRow>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="注册"/>
</TableLayout>

切换不同的文本框时会启用不同的键盘

 

3.Button

可以指定按钮按下/松开时的图片

还可以使用9Patch图片作为背景（sdk/tools里面的draw9patch.bat）可以设定缩放的图片区域，防止图片变形（暂时没有实际操作）

下面是一个简单的使用说明

首先是一个界面布局文件

<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_marginTop="80px"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <!-- 文字带阴影的按钮 -->
        <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/doge"
            android:text="普通按钮"
            android:textSize="10pt" />
        <!-- 带文字的图片按钮 -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/button_selector"
            android:textSize="11px"
            android:text="带文字的图片按钮"/>
    </LinearLayout>

里面引用了一个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/three"/>
    <!-- 指定按钮松开时的图片 -->
    <item android:state_pressed="false"
        android:drawable="@drawable/four"/>
</selector>

 

4.单选钮(RadioButton)和复选框(CheckBox)的功能与用法

比普通按钮多了一个可选中的功能，可额外指定一个android:checked属性（初始时是否被选中）

注意：如果在XML布局文件中定义了一组单选钮，并默认勾选了第一个单选钮，则必须为该组单选钮的每个按钮指定android:id属性值；否组这组单选钮不能正常工作

XML布局文件如下

<TableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="100px"/>
        <TableRow>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="性别"/>
            <!-- 定义一组单选钮 -->
            <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="女"/>
            </RadioGroup>
        </TableRow>
        <TableRow>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="喜欢的颜色："/>
            <!-- 定义一个垂直的线性布局 -->
            <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>

为了监听单选钮/复选框勾选状态的改变，为他们添加事件监听器，如下的代码为RadioGroup添加了事件监听器

public class RadioButtonAndCheckBox extends AppCompatActivity {

    RadioGroup rg;
    TextView show;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio_button_and_check_box);
        //获取界面上rg/show两个组件
        rg=(RadioGroup)findViewById(R.id.rg);
        show=(TextView)findViewById(R.id.show);
        //为RadioGroup组件的onCheckedChanged事件绑定事件监听器
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener()
        {
            @Override
            public void onCheckedChanged(RadioGroup group,int checkedId)
            {
                //根据用户勾选的单选按钮来动态改变tip字符串的值
                String tip=checkedId==R.id.male?"您的性别是男":"您的性别是女";
                //修改show组件中的文本
                show.setText(tip);
            }
        });
    }
}

运行效果如下

 

5.状态开关按钮(ToggleButton)和开关(Switch)的功能与用法

通常用于切换程序中的某种状态，下面是一个动态控制布局的实例

在页面中增加一个ToggleButton，随着该按钮状态的改变，界面布局中的LinearLayout布局的方向在水平布局/垂直布局之间切换。如下是界面布局文件

<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="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="150px"/>
        <!-- 定义一个ToggleButton按钮 -->
        <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/three"
            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="200px"
                android:layout_height="120px"
                android:text="测试按钮1"/>
            <Button
                android:layout_width="200px"
                android:layout_height="120px"
                android:text="测试按钮2"/>
            <Button
                android:layout_width="200px"
                android:layout_height="120px"
                android:text="测试按钮3"/>
        </LinearLayout>
    </LinearLayout>

然后再java代码中为ToggleButton按钮/Switch按钮绑定监听器，当选中状态改变时，程序通过代码来改变LinearLayout的布局方向

public class toggleButton_index extends AppCompatActivity {
    ToggleButton toggle;
    Switch switcher;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toggle_button_index);
        toggle=(ToggleButton)findViewById(R.id.toggle);
        switcher=(Switch)findViewById(R.id.switcher);
        final LinearLayout test=(LinearLayout)findViewById(R.id.test);

        CompoundButton.OnCheckedChangeListener listener=new CompoundButton.OnCheckedChangeListener()
        {
            @Override
            public void onCheckedChanged(CompoundButton button,boolean isChecked)
            {
                if(isChecked)
                {
                    //设置LinearLayout垂直布局
                    test.setOrientation(LinearLayout.VERTICAL);
                    toggle.setChecked(true);
                    switcher.setChecked(true);
                }
                else
                {
                    //设置LinearLayout水平布局
                    test.setOrientation(LinearLayout.HORIZONTAL);
                    toggle.setChecked(false);
                    toggle.setChecked(false);
                }
            }
        };
        toggle.setOnCheckedChangeListener(listener);
        switcher.setOnCheckedChangeListener(listener);
    }
}

运行效果如下 上方的是ToggleButton 下方的是Switch

        

 

6.时钟(AnalogClock和TextClock(需要api17))

AnalogClock显示模拟时钟，TextClock显示数字时钟，可以显示当前秒数

下面是使用的样例

<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">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="120px"/>
        <!-- 定义模拟时钟 -->
        <AnalogClock
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <!-- 定义数字时钟 -->
        <TextClock
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20pt"
            android:textColor="#f0f"
            android:format12Hour="yyyy年MM月dd日 H:mma EEEE"
            android:drawableEnd="@drawable/four"
            android:drawableRight="@drawable/four"/>
        <!-- 定义模拟时钟，并使用自定义表盘/时针图片 -->
        <AnalogClock
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:dial="@drawable/clock"/>
    </LinearLayout>

图示，没有再去找时针分针的图片

 

7.计时器（Chronometer）

下面的程序：用户单击button系统开始计时，超过20s停止计时，xml布局文件比较简单就不加了

public class chronometer_index extends AppCompatActivity {
    Chronometer ch;
    Button start;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chronometer_index);
        //获取计时器组件
        ch=(Chronometer)findViewById(R.id.chr);
        start=(Button)findViewById(R.id.begin);
        start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //设置开始计时时间
                ch.setBase(SystemClock.elapsedRealtime());
                //启动计时器
                ch.start();
                start.setEnabled(false);
            }
        });
        //为Chronometer绑定事件监听器
        ch.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
            @Override
            public void onChronometerTick(Chronometer chronometer) {
                //如果从开始计时到现在超过了20s
                if(SystemClock.elapsedRealtime()-ch.getBase()>20*1000)
                {
                    ch.stop();
                    start.setEnabled(true);
                }
            }
        });
    }
}

 

 

下一篇 第三组UI组件：ImageView及其子类