第5讲 Android用户界面(三)

上讲回顾 用户界面的RadioButton、RadioGroup、CheckBox、Toast、Progress、Dialog等基本控件的功能 用户界面的RadioButton、RadioGroup、 CheckBox、Toast、Progress、Dialog等基本控 件的使用方法 实验内容计算器编码

教学目标 掌握用户界面的Spinner、ListView基本控件的功能 掌握界面布局(LinearLayout,TableLayout, RelativeLayout,AbsoluteLayout等)的使用方法和技巧 Android三种菜单，选项菜单、子菜单、上下文菜单的使用方法

Spinner控件的使用 Spinner是一种能够从多个选项中选一项的控件，类似于桌面程序的组合框（ComboBox），但没有组合框的下拉菜单，而是使用浮动菜单为用户提供选择

Spinner控件的使用 在布局layout文件夹下的布局文件中声明控件 在资源res文件夹下的arrays.xml声明变量 <TextView android:id="@+id/textView1" android:text="请选择证件类型：" android:layout_height="wrap_content" android:layout_width="wrap_content"/> <Spinner android:entries="@array/ctype" android:layout_width="wrap_content" android:id="@+id/spinner1"/> <Button android:text="提交" android:id="@+id/button1" android:layout_height="wrap_content"/> 在资源res文件夹下的arrays.xml声明变量 (若没有则新建该文件) 若不在界面android:entries=“ @array/ctype”指定列表项，在Java代码中指定列表内容？ <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="ctype"> <item>身份证</item> <item>学生证</item> <item>军人证</item> <item>工作证</item> <item>其他</item> </string-array> </resources>

ListView控件的使用 ListView列表视图是最常用的一种视图组件，以垂直列表的形式列出需要显示的列表项。

ListView控件的使用 在布局layout文件夹下的布局文件中声明控件 <ListView android:id="@+id/listView1" android:entries="@array/ctype" android:layout_height="wrap_content" android:layout_width="match_parent"/> 在资源res文件夹下的arrays.xml文件(若没有则新建改文件)中声明变量： <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="ctype"> <item>情景模式</item> <item>主题模式</item> <item>手机</item> <item>程序管理</item> <item>通话设置</item> <item>连接功能</item> </string-array> </resources> 若不在界面android:entries=“ @array/ctype”指定列表项，在Java代码中指定列表内容？ 提示：Array适配器 源码：\课件对应源码\5\4.13 \课件对应源码\5\4.15

界面布局 界面布局Layout定义了界面中所有的元素、结构和相互关系

界面布局 布局管理器 功能：管理android应用的用户界面里的各种控件 常用的界面布局 线性布局 表格布局 相对布局 帧布局 绝对布局

线性布局——LinearLayout 线性布局（LinearLayout） 使用频率 特点 最简单，Android开发者使用得最多的布局类型之一 特点 在线性布局中，所有的子元素都按照垂直或水平的顺序在界面上排列 如果垂直排列，则每行仅包含一个界面元素 如果水平排列，则每列仅包含一个界面元素

线性布局——LinearLayout 线性布局（LinearLayout）的常用属性及对应方法 属性名称 对应方法 功能描述 android: orientation setOrientation(int) Should the layout be a column or a row? Use "horizontal" for a row, "vertical" for a column.  android: gravity setGravity(int) Specifies how an object should position its content, on both the X and Y axes, within its own bounds. 

线性布局——LinearLayout android: gravity可取的属性及说明

线性布局——LinearLayout <LinearLayout --------指定布局方式xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation=“vertical”> ------指定所包含子元素的排列方式 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/usrname" /> <EditText android:id="@+id/et1" android:layout_width="fill_parent" android:layout_height="wrap_content"/> <Button android:id="@+id/btok" android:layout_width=“wrap_content" android:text="@string/ok"/> android:id="@+id/btcancel" android:text="@string/cancel"/> </LinearLayout>

表格布局——TableLayout 使用频率 特点 常用的界面布局 将屏幕划分网格，通过指定行和列的形式来管理UI组件，TableLayout并不需要明确地声明包含多少行、多少列，而是通过添加TableRow、其他组件来控制表格的行数和列数 TableLayout中添加一个TableRow，该TableRow就是一个表格行，TableRow也是容器，因此可以不断地添加其他组件，每添加一个子控件该表格就增加一列 TableLayout中添加一个TableRow，该TableRow就是一个表格行，每添加一个TableRow该表格就增加一行

表格布局——TableLayout 常用属性 属性 功能 android:stretchColumns 指定伸展的列(自零始)，即该列的所有单元格的宽度可以被拉伸，以保证组件能完全填满表格空余空间 android:shrinkColumns 指定收缩的列(自零始)，即列的所有单元格的宽度可以被收缩，以保证该表格能适应父容器的宽度 android:collapseColumns 指定要隐藏的列(自零始)，该列的所有单元格会被隐藏

表格布局——TableLayout 注意：网格的边界对用户是不可见的 表格布局效果图 表格布局示意图 Row 1 Row 2 表格布局 TextView EditText Row 1 Button Row 2 表格布局 表格布局示意图 注意：网格的边界对用户是不可见的

表格布局——TableLayout 布局方式 某列在其所在的行做最大程度拉伸 0行0列 0行 0行1列 1行0列 1行 1行1列 xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="0,1"> <TableRow android:layout_height="wrap_content"> <TextView android:layout_height="wrap_content" android:text="@string/usrname" android:gravity="right"/> <EditText android:id="@+id/edittext" android:layout_height="wrap_content"/> </TableRow> <Button android:id="@+id/btnok" android:text="@string/ok" /> android:id="@+id/btncancel" android:text="@string/cancel" /> </TableLayout> 某列在其所在的行做最大程度拉伸 0行 0行0列 0行1列 1行 1行0列 1行1列

相对布局——RelativeLayout 特点 是一种非常灵活的布局方式，能够通过指定界面元素与其他元素的相对位置关系，确定界面中所有元素的布局位置 出于性能考虑，在设计相对布局时要按照控件之间的依赖关系排列，如View B 的位置相对于View A来决定，则需要保证在布局文件中ViewA 在View B 的前面。 优点：能够最大程度保证在各种屏幕类型的手机上正确显示界面布局

相对布局——RelativeLayout 只取true 或false 的属性及说明：参考父控件设置当前控件的位置（属性名称中省略android:layout_） 属性名称 说明 centerHorizontal 当前控件位于父控件的横向中间位置 centerVertical 当前控件位于父控件的纵向中间位置 centerInParent 当前控件位于父控件的中间位置 alignParentBottom 当前控件位于父控件的底端位置 alignParentLeft 当前控件位于父控件的左侧位置 alignParentRight 当前控件位于父控件的右侧位置 alignParentTop 当前控件位于父控件的顶端位置

相对布局——RelativeLayout 取值为其他控件ID的属性及说明 以其他控件为参考（属性名称中省略android:layout_） 属性名称 说明 toLeftOf 使当前控件位于给出ID的右侧 toRightOf 使当前控件位于给出ID的左侧 above 使当前控件位于给出ID的上方 below 使当前控件位于给出ID的下方 alignTop 使当前控件的上边界与给出ID的上边界对齐 alignBottom 使当前控件的下边界与给出ID的下边界对齐 alignLeft 使当前控件的左边界与给出ID的左边界对齐 alignRight 使当前控件的右边界与给出ID的右边界对齐

相对布局——RelativeLayout 取值为像素的属性及说明 属性名称中省略android:layout_ 注意问题：相对布局中不允许存在循环依赖 当心循环规则。循环规则发生在两个控件具有互相指向的规则时。如果你在布局设计中使用了循环规则，你将会得到以下错误信息： IllegalStateException: Circular dependencies cannot exist in a RelativeLayout 属性名称 说明 marginLeft 当前控件的左侧留白 marginRight 当前控件的右侧留白 marginTop 当前控件的上侧留白 marginBottom 当前控件的下侧留白

相对布局——RelativeLayout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/usrname" /> <EditText android:id="@+id/edittext" android:layout_width="fill_parent" android:layout_below="@id/textview"/> <Button android:id="@+id/btnok" android:layout_alignParentRight="true" android:layout_below="@id/edittext" android:text="@string/ok"/> android:id="@+id/btncancel" android:layout_toLeftOf="@id/btnok" android:text="@string/cancel"/> </RelativeLayout> 文本框的正下方 与父控件的右边对齐 btnok按钮的左边

帧布局——FrameLayout 屏幕上开辟出的“特别行政区” 子控件对齐到左上角 控件会重叠 “特别行政区”大小由子控件的最大尺寸决定

帧布局——FrameLayout <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#aa0000" android:textSize="60pt" android:text="@string/big" /> android:textSize="45pt" android:textColor="#00aa00" android:text="@string/mid" /> android:textSize="30pt" android:textColor="#0000aa" android:text="@string/small" /> </FrameLayout>

绝对布局——AbsoluteLayout 绝对布局是一种不推荐使用的界面布局，因为通过X轴和Y轴确定界面元素位置后，Android系统不能够根据不同屏幕对界面元素的位置进行调整，降低了界面布局对不同类型和尺寸屏幕的适应能力

界面布局的嵌套 布局的嵌套是指相同或者不同类型的布局之间可以嵌套使用，其目的是为了利用不同布局的特性，方便构建我们想要得到的图案

菜单 功能：能够在不占用界面空间的前提下，为应用程序提供统一的功能和设置界面 Android系统中提供了三类菜单： 选项菜单 子菜单 上下文菜单

菜单资源文件 菜单资源文件通常放置在res/menu目录，菜单资源根元素通常是<menu></menu>标记，在该标记中可以包含以下两个子元素： <item></item> 标记，用于定义菜单项 <group></group>标记，用于将多个<item></item>标记定义的菜单包装成一个菜单组

选项菜单 Optionmenu：较为常见，一般在单击设备上的菜单按钮后就会跳出相应的选项菜单供用户选择 Android4.0前选项菜单默认样式 由Android4.0后的样式修改回到老样式(左图) AndroidManifest文件application节点添加： android:theme="@android:style/Theme

选项菜单 Java步骤： 1.重写Activity中的onCreateOptionsMenu()方法 2.重写onOptionsItemSelected()方法，用于当菜单项被选择时，做出相应的处理 代码-Java源码： @Override public boolean onCreateOptionsMenu(Menu menu) { //getMenuInflater().inflate(R.menu.main, menu); menu.add(Menu.NONE, 1, 1, "添加").setIcon(android.R.drawable.ic_menu_add); //组号 唯一的ID号 排序号 标题 menu.add(Menu.NONE, 2, 2, "保存").setIcon(android.R.drawable.ic_menu_save); menu.add(Menu.NONE, 3, 3, "发送").setIcon(android.R.drawable.ic_menu_send); menu.add(Menu.NONE, 4, 4, "详细").setIcon(android.R.drawable.ic_menu_info_details); menu.add(Menu.NONE, 5, 5, "帮助").setIcon(android.R.drawable.ic_menu_help); menu.add(Menu.NONE, 6, 6, "More").setIcon(android.R.drawable.ic_menu_share); menu.add(Menu.NONE, 7, 7, "分享").setIcon(android.R.drawable.ic_menu_share); return true; }

子菜单 Submenu：是在单击菜单的某个选项后会弹出的相应子菜单 子菜单不可嵌套，即不可含有其他的子菜单

子菜单 Add SubMenu Add SubMenu’s menu item Java步骤： 1.重写Activity中的onCreateOptionsMenu()方法 2.重写onOptionsItemSelected()方法，用于当菜单项被选择时，做出相应的处理 代码-Java源码： @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); SubMenu File = menu.addSubMenu("文件"); File.setIcon(android.R.drawable.ic_menu_add); menu.add(Menu.NONE, 2, 2, "保存").setIcon(android.R.drawable.ic_menu_save); menu.add(Menu.NONE, 3, 3, "发送").setIcon(android.R.drawable.ic_menu_send); menu.add(Menu.NONE, 4, 4, "详细").setIcon(android.R.drawable.ic_menu_info_details); File.add(Menu.NONE, 5, 1, "新建"); File.add(Menu.NONE, 6, 2, "打开"); File.add(Menu.NONE, 7, 3, "关闭"); File.add(Menu.NONE, 8, 4, "保存"); return true; } Add SubMenu Add SubMenu’s menu item

上下文菜单 Contextmenu：是在用户长按某个视图后弹出的一个悬浮菜单 所有视图都可以注册上下文菜单 常使用于ListView中的item

上下文菜单 Java步骤： 1.在Activity的onCreate()方法中注册上下文菜单 2.重写Activity中的onCreateContextMenu()方法 3.重写onContextItemSelected()方法，用于当菜单项被选择时，做出相应的处理 代码-Java源码： protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); listview=(ListView)findViewById(R.id.listview); this.registerForContextMenu(listview); //listview.setOnCreateContextMenuListener(this); ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_dropdown_item_1line,x); listview.setAdapter(adapter); } public void  onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) { menu.setHeaderTitle("联系人号码操作"); menu.add(Menu.NONE, 1, 2, "删除"); menu.add(Menu.NONE, 2, 3, "修改"); menu.add(Menu.NONE, 3, 4, "保存"); }

本讲内容回顾 用户控件 Spinner、ListView的使用 界面布局(LinearLayout,TableLayout, RelativeLayout,AbsoluteLayout等)的特点 RelativeLayout,AbsoluteLayout等)的使用方法和技巧 Android三种菜单，选项菜单、子菜单、上下文菜单的使用方法

作业与实验 书面作业： 实验 (1 )罗列5种界面布局管理器的名称及特点。 (2)参考下图中界面控件的摆放位置，使用嵌套布局方法实现用户界面。(代码) 实验 用户界面设计