实验二:UI设计
实验目的
本次实验的目的是让大家熟悉Android开发中的UI设计,包括了解和熟悉常用控件的使用、界面布局和事件处理等内容。
实验要求
1. 熟悉和掌握界面控件设计 2. 了解Android界面布局 3. 掌握控件的事件处理
实验内容
一、常用控件
1.常用控件介绍
Android中有许多常用控件(简单分类): 文本框:TextView、EditText
按钮:Button、RadioButton、RadioGroup、CheckBox、ImageButton 列表:List、ExpandableListView、Spinner、AutoCompleteTextView、GridView、ImageView
进度条:ProgressBar、ProgressDialog、SeekBar、RatingBar 选择器:DatePicker、TimePicker 菜单:Menu、ContentMenu 对话框:Dialog、ProgressDialog
常用的控件有文本框、按钮和列表等。
2.控件的实现
在上一个实验中,我们用TextView实现了在界面显示一句“Hello The Android World!”。
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textView = new TextView(this);
第 8 页
}
textView.setText(\); setContentView(textView);
现在我们来看一看.xml文件和编码的相互关系。 在HelloWorld.java中敲入如下代码: package tju.scs.android.test; import android.app.Activity; import android.os.Bundle; import android.widget.Button; import android.widget.TextView;
public class HelloWorld extends Activity {
/** Called when the activity is first created. */ @Override
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);
TextView textView = (TextView)findViewById(R.id.textView01); Button button = (Button)findViewById(R.id.button01); } }
注意在上面并没有为textView和button设置文本内容等,另外textView的初始化代码为:
TextView textView = (TextView)findViewById(R.id.textView01);
此处初始化用到了id为textView01的TextView。 在项目目录中找到/res/layout/main.xml,如下:
android:layout_width=\ android:layout_height=\ > android:layout_height=\ android:text=\ />
3.控件的属性
可以直接在类中为控件设置属性,也可以在xml文件中设置属性。每个控件都有一系列的属性,例如id、size、text、color等等,大家可以找找API查看控件的属性。
二、界面布局
Android中有很多布局: ? FrameLayout:最简单的一个布局对象。它里面只显示一个显示对象。Android
屏幕元素中所有的显示对象都将会固定在屏幕的左上角,不能指定位置。但允许有多个显示对象,但后一个将会直接在前一个之上进行覆盖显示,把前一个部份或全部挡住(除非后一个是透明的)。
? LinearLayout:以单一方向对其中的显示对象进行排列显示,如以垂直排列
显示,则布局管理器中将只有一列;如以水平排列显示,则布局管理器中将只有一行。同时,它还可以对个别的显示对象设置显示比例。
? TableLayout:以拥有任意行列的表格对显示对象进行布局,每个显示对象
第 10 页
被分配到各自的单元格之中,但单元格的边框线不可见。
? AbsoluteLayout:允许以坐标的方式,指定显示对象的具体位置,左上角的
坐标为(0, 0),向下及向右,坐标值变大。这种布局管理器由于显示对象的位置定死了,所以在不同的设备上,有可能会出现最终的显示效果不一致。 ? RelativeLayout:允许通过指定显示对象相对于其它显示对象或父级对象的
相对位置来布局。如一个按钮可以放于另一个按钮的右边,或者可以放在布局管理器的中央。
布局中可以放置控件,而每个布局又可以嵌套其他布局,这种思想和之前学习java的布局是一样的。 例如在main.xml中如下布局:
android:orientation=\ android:layout_width=\ android:layout_height=\ > android:orientation=\ android:layout_width=\ android:layout_height=\ android:layout_weight=\ android:text=\ android:gravity=\ android:background=\ android:layout_width=\ android:layout_height=\ android:layout_weight=\ android:text=\ android:gravity=\ android:background=\ android:layout_width=\ android:layout_height=\ android:layout_weight=\ android:text=\ android:gravity=\ android:background=\ android:layout_width=\ android:layout_height=\ android:layout_weight=\ 第 11 页 android:text=\ android:gravity=\ android:background=\ android:layout_width=\ android:layout_height=\ android:layout_weight=\ 在一个LinearLayout布局下嵌套了两个LinearLayout,出来的效果如下图所示: 第 12 页