Android 自学之基本界面组件(下)
时间：2014-05-26 18:21:54
收藏：0
阅读：371
按钮(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 }
评论（0）