移动平台UI交互设计与开发第5章-Android课件.ppt

1、第第5 5章章 Android AndroidUIUI常用基本控件常用基本控件移动平台UI交互设计与开发知识技能目标： 了解用户界面基本控件的使用方法 掌握UI界面布局的特点和使用方法 掌握TextView与EditText的功能和用法 掌握Button与ToggleButton的功能和用法 掌握ImageView与ImageButton的功能和用法 掌握RadioButton与CheckBox的功能和用法 掌握DatePicker与TimePicker的功能和用法 掌握菜单的使用方法 掌握对话框的使用方法目录：5.1 UI界面布局界面布局5.2UI界面控件界面控件5.3菜单菜单5.4对话框对

2、话框5.5 知识与技能梳理知识与技能梳理5.1 UI界面布局界面布局 5.1.1线性布局LinearLayout 线性布局是最简单的布局之一，它提供了控件水平或者垂直排列的模型。 同时，使用此布局时可以通过设置控件的Weight参数控制各个控件在容器的相对大小。 线性布局不会换行，当组件一个挨着一个排列到头之后，剩下的组件将不会被显示出来。 表5-1给出了LinearLayout常用的XML属性及相关方法的说明。 在线性布局中使用gravity属性来设置控件的对齐方式。gravity可取的值及说明方法如表5-2所示。5.1.1线性布局LinearLayoutXML L相关方法说明android

3、:gravitysetGravity(int)设置布局管理器内组件的对齐方式。android:orientationsetOrientation(int)设置布局管理器内组件的排列方式。可以设置horizontal(vertical（垂直排列）表5-15.1.1线性布局LinearLayout 表5-2 属性值属性值说明top不改变控件大小，对齐到容器顶部bottom不改变控件大小，对齐到容器底部left不改变控件大小，对齐到容器左侧right不改变控件大小，对齐到容器右侧center_vertical不改变控件大小，对齐到容器纵向中央位置center_horizontal不改变控件大小，对齐

4、到容器横向中央位置center不改变控件大小，对齐到容器中央位置fill_vertical若有可能，纵向拉伸以填充容器fill_horizontal若有可能，横向拉伸以填充容器fill若有可能，纵向横向同时拉伸以填充容器5.1.1线性布局LinearLayout程序清单：5.1 UI界面布局下的LinearLayoutTest文件夹，示范了如何使用LinearLayout来管理组件的布局。定义了一个简单的线性布局，并在线性布局中定义了一个文本框，一个编辑框和一个按钮，所有组件居中显示。 5.1.2表格布局TableLayout 表格布局由TableLayout所表示，表格布局采用行、列的形式来

5、管理UI组件，TableLayout并不需要明确地声明包含多少行，多少列,而是通过添加TableRow、其他组件来控制表格的行数和列数。 在表格布局中，列的宽度由该列中最宽的那个单元格决定，整个表格布局的宽度则取决于父容器的宽度。在表格布局管理器中，可以为单元格设置如下三种行为方式。1、Shrinkable：该列的所有单元格的宽度可以被收缩，以保证该表格能适应父容器的宽度。2、Stretchable：该列的所有单元格的宽度可以被拉伸，以保证组件能完全填满表格空余空间。3、Collapsed：该列的所有表格会被隐藏。TablLayout继承了LinearLayout，因此它完全可以支持Linea

6、rLayout所支持的全部XML属性，除此之外，TableLayout还支持如表5-3所示的XML属性。5.1.2表格布局TableLayout 表5-3 XML相关方法说明android:collapseColumnssetColumnsCollapsed(int,boolean)设置需要被隐藏的列android:shrinkColumnssetShrinkAllColumns(boolean)设置允许被收缩的列android:stretchColumnssetStretchAllColumns(boolean)设置允许被拉伸的列5.1.2表格布局TableLayout 程序清单： 5.1

7、UI界面布局下TableLayoutTest文件夹，示范了如何使用TableLayout来管理组件的布局。5.1.3相对布局RelativeLayout 相对布局由RelativeLayout表示，相对布局容器内子组件的位置总是相对兄弟组件、父容器来决定，因此这种布局方式被称为相对布局。 如果A组件的位置是由B组件决定的，Android要求先定义B组件，再定义A组件。 在进行相对布局时用到的属性很多，读者可参照如表5-4、表5-5、表5-6所示进行学习。5.1.3相对布局RelativeLayout 表5-4属性名称属性说明android:layout_centerHorizontal当前控件

8、位于父控件的横向中间位置android:layout_centerVertical当前控件位于父控件的纵向中间位置android:layout_centerInparent当前控件位于父控件的中间位置android:layout_alignParentBottm当前控件底部与父控件底部对齐android:layout_alignParentLeft当前控件左侧与父控件左侧对齐android:layout_alignParentRight当前控件右侧与父控件右侧对齐android:layout_alignParentTop当前控件顶部与父控件底部对齐android:layout_alignWit

9、hParentIfMissing参照控件不存在或不可见时参照父控件5.1.3相对布局RelativeLayout 表5-5 属性名称属性名称属性说明android:layout_toRightOf使当前控件位于给出android:layout_toLeftOf使当前控件位于给出android:layout_above使当前控件位于给出android:layout_below使当前控件位于给出android:layout_alignTop使当前控件的上边界与给出android:layout_alignBottom使当前控件的下边界与给出android:layout_alignLeft使当前控件的

10、左边界与给出android:layout_alignRight使当前控件的右边界与给出5.1.3相对布局RelativeLayout 表5-6属性名称属性名称属性说明android:layout_marginLeft当前控件左侧留白android:layout_marginRight当前控件右侧留白android:layout_marginTop当前控件顶部留白android:layout_marginBottom当前控件底部留白5.1.3相对布局RelativeLayout 程序清单：5.1 UI界面布局下的RelativeLayoutTest文件夹, 示范了如何使用TableLayout来

11、管理组件。5.1.4绝对布局AbsoluteLayout 绝对布局是指屏幕中所有控件的摆放都由开发人员通过设置控件的坐标来指定，控件容器不再负责管理其子控件的位置。由于子控件的位置和布局都通过坐标来指定。程序清单：5.1 UI界面布局下的AbsoluteLayoutTest文件夹, 示范了如何使用AbsoluteLayout来管理组件的布局。5.2 UI界面控件界面控件5.2.1TextView与EditText 文本控件主要包括TextView控件和EditText控件。 其中TextView控件继承自View类，其主要功能是向用户显示文本内容，同时可选择性地让用户编辑文本。从功能上来说，T

12、extView就是一个完整的文本编辑器，只不过其本身被设置为不允许编辑，其子类EditText被设置为允许用户对内容进行编辑。 TextView提供了大量XML属性，这些XML属性大部分既可适用于TextView，又可适用于EditText，但有少量XML只能适用于其一，表5-7显示了TextView支持的XML属性及相关方法的说明。5.2.1TextView与EditText 属性名称属性名称对应方法说明android:autoLinksetAutoLint(int)设置是否将文本转换为可单击的超链接显示。android:gravitysetGravity(int)定义TextView在an

13、droid:heightsetHeight(int)定义TextView的准确高度，以像素为单位android:minHeightsetMinHeight(int)定义TextView的最小高度，以像素为单位android:maxHeightsetMaxHeight(int)定义TextView的最大高度，以像素为单位android:widthsetWidth(int)定义TextView的准确宽度，以像素为单位android:minWidthsetMinWidth(int)定义TextView的最小宽度，以像素为单位android:maxWidthsetMaxWidth(int)定义Text

14、View的最大款度，以像素为单位android:hintsetHint(int)当TextView中显示的内容为空时，显示该文本android:textsetText(CharSequence)为TextView设置显示的文本内容android:textColorsetTextColor(ColorStateList)设置TextView的文本颜色android:textSizesetTextSize(float)设置TextView的文本大小android:typefacesetTypeface(Typeface)设置TextView的文本字体 表5-7 5.2.1TextView与Edit

15、Text EditText类继承自TextView。EditText和TextView最大的不同就是用户可以对EditText控件进行编辑，同时还可以为EditText控件设置监听器，用来检测用户输入是否合法等。表5-8为EditText常用属性及相关方法说明。属性名称属性名称对应方法对应方法说明说明android:cursorVisiblesetCursorVisible(boolean)设置光标是否可见android:linessetLines(int)设置固定的行数android:maxLinessetLines(int)设置最大行数android:minLinessetMinLines

16、(int)设置最小行数android:passwordsetTransformationMethod(TransformationMethod)设置文本框的内容是否显示为密码android:phoneNumbersetKeyListener(KeyListener)设置文本框的内容是否显示为电话号码android:scorllHorizontallysetHorizontallyScorlling(boolean)设置文本框是否可以进行水平滚动android:singleLinesetTransformationMethod(TransformationMethod)设置文本框的单行模式and

17、roid:maxLengthsetFilters(InputFilter) 设置最大显示长度表5-85.2.1TextView与EditText程序清单：5.2UI界面控件下的TextViewEditTextTest文件夹, 示范了如何使用TextView控件和EditText控件 。 5.2.2Button与ToggleButton Button控件继承自TextView类，用户可以对Button控件执行按下或单击等操作。Button控件的用法很简单，主要是为Boutton控件设置View.OnClickListener监听器并在监听器的实现代码中开发按钮按下事件的处理代码。 ToggleB

18、utton由Button派生而来，它可以提供两个状态，通常用于切换程序中的某种状态。表5-9显示了ToggleButton所支持的XML属性及相关方法的说明。 5.2.2Button与ToggleButton 表5-9 XMLXML相关方法相关方法说明说明android:checkedsetChecked(boolean)设置该按钮是否被选中android:textOffsetLines(int)设置当该按钮没有被选中时显示的文本android:textOnsetLines(int)设置当该按钮被选中时显示的文本5.2.2Button与ToggleButton程序清单：5.2UI界面控件下面的

19、ButtonToggleButtonTest文件夹演示了Button与ToggleButton的用法。5.2.3ImageView与ImageButton ImageView继承自View组件，它的主要功能是用于显示图片实际上这个说法不太严谨，因为它能显示的不仅仅是图片，任何Drawable对象都可以使用ImageView来显示。表5-10显示了ImageView支持的常用XML属性及相关方法的说明。XMLXML属性属性相关方法相关方法说明说明android:adjustViewBoundssetAdjustView(boolean)设置ImageView是否调整自己的边界来保持所显示图片的长

20、宽比android:maxHeightsetMaxHeight(int)设置ImageView的最大高度android:maxWidthsetMaxWidth(int)设置ImageView的最大宽度android:scaleTypesetScaleType(ImageView.ScaleType)设置所显示的图片如何缩放或移动以适应ImageView的大小android:srcsetImageResource(int)设置ImageView所显示的Drawable对象ID5.2.3ImageView与ImageButton 同时，Image类中还有一些成员方法比较实用，其方法说明见表5-11

21、 方法名称方法名称说明setAlpha(int alpha)设置ImageView的透明度setImageBitmap(Bitmap bm)设置ImageView所显示的内容为指定的Bitmap对象setImageDrawable(Drawable drawable)设置ImageView所显示的内容为指定drawablesetImageResource(int resId)设置ImageView所显示的内容为指定id的资源setImageURI(Uri uri)设置ImageView所显示的内容为指定urisetSelected(boolean selected)设置ImageView的选中

22、状态5.2.3ImageView与ImageButton ImageButton继承了Button，Button与ImageButton的区别在于：Button生成的按钮上显示文字，而ImageButton上则显示图片。 需要指出的是：为ImageButton按钮指定android:text属性没用，即使指定了该属性，图片按钮上也不会显示任何文字。如果使用ImageButton，图片按钮可以指定android:img属性，但该按钮又不能指定文字，而且如果只是为ImageButton的android:src指定一张图片，那么该图片还是不能随用户动作来改变。5.2.3ImageView与Image

23、Button 步骤1：建立项目，准备资源。打开Eclipse工具，建立一个名为ImageViewImageButtonTest的项目，将所需的图片存放在项目的resdrawable-hdpi目录下。步骤2：修改布局文件。打开项目reslayout目录下的activity_main.xml文件，步骤3：开发界面文件。打开项目中的MainActivity.java文件步骤4：运行程序，查看效果。启动模拟器，调试该项目。在项目运行中，当我们单击“上一张”或“下一张”图片按钮时，看到模拟器界面所显示的图片不断更换，如右图所示。5.2.4 RadioButton与CheckBox 单选按钮RadioBu

24、tton和复选框CheckBox都继承了Button按钮，因此它们都可以直接使用Button支持的各种属性和方法。 RadioButton、CheckBox与普通按钮不同的是，它们多了一个可选中的功能，因此它们都可额外指定一个android:checked属性，该属性用于指定它们是否被选中。 RadioButton与CheckBox的不同之处在于，一组RadioButton只能选中其中一个, 因此RadioButton通常要与RadioGroup一起使用，用于定义一组单选按钮。表5-12所示为RadioButton控件和CheckBox控件的常用方法。5.2.4 RadioButton与Che

25、ckBox 表5-12 属性名称属性名称说明说明isChecked()判断是否被选中，如果选中返回performClick()调用setChecked(boolean checked)通过传入的参数设置控件状态toggle置反控件当前的状态setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener listener)为控件设置5.2.4 RadioButton与CheckBox 程序清单：5.2UI界面控件下RadioButtonCheckBoxTest文件夹示范了RadioButton和CheckBox的具体用法。5.2

26、.5 DatePicker与TimePicker DatePicker和TimePicker是两个比较易用的控件，它们都从FrameLayout派生而来，其中DatePicker供用户选择日期，TimePicker供用户选择时间。 DatePicker和TimePicker在FrameLayout的基础上提供了一些方法来获取当前用户所选择的日期、时间，如果程序需要获取用户选择的日期、时间，则可通过为DatePicker添加OnDateChangedListener进行监听、为TimePicker添加OnTimerChangedListener进行监听来实现。 DatePicker类和TimeP

27、icker类主要的成员方法如表5-13和表5-14所示。5.2.5 DatePicker与TimePicker 表5-13 方法名称方法名称方法说明方法说明getDayOfMonth()获取日期天数getMonth()获取日期月份getYear()获取日期年份init(int year,int monthOfYear,int dayOfMonth,DatePicker.OnDateChangedListener listener)初始化setEnabled(boolean enabled)设置日期选择控件是否可用updateDate(int year,intmonthOfYear,int da

28、yOfMonth)更新日期选择控件的各个属性值5.2.5 DatePicker与TimePicker 表5-14 方法名称方法名称方法说明方法说明getCurrentHour()获取时间选择控件的当前小时getCurrentMinute()获取时间选择控件的当前分钟is24HourView()判断时间选择控件是否是setCurrentHour()设置时间选择控件的当前小时setCurrentMinute()设置时间选择控件的当前分钟setEnabled(boolean enabled)设置时间选择控件是否可用set24HourView(boolean is24HourView)设置时间选择控件

29、是否是setOnTimeChangedListener(TimerPicker.OnTimerChangedListener listener)为时间选择控件添加5.2.5 DatePicker与TimePicker 程序清单：5.2UI界面控件下的DatePickerTimePickerTest文件夹示范DatePicker和TimePicker的功能和用法5.3 菜单菜单5.3.1选项菜单和子菜单（SubMenu） 本节将介绍选项菜单和子菜单，当Activity在前台运行时，如果用户按下手机上的Menu键，此时就会在屏幕底部弹出相应的菜单选项，但这个功能是需要开发人员编程来实现的，如果在开

30、发应用程序时没有实现该功能，那么程序运行时按下手机上的Menu键是不会起作用的。 对于带图标的选项菜单，每次最多只能显示6个，当菜单选项多于6个时，将只显示前6个和一个扩展菜单选项，单击扩展菜单选项将会弹出其余的菜单项。 在Android中通过回调方法来创建菜单并处理菜单按下的事件，除了开发回调方法onOptionsItemSelected来处理用户选中事件，还可以为每个菜单项对象添加onOptionsItemClickListener监听器来处理菜单选中事件。开发选项菜单主要用到Menu、MenuItem及SubMenu。表5-15所示为选项菜单相关的回调方法。 5.3.1选项菜单和子菜单（

31、SubMenu） 表5-15 Android系统的菜单支持主要通过4个接口来实现：Menu、SubMenu、ContextMenu、MenuItem，Menu接口只是一个父接口，该接口下有两个子接口：SubMenu和ContextMenu。方法名方法名描述描述onCreateOptionsMenu(Menu menu)初始化选项菜单，该方法只在第一次显示菜单时调用。onOptionsItemSelected(MenuItem item)当选项菜单中某个选项被选中时调用该方法onOptionsMenuClosed(Menu menu)当选项菜单关闭时调用该方法5.3.1选项菜单和子菜单（SubM

32、enu）Menu接口定义了如下方法来添加菜单或菜单项。MenuItem add(int titleRes) ：添加一个新的菜单项。MenuItem add(int groupId,int itemId,int order,Charsequence title) ：添加一个新的处于groupId组的菜单项。MenuItem add(int groupId,int itemId,int order, int titleRes) ：添加一个新的处于groupId组的菜单项。MenuItem add(Charsequence title) ：添加一个新的菜单项。SubMenu addSubMenu(i

33、nt titleRes) ：添加一个新的子菜单。SubMenu addSubMenu(int groupId,int itemId,int order, int titleRes) ：添加一个新的处于groupId组的子菜单。SubMenu addSubMenu(Charsequence title) ：添加一个新的子菜单项。SubMenu addSubMenu(int groupId,int itemId,int order,Charsequence title) ：添加一个新的处于groupId组的菜单项。5.3.1选项菜单和子菜单（SubMenu） 方法归纳起来就是两个：add()方法用

34、于添加菜单项；addSubMenu()用于添加子菜单。这些重载方法的区别只是：是否将子菜单、菜单项添加到指定菜单中，是否使用资源文件中的字符串资源来设置标题。SubMenu继承了Menu，它就代表了一个子菜单，额外提供了如下常用方法。SubMenu setHeaderIcon(Drawable icon)：设置菜单头的图标。SubMenu setHeaderIcon(int iconRes)：设置菜单头的图标。SubMenu setHeaderTitle(int titleRes)：设置菜单头的标题。SubMenu setHeaderTitle(CharSequence title)：设置菜单

35、头的标题。SubMenu setHeaderView(View view)：使用View来设置菜单头 5.3.1选项菜单和子菜单（SubMenu）程序清单：5.3菜单下的 SubMenuTest文件夹示范了如何为应用添加菜单和子菜单5.3.2上下文菜单(ContetMenu) ContetMenu继承自Menu。上下文菜单不同于选项菜单，选项菜单服务于Activity，而上下文菜单时注册到某个View对象上的。如果一个View对象注册了上下文菜单，用户可以通过长按该View对象呼出上下文菜单。上下文菜单不支持快捷键（shortcut），其菜单选项也不能附带图标，但是可以为其指定图标。使用上下文

36、菜单时常用到Activity类的成员方法，如表5-16所示。5.3.2上下文菜单(ContetMenu) 表5-16方法名称方法名称方法说明方法说明onCreateContextMenu(ContextMenu menu,Viewv,ContextMenu.ContextMenuInfo menuInfo)每次为View对象呼出上下文菜单时都将调用该方法onContextItemSelected(MenuItem item)当用户选择了上下文菜单选项后调用该方法进行处理onContextMenuClosed(Menu menu)当上下文菜单被关闭时调用该方法registerForContext

37、Menu(View view)为指定的View对象注册一个上下文菜单5.3.2上下文菜单(ContetMenu)程序清单：程序清单：5.3菜单下面的菜单下面的ContetMenuTest文件夹示范了如何使用上下文菜单。示范了如何使用上下文菜单。5.4 对话框对话框5.4.1普通对话框 AlertDialog的功能很强大，它提供了一些方法来生成4中预定义对话框。带消息、带N个按钮的提示对话框。带列表、带N个按钮的列表对话框。带多个单选列表项、带N个按钮的对话框。带多个多选列表项、带N个按钮的对话框。 除此之外，AlertDialog也可以创建界面自定义的对话框。使用AlertDialog创建对话

38、框大致按如下步骤进行：创建AlertDialog.Builder对象，该对象是AlertDialog的创建器。调用AlertDialog.Builder的方法为对话框设置图标、标题、内容等。调用AlertDialog.Builder的create()方法创建AlertDialog对话框。调用AlertDialog的show()方法显示对话框。5.4.1普通对话框 程序清单：5.4对话框下面的AlertDialogTest文件夹示范了AlertDialog的用法。5.4.2列表对话框 列表对话框也属于AlertDialog，5.4对话框下面的ListDialogTest示范了列表对话框的具体用法

39、。5.4.3单选和复选对话框 单选按钮对话框和复选框同样是通过AlertDialog来实现，只要调用AlertDialog.Builder的setSingleChoiceItems方法即可创建一个单选列表对话框，调用AlertDialog.Builder的setMultieChoiceItems方法即可创建一个多选列表的对话框。本节我们仍然通过一个案例来学习。 程序清单： 5.4对话框下的RadioCheckDialogTest文件夹示范了单选和复选对话框的使用。 5.4.3单选和复选对话框 5.5 知识与技能梳理知识与技能梳理 本章主要介绍了Android应用界面开发的相关知识，对于一个手机

40、应用来说，它面临的最终用户都是不太懂软件的普通人，这批用户第一眼看到的就是软件界面，因此为Android系统提供一个友好的用户界面十分重要。学习本章需要重点掌握View的功能和用法； Android系统所有的基本UI组件都需要重点掌握。 除此之外，用户界面少不了需要对话框与菜单，Android为对话框提供了AlertDialog类，为菜单支持提供了SubMenu、ContextMenu、MenuItem等API，读者必须掌握这些API用法，并能通过它们为Android应用添加菜单支持。实训4一、实训目的 1、巩固读者对Android UI常用基本控件的认识，熟练掌握Android UI常用基本控件的使用方法。 2、通过本章实训，让读者在Android环境下开发UI界面，为以后Android应用程序的开发打好基础。 3、在实训过程中，突出实践技能，注重读者的需求沟通和需求分析能力的培养。二、实训内容 1、准备数字09和”+”,”-”,”*”,”/”,”=”,”DEL（清除）”,”背景”17张图片素材。实训4 2、新建工程，将图片资源导入到工程。3、编写界面布局文件：选择合适的布局方式，添加一个编辑框，设为不可输入状态，再添加需要的按钮控件，把每个按钮的背景图片换为导入的图片。实训4 三、模拟运行结果期待你的创意设计