第2章  Android应用的界面编程.

Presentation on theme: "第2章  Android应用的界面编程."— Presentation transcript:

1 第2章  Android应用的界面编程

2 2.1 界面编程与视图（View）组件 2.1.1 视图组件与容器组件 2.1.2 使用XML布局文件控制UI界面
2.1.1  视图组件与容器组件 2.1.2  使用XML布局文件控制UI界面 2.1.3  在代码中控制UI界面 2.1.4  使用XML布局文件和Java代码混合控制UI界面

3 2.1.1  视图组件与容器组件 在Android中，所有的UI界面都是由View类和ViewGroup类及其子类组合而成的。其中，View类是所有UI组件的基类，而ViewGroup类是容纳这些UI组件的容器，其本身也是View类的子类。在ViewGroup类中，除了可以包含普通的View类外，还可以再次包含ViewGroup类。

4 2.1.2 使用XML布局文件控制UI界面 使用XML布局文件控制UI界面可以分为以下两个关键步骤。
（1）在Android应用的res/layout目录下编写XML布局文件，可以是任何符合Java命名规则的文件名。创建后，R.java会自动收录该布局资源。使用下面语句访问。 findViewById(R.id.id); （2）在Activity中使用以下Java代码显示XML文件中布局的内容。 setContentView(R.layout.main);

5 2.1.3 在代码中控制UI界面 在代码中控制UI界面可以分为以下3个关键步骤。 （1）创建布局管理器。
（2）创建具体的组件，可以是TextView、ImageView、EditText和Button等，并且设置组件的布局和各种属性。 （3）将创建的具体组件添加到布局管理器中。 实例CodeView

6 2.1.4 使用XML布局文件和Java代码混合控制UI界面
变化小、行为比较固定的组件 Java代码 变化较多、行为控制比较复杂的组件 MixView

7 2.1.5开发自定义view CustomView

8 安装adt和AVD注意事项 1，疯狂android讲义光盘，codes文件夹复制到硬盘，改权限为可读写，去掉只读。
2，虚拟机AVD设备的API版本大于10，android的2.3.3以上。 3，虚拟机的屏幕分辨率不要太大，400*800以内合适，内存不要设置太大512M合适，否则，虚拟机占PC内存启动不了。 4，环境变量是在path后面续接，而不是修改，设好环境变量后，在cmd下执行adb和javac，以测试环境变量设置安装成功。

9 2.2 第1组UI组件：布局管理器 2.2.1 线性布局 2.2.2 表格布局 2.2.3 帧布局 2.2.4 相对布局
2.2.1  线性布局 2.2.2  表格布局 2.2.3  帧布局 2.2.4  相对布局 2.2.5  网格布局 2.2.6  绝对布局

10 布局管理器本身就是UI组件

11 线性布局 LinearLayoutTest
在线性布局中，每一行（针对垂直排列）或每一列（针对水平排列）中只能放一个组件。不会换行，当组件一个挨着一个排列到窗体的边缘后，剩下的组件将不会被显示出来。 在Android中，可以在XML布局文件中定义线性布局管理器，也可以使用Java代码来创建。推荐使用在XML布局文件中定义线性布局管理器。在XML布局文件中定义线性布局管理器，需要使用<LinearLayout>标记，其基本的语法格式如下： <LinearLayout xmlns:android=" 属性列表 > </LinearLayout> LinearLayoutTest

12 表格布局 表格布局与常见的表格类似，它以行、列的形式来管理放入其中的UI组件。表格布局使用<TableLayout>标记定义，在表格布局中，可以添加多个<TableRow>标记，每个<TableRow>标记占用一行，由于<TableRow>标记也是容器，所以在该标记中还可添加其他组件，在<TableRow>标记中，每添加一个组件，表格就会增加一列。在表格布局中，列可以被隐藏，也可以被设置为伸展的，从而填充可利用的屏幕空间，也可以设置为强制收缩，直到表格匹配屏幕大小。

13 表格布局 在XML布局文件中定义表格布局管理器的基本的语法格式如下：
<TableLayout xmlns:android=" 属性列表 > <TableRow 属性列表> 需要添加的UI组件 </TableRow> 多个<TableRow> </TableLayout> XML属性 描述 android:collapseColumns 设置需要被隐藏的列的列序号（序号从0开始），多个列序号之间用逗号“,”分隔 android:shrinkColumns 设置允许被收缩的列的列序号（序号从0开始），多个列序号之间用逗号“,”分隔 android:stretchColumns 设置允许被拉伸的列的列序号（序号从0开始），多个列序号之间用逗号“,”分隔

14 相对布局 相对布局是指按照组件之间的相对位置来进行布局，如某个组件在另一个组件的左边、右边、上方或下方等。
[RelativeLayoutTest] 在XML布局文件中，定义相对布局管理器可以使用<RelativeLayout>标记，其基本的语法格式如下： <RelativeLayout xmlns:android=" 属性列表 > </RelativeLayout> XML属性 描述 android:gravity 用于设置布局管理器中各子组件的对齐方式 android:ignoreGravity 用于指定哪个组件不受gravity属性的影响

15 相对布局 RelativeLayout.LayoutParams支持的常用XML属性如下表所示。 XML属性 描述
android:layout_above 位于哪个组件的上方 android:layout_alignRight 与哪个组件的右边界对齐 android:layout_centerHorizontal 是否位于布局管理器水平居中的位置 android:layout_toRightOf 位于哪个组件的右侧

16 网格布局 GridLayoutTest 横跨4列的文本 横跨4列的按钮 程序生成的4×4按钮

17 绝对路径 AbsoluteLayoutTest

18 2.3 第2组UI组件： TextView及其子类 2.3.1 文本框（TextView）与编辑框（EditText）
2.3.3  按钮（Button）组件的功能和用法 2.3.5  单选按钮（RadioButton）复选框（CheckBox）

19

20 2.3.1 TextView的功能和用法 文本框（TextView），用于在屏幕上显示文本。 文本框 <TextView 属性列表
> </TextView> [TextViewTest][TextViewTest2]

21 2.3.2 EditText的功能与用法 编辑框（EditText），用于在屏幕上显示可编辑的文本框。
EditText是TextView类的子类。最重要的属性是inputType [InputUI] 编辑框 <EditText 属性列表 > </EditText>

22 2.3.3 按钮（Button）的功能和用法 [ButtonTest]
当用户单击按钮时，将会触发一个onClick事件，可以通过为按钮添加单击事件监听器指定所要触的动作。 android:background可以将背景设置为不同的背景图片。 按钮 <Button android:text="显示文本" android:layout_width="wrap_content" android:layout_height="wrap_content“ > </Button>

23 2.3.5 单选按钮（RadioButton）与复选框（CheckBox）的功能与用法
[CheckButtonTest] 1．单选按钮 单选按钮RadioButton类是Button的子类，所以单选按钮可以直接使用Button支持的各种属性。通常与RadioGroup一起使用。 <RadioGroup android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content"> <!-- 添加多个RadioButton组件 --> <RadioButton android:text="显示文本" android:checked="true|false" </RadioButton> </RadioGroup>

24 2.3.5 单选按钮（RadioButton）与复选框（CheckBox）的功能与用法
2．复选按钮 在Android中，复选按钮使用CheckBox表示，而CheckBox类又是Button的子类，所以复选按钮可以直接使用Button支持的各种属性。在XML布局文件中添加复选按钮的基本格式如下： <CheckBox android:text="显示文本" android:layout_width="wrap_content" android:layout_height="wrap_content"> </CheckBox>

25 2.4 第3组UI组件：ImageView及其子类
在使用ImageView组件显示图像时，通常可以将要显示的图片放置在res/drawable目录中，然后应用下面的代码将其显示在布局管理器中。 [ImageViewTest] <ImageView 属性列表 > </ImageView>

26 2.4 第3组UI组件：ImageView及其子类
XML属性 描述 android:scaleType fitXY（对图片横向、纵向独立缩放，使得该图片完全适应于该ImageView，图片的纵横比可能会改变） fitCenter（保持纵横比缩放图片，直到该图片能完全显示在ImageView中，缩放完成后该图片放在ImageView的中央） android:src ImageView所显示的Drawable对象的ID， android:tint 用于为图片着色，其属性值可以是“#rgb”、“#argb”、“#rrggbb”或“#aarrggbb”表示的颜色值

27 2.5 第4组UI组件：AdapterView及子类
2.5.1  列表视图（ListView）和ListActivity 2.5.2  Adapter接口及实现类 2.5.3  自动完成文本框（AutoCompleteTextView）的功能和用法 2.5.4  网格视图（GridView）功能和用法 2.5.5  可展开的列表组件（ExpandableListView） 2.5.6  Spinner的功能和用法 2.5.7  画廊视图（Gallery）的功能和用法 2.5.8  AdapterViewFlipper的功能与用法 2.5.9  StackView的功能与用法

28 2.5.1 列表视图（ListView）和ListActivity
[SimpleListViewTest] 1．直接使用ListView组件创建 在XML布局文件中添加ListView的基本格式如下： <ListView 属性列表 > </ListView> 2．让Activity继承ListActivity实现 如果程序的窗口仅仅需要显示一个列表，则可以直接让Activity继承ListActivity来实现。继承了ListActivity的类中无须调用setContentView()方法来显示页面，而是可以直接为其设置适配器，从而显示一个列表。

29 2.5.2  Adapter接口及实现类 Adapter接口：界面组件, listView,Spinner 等要用到Adpter，它是一个负责数据转换的函数。 在ListView控件和数据源之间架起一个桥梁，通过Adapter接口就可以实现将数据源中的数据显示到ListView控件中。 Adapter类型有很多种： ArrayAdapter，简单 SimpleAdapter，强大 BaseAdapter，扩展功能 [SimpleAdapterTest][BaseAdapterTest]

30 作业 2.5.5 可展开的列表组件（ExpandableListView） 实现下面的展开 1.1 Android的发展和历史
1.2.1  下载和安装Android SDK 1.2.2  安装运行、调试环境 1.2.3  安装Eclipse和ADT插件 1.3  Android常用开发工具的用法 1.3.1  在命令行创建、删除和浏览AVD 1.3.2  使用Android模拟器（Emulator） 1.3.3  使用DDMS进行调试

31 2.6 第5组UI组件：ProgressBar及其子类
2.6.2  拖动条（SeekBar）的功能和用法 2.6.3  星级评分条（RatingBar）的功能和用法

32 2.6.1 进度条（ProgressBar） [ProgressBarTest]
在Android中，进度条使用ProgressBar表示，用于向用户显示某个耗时操作完成的百分比。 在屏幕中添加进度条，可以在XML布局文件中通过<ProgressBar>标记添加，基本语法格式如下： < ProgressBar 属性列表 > </ ProgressBar>

33 2.6.1 进度条（ProgressBar） setProgress(int progress)方法：设置进度完成百分比。
XML属性 描述 android:max 用于设置进度条的最大值 android:progress 用于指定进度条的已完成的进度值 android:progressDrawable 用于设置进度条的轨道的绘制形式 setProgress(int progress)方法：设置进度完成百分比。 incrementProgressBy(int diff)方法：设置进度条的进度增加或减少。当参数值为正数时表示进度增加，为负数时表示进度减少。

34 2.7 第6组UI组件：ViewAnimator及其子类
2.7.1  ViewSwitcher的功能与用法 2.7.2  图像切换器（ImageSwitcher）的功能与用法 2.7.3  文本切换器（TextSwitcher）的功能与用法 2.7.4  ViewFlipper的功能与用法

35 2.7.2 图像切换器（ImageSwitcher）
功能： 用于实现类似于Windows操作系统下的“Windows照片查看器”中的上一张、下一张切换图片的功能。 步骤： 必须设定一个ViewFactory。 通过makeView()方法来创建用于显示图片的ImageView。 用setImageResource()方法指定要在ImageSwitcher中显示的图片资源。

36 作业 图像切换器 （ImageSwitcher） 添加“下一张“ ”上一张“ 按钮，切换图片

37 2.8 各种杂项组件 2.8.1 使用Toast显示提示信息框 2.8.2 日历视图（CalendarView）组件的功能和用法
2.8  各种杂项组件 2.8.1  使用Toast显示提示信息框 2.8.2  日历视图（CalendarView）组件的功能和用法 2.8.3  日期、时间选择器（DatePicker和TimePicker）的功能和用法 2.8.4  数值选择器（NumberPicker）的功能与用法 2.8.5  搜索框（SearchView）的功能与用法 2.8.6  选项卡（TabHost）的功能和用法 2.8.7  滚动视图（ScrollView）的功能和用法 2.8.8  Notification的功能与用法

38 2.8.1 使用Toast显示提示信息框 简单用法 显示一个复杂布局
Toast.makeText(MainActivity.this,“提示信息文字", Toast.LENGTH_SHORT).show(); 显示一个复杂布局 new Toast 设置布局管理器layout Toast.setView(layout)

39 2.8.3 日期、时间选择器（DatePicker和TimePicker）的功能和用法
功能：选择日期和时间 为了在程序中获取用户选择的日期、时间，需要为DatePicker组件和TimePicker组件添加事件监听器。 DatePicker的监听器是OnDateChangedListener TimePicker的监听器是OnTimeChangedListener

40 2.8.6  选项卡（TabHost）的功能和用法 选项卡主要由TabHost、TabWidget和FrameLayout 3个组件组成，用于实现一个多标签页的用户界面，通过它可以将一个复杂的对话框分割成若干个标签页，实现对信息的分类显示和管理。使用该组件不仅可以使界面简洁大方，还可以有效地减少窗体的个数。 实现选项卡的步骤： （1）在布局文件中添加实现选项卡所需的TabHost、TabWidget和FrameLayout组件。 （2）编写各标签页要显示的XML布局文件。 （3）在Activity中，获取并初始化TabHost组件。 （4）为TabHost对象添加标签页。

41 2.8.8 Notification的功能与用法 显示在状态栏的通知 程序通过NotificationManager服务来发送通知
允许设置：文字内容，图片，声音，震动，灯光

42 2.9 对话框 2.9.1 使用AlertDialog创建对话框 2.9.2 对话框风格的窗口 2.9.3 使用PopupWindow
2.9  对话框 2.9.1  使用AlertDialog创建对话框 2.9.2  对话框风格的窗口 2.9.3  使用PopupWindow 2.9.4  使用DatePickerDialog、TimePickerDialog 2.9.5  使用ProgressDialog创建进度对话框

43 2.9.1 使用AlertDialog创建对话框 使用AlertDialog可以生成的对话框。 ◆ 带确定、中立和取消按钮的提示对话框。
◆ 带确定、中立和取消按钮的提示对话框。 ◆ 带列表的列表对话框。 ◆ 带多个单选列表项和按钮的列表对话框。 ◆ 带多个多选列表项和按钮的列表对话框。

44 2.9.1 使用AlertDialog创建对话框 方法 描述 setTitle(CharSequence title) 用于为对话框设置标题
setIcon(Drawable icon) 用于为对话框设置图标 setIcon(int resId) setMessage( message) 用于为提示对话框设置内容 setNegativeButton() 用于为对话框添加取消按钮 setPositiveButton() 用于为对话框添加确定按钮 setNeutralButton() 用于为对话框添加中立按钮 setItems() 用于为对话框添加列表项 setSingleChoiceItems() 用于为对话框添加单选列表项 setMultiChoiceItems() 用于为对话框添加多选列表项

45 2.10 菜单 2.10.1 选项菜单和子菜单（SubMenu） 2.10.2 使用监听器来监听菜单事件
2.10  菜单 2.10.1  选项菜单和子菜单（SubMenu） 2.10.2  使用监听器来监听菜单事件 2.10.3  创建复选菜单项和单选菜单项 2.10.4  设置与菜单项关联的Activity 2.10.5  上下文菜单 2.10.6  使用XML文件定义菜单 2.10.7  使用PopupMenu创建弹出式菜单

46 2.10.6  使用XML文件定义菜单 菜单资源文件通常应该放置在res/menu目录下，在创建项目时，默认是不自动创建menu目录的，所以需要我们手动创建。 菜单资源的根元素通常是<menu></menu>标记，在该标记中可以包含以下子元素。 ◆ <item></item>标记：用于定义菜单项。 ◆ <menu></menu>子菜单。 属性 描述 android:id 用于为菜单项设置ID，也就是唯一标识 android:title 用于为菜单项设置标题 android:icon 用于为菜单项指定图标 android:enabled 用于指定该菜单项是否可用 android:checkable 用于指定该菜单项是否可选

47 2.10.6  使用XML文件定义菜单 ◆ <group></group>标记：用于将多个<item></item>标记定义的菜单包装成一个菜单组 。 属性 描述 android:id 用于为菜单组设置ID，也就是唯一标识 android:heckableBehavior 用于指定菜单组内各项菜单项的选择行为，可选值为none（不可选）、all（多选）和single（单选） android:menuCategory 用于对菜单进行分类，指定菜单的优先级，可选值为container、system、secondary和alternative android:enabled 用于指定该菜单组中的全部菜单项是否可用 android:visible 用于指定该菜单组中的全部菜单项是否见

48 2.10.6 使用XML文件定义菜单 1．选项菜单 单击设备上的菜单按键时，弹出的菜单就是选项菜单。 2．上下文菜单
（1）重写Activity中的onCreateOptionsMenu()方法。 （2）重写onOptionsItemSelected()方法，用于当菜单项被选择时，作出相应的处理。 2．上下文菜单 长时间按键不放时，弹出的菜单就是上下文菜单。 （1）在Activity的onCreate()方法中注册上下文菜单。 （2）重写Activity中的onCreateContextMenu()方法。 （3）重写onOptionsItemSelected()方法，用于当菜单项被选择时，作出相应的处理。

49 2.11 使用活动条（ActionBar） 2.11.1 启用ActionBar 2.11.2 使用ActionBar显示选项菜单
2.11.3  启用程序图标导航 2.11.4  添加Action View 2.11.5  使用ActionBar实现Tab导航 2.11.6  使用ActionBar实现下拉式导航