Android 自学之基本界面组件(下)

浏览数：25 / 时间：2015年06月11日

按钮(Button)与图片按钮(ImageButton)组件的功能和用法

Button继承了TextView，ImageButton继承了Button。不管是Button还是ImageButton，他们的功能都很单一，主要是在UI界面生成一个按钮，该按钮可以供用户单击，当用户单击按钮后出发一个Onclick事件。

Button 和 ImageButton的不同在于Button生成的按钮显示文字，ImageButton生成的按钮显示图片。(关于ImageButton属性android：text属性是无效的就算你设置了他也不会显示)

下面我来举个例子看看：按钮、圆形按钮、带文字的图片按钮

layout/main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="horizontal"
 4     android:layout_width="fill_parent"
 5     android:layout_height="fill_parent"
 6     >
 7 <TableRow>
 8 <!-- 普通文字按钮 -->    
 9 <Button
10     android:layout_width="wrap_content"
11     android:layout_height="wrap_content"
12     android:background="@drawable/red"
13     android:text="普通按钮"
14     android:textSize="10pt"
15 />
16 <!-- 普通图片按钮 -->
17 <ImageButton
18     android:layout_width="wrap_content"
19     android:layout_height="wrap_content"
20     android:src="@drawable/blue"
21     android:background="#000000"
22 />
23 </TableRow>
24 <TableRow>
25 <!-- 按下时显示不同图片的按钮 -->
26 <ImageButton
27     android:layout_width="wrap_content"
28     android:layout_height="wrap_content"
29     android:src="@drawable/button_selector"
30     android:background="#000000"
31 />
32 <!-- 带文字的图片按钮-->
33 <Button
34     android:id="@+id/test"
35     android:layout_width="wrap_content"
36     android:layout_height="wrap_content"
37     android:background="@drawable/button_selector"
38     android:text="带文字的图片按钮"
39 />
40 </TableRow>
41 </TableLayout>

单选按钮、复选框组件的功能和用法

单选按钮(RadioButton)和复选框(checkBox)是所有组件界面中最普通的UI组件，Android中的RadioButton，Checkbox都是继承了Button按钮，所以他们能直接使用Button所支持的各种属性和方法。

下面代码中我们可以看看两者的不同之处：

layout/main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     android:layout_width="fill_parent"
 5     android:layout_height="fill_parent"
 6     >
 7 <TableRow>
 8 <TextView 
 9     android:layout_width="wrap_content"
10     android:layout_height="wrap_content"
11     android:text="性别:"
12     android:textSize="11pt"
13     />
14 <!-- 定义一组单选框 -->
15 <RadioGroup 
16     android:orientation="horizontal"
17     android:layout_gravity="center_horizontal">
18 <!-- 定义两个单选框 -->
19 <RadioButton android:layout_width="wrap_content"
20     android:layout_height="wrap_content"
21     android:text="男"
22     />
23 <RadioButton android:layout_width="wrap_content"
24     android:layout_height="wrap_content"
25     android:text="女"
26     />
27 </RadioGroup>
28 </TableRow>    
29 <TableRow>
30 <TextView 
31     android:layout_width="wrap_content"
32     android:layout_height="wrap_content"
33     android:text="喜欢的颜色:"
34     android:textSize="11pt"
35     />
36 <!-- 定义一个垂直的线性布局 -->
37 <LinearLayout android:layout_gravity="center_horizontal"
38     android:orientation="vertical"
39     android:layout_width="wrap_content"
40     android:layout_height="wrap_content"
41 >
42 <!-- 定义三个复选框 -->
43 <CheckBox android:layout_width="wrap_content"
44     android:layout_height="wrap_content"
45     android:text="红色"
46     android:checked="true"
47 />
48 <CheckBox android:layout_width="wrap_content"
49     android:layout_height="wrap_content"
50     android:text="蓝色"
51 />
52 <CheckBox android:layout_width="wrap_content"
53     android:layout_height="wrap_content"
54     android:text="绿色"
55 />
56 </LinearLayout>
57 </TableRow>
58 </TableLayout>

状态开关按钮(ToggleButton)的功能和用法

ToggleButton也是由Button派生出来的。从界面上看他与CheckBox复选框很相似，他们都可以设置两个状态；不过他们两个的区别主要体现在功能上，ToggleButton通常用于切换程序中的某种状态。

ToggleButton所支持的XML属性及相关方法说明：

XML属性	相关方法	说明
android：checked	setChecked(boolean)	设置该按钮是否被选中
android：textOff		设置该按钮没有被选中时显示的文本
android：textOn		设置该按钮被选中时显示的文本

下面我们来看看我们的代码：

layout/main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     android:layout_width="fill_parent"
 5     android:layout_height="fill_parent"
 6     >
 7 <!-- 定义一个ToggleButton按钮 -->
 8 <ToggleButton android:id="@+id/toggle"
 9     android:layout_width="wrap_content"
10     android:layout_height="wrap_content"
11     android:textOff="横向排列"
12     android:textOn="纵向排列"
13     android:checked="true"
14     />
15 <!-- 定义一个可以动态改变方向的线性布局 -->
16 <LinearLayout android:id="@+id/test"
17     android:orientation="vertical"
18     android:layout_width="fill_parent"
19     android:layout_height="fill_parent"
20     >
21 <Button
22     android:layout_width="wrap_content"
23     android:layout_height="wrap_content"
24     android:text="测试按钮一"
25     />
26 <Button
27     android:layout_width="wrap_content"
28     android:layout_height="wrap_content"
29     android:text="测试按钮二"
30     />
31 <Button
32     android:layout_width="wrap_content"
33     android:layout_height="wrap_content"
34     android:text="测试按钮三"
35     />
36 </LinearLayout>
37 </LinearLayout>

com.example.togglebutton.MainActivity.java

package com.example.togglebutton;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.LinearLayout;
import android.widget.ToggleButton;
import android.os.Build;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //我们先拿到我们的状态按钮
        ToggleButton toggle = (ToggleButton) findViewById(R.id.toggle);
        //然后我们要拿到我们我定义的那个可以动态布局的线性布局
        final LinearLayout linear = (LinearLayout) findViewById(R.id.test);
        //给状态按钮设置点击事件
        toggle.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            
            @Override
            public void onCheckedChanged(CompoundButton arg0, boolean arg1) {
                    //对状态按钮传回的boolean进行判断
                    if (arg1) {
                        //垂直布局
                        linear.setOrientation(1);
                    } else {
                        //水平布局
                        linear.setOrientation(0);
                    }
            }
        });
        
    }
}

时钟(AnalogClock和DigitalClock)组件的功能和用法

时钟组件是两个非常简单的组件，DigitalClock本身就继承了TextView---也就是说，它本身就是文本框，只是里面显示的内容是当前时间；AnalogClock则继承了View组件，它重写了View和OnDraw方法，他会在View上模拟时钟。

AnalogClock和DigitalClock都会显示时间，他们不同的是；DigitalClock显示数字时钟，可以显示当前的秒数，AnalogClock显示模拟时钟，不会显示当前秒数。

下面看看两种时钟的代码：

layout/main.xml

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:orientation="vertical"
 4     android:layout_width="fill_parent"
 5     android:layout_height="fill_parent">
 6 
 7     <AnalogClock android:layout_width="wrap_content" android:layout_height="wrap_content"/>
 8     
 9     <DigitalClock android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="14pt"/>
10     
11 
12 </LinearLayout>

android 还提供了一个计时器组件：Chronometer，该组件与DigitalClock都继承自TextView，因此他们都会显示一段文本。但Chronometer并不现实当前时间，他显示的是从某个起始时间开始，一共过去了多长时间。

Chronometer的用法很简单，他只提供了以i个android：format属性，用于指定计时器的计时格式。除此之外，Chronometer支持如下常用方法。

setBase（long base）：设置计时器的起始时间。
setFormat（String format）：设置显示时间的模式。
start（）：开始计时
stop（）：停止计时。
setOnChronometerTickListener(Chronometer.OnChronometerTickListener listener):为计时器绑定事件监听器，当计时器改变时触发该监听器。

下面看看代码演示：一个计时器，启动后20s停止

layout/main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     android:layout_width="fill_parent"
 5     android:layout_height="fill_parent"
 6     android:gravity="center_horizontal"
 7     >
 8 <Chronometer
 9     android:id="@+id/test"  
10     android:layout_width="wrap_content" 
11     android:layout_height="wrap_content" 
12     android:textSize="12pt"
13     android:textColor="#ffff0000"
14     />
15 <Button
16     android:id="@+id/start"  
17     android:layout_width="wrap_content" 
18     android:layout_height="wrap_content" 
19     android:text="启动"
20     />        
21 </LinearLayout>

com.example.chronometertest.MainActivity.java

 1 package com.example.chronometertest;
 2 
 3 import android.support.v7.app.ActionBarActivity;
 4 import android.support.v7.app.ActionBar;
 5 import android.support.v4.app.Fragment;
 6 import android.os.Bundle;
 7 import android.os.SystemClock;
 8 import android.view.LayoutInflater;
 9 import android.view.Menu;
10 import android.view.MenuItem;
11 import android.view.View;
12 import android.view.View.OnClickListener;
13 import android.view.ViewGroup;
14 import android.widget.Button;
15 import android.widget.Chronometer;
16 import android.widget.Chronometer.OnChronometerTickListener;
17 import android.os.Build;
18 
19 public class MainActivity extends ActionBarActivity {
20 
21     @Override
22     protected void onCreate(Bundle savedInstanceState) {
23         super.onCreate(savedInstanceState);
24         setContentView(R.layout.main);
25         //获取计时器组件
26         final Chronometer ch = (Chronometer) findViewById(R.id.test);
27         //获取开始按钮
28         Button bu = (Button) findViewById(R.id.start);
29         bu.setOnClickListener(new OnClickListener() {
30             
31             @Override
32             public void onClick(View arg0) {
33                 //设置开始计时
34                 ch.setBase(SystemClock.elapsedRealtime());
35                 //启动计时器
36                 ch.start();
37             }
38         });
39         
40         ch.setOnChronometerTickListener(new OnChronometerTickListener() {
41             
42             @Override
43             public void onChronometerTick(Chronometer ch) {
44                 // 如果从开始到现在超过了20s
45                 if (SystemClock.elapsedRealtime() - ch.getBase() > 20 * 1000) {
46                     ch.stop();
47                 }
48                 
49             }
50         });
51     }
52 }