3、描述用户界面 2011.10 湖南城市学院.

Presentation on theme: "3、描述用户界面 2011.10 湖南城市学院."— Presentation transcript:

1 3、描述用户界面 湖南城市学院

2 User Interface Guidelines
Activity and Task Design Activities are the basic, independent building blocks of applications. As you design your application's UI and feature set, you are free to re-use activities from other applications as if they were yours, to enrich and extend your application. These guidelines describe how activities work, illustrates them with examples, and describes important underlying principles and mechanisms, such as multitasking, activity reuse, intents, the activity stack, and tasks. It covers this all from a high-level design perspective. 湖南城市学院

3 湖南城市学院

4 界面组件 所有的Android中的界面组件都是由view类继承而来 Android提供非常丰富而多样的界面组件，可分为三类
View is subclass of java.lang.Object viewGroup is subclass of View Attach a view to an activity using Activity.setContentView Android提供非常丰富而多样的界面组件，可分为三类 显示界面类（例如文字、按钮、输入字段） 页面布局类（如Layout、Tab） 状态提示类（例如进度条、等待圈） 湖南城市学院

5 常用的页面布局 页面布局类的组件的作用，是提供如何分配屏幕上各种显示组件位置的方式。 线性布局（LinearLayout)
框架页面布局（FrameLayout) 表格布局(TableLayout) 相对布局(RelativeLayout) 绝对布局(AbsoluteLayout) ………… 湖南城市学院

6 基本界面组件 文本框（TextView）和编辑框(EditText） 按钮（Button）和图片按钮（ImageButton）
单选按钮（RadioButton）和复选按钮（CheckBox） 状态开关按钮（ToggleButton） 时钟（AnalogClock和DigitalClock) 图像视图（ImageView) ………………. 湖南城市学院

7 高级界面组件 自动完成文本框AutoCompleteTextView Spinner
日期、时间选择器DataPicker,TimePicker 进度条ProgressBar 拖动条SeekBar 星级评分条RatingBar 选项卡TabHost 滚动视图ScrollView 列表视图ListView,ListActivity 可展开的列表组件ExpandableListView 网络视图GridView和画面切换器ImageSwitcher 画廊视图Gallery 湖南城市学院

8 修改项目helloworld，使其显示变换为“哈罗！”
第一个应用程序，在屏幕上显示“哈罗！” 修改项目helloworld，使其显示变换为“哈罗！” 先打开“helloworld”项目中的“res/layout/main.xml”文件，我们看到这个文件的预览页面 接着我们切换到main.xml标签，我们看到如下代码 湖南城市学院

9 湖南城市学院

10 讲解代码 <?xml version="1.0" encoding="utf-8"?>
xml（Extensible Markup Language)是一种可扩展标记语言，类似网页中所使用的HTML标记语言。在main.xml文件里，第一行是每个xml说明文档固定的开头内容，用来指示这个文本文件是以xml格式描述的 湖南城市学院

11 </LinearLayout> “LinearLayout”标签，使用了两个标签来概括出一个界面组件的区块
<LinearLayout xmlns:android= ………………….. </LinearLayout> “LinearLayout”标签，使用了两个标签来概括出一个界面组件的区块 后面的标签前面加上了一个/，来表示结束标签 线性布局方式，为一个界面组件接一个界面组件，由上而下排队排下来的意思 湖南城市学院

12 xmlns:android= xmlns开头的这串语句，是用来声明这个xml描述文件的命名空间（NameSpace),后面接的URL（网址），表示这个描述文件会引用到Android名称空间提供的定义。所有Android页面布局文件的最外层标签中，都必须包含这个属性 湖南城市学院

13 Android:orientation=”vertical” Android:layout_width=”fill_parent”
Android:layout_height=”fill_parent LinearLayout标签的属性。大多数属性前都有一个android:前缀。同一个界面组件之间是以空白做间隔，当然，将属性排成多行更易于阅读。我们应该保持这个习惯。 Android:orientation是页面走向属性，在此填入vertical属性值，表示这个界面的页面布局方式是从上而下垂直地排列其包含的界面组件。 Android:layout_width界面组件的宽度属性；Android:layout_height界面的长度属性。Fill_parent表示填满整个上层组件。默认LinearLayout界面组件会占满整个屏幕空间。 Android有很多种页面布局方式可以选用，但大多数的应用程序并不需特意去改变默认的线性页面布局方式，只需专注在其中填入需要的界面组件即可。所以，在此之后的内容才是一般应用程序开发时教常修改的地方 湖南城市学院

14 注意：在Eclipse编辑画面中按下“ALT+/”组合键，编辑画面上会弹出输入提示窗口。所以读者不需背诵，只要知道不同界面组件的用途即可。
湖南城市学院

15 android:layout_width="fill_parent"
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" /> TextView文字查看组件。其作用是在屏幕上显示文字。 Android:layout_height=”wrap_content”(总结内容)，即随着文字字段行数的不同而改变这个界面组件的高度 Android:text属性是指文字字段中显示的文字内容。 湖南城市学院

16 @string/hello。在res/values/strings.xml文件中，定义了
<string name=“hello”>Hello World, helloworld!</string> World,helloworld”字符串 湖南城市学院

17 Android在res目录下用到不同子目录来保存不同的应用资源， res/drawable/? res/layout/?
res/values/? 湖南城市学院

18 存放各种简单值的xml文件。这些简单的值包括字符串值、整数值、颜色值、数组值等。如string.xml定义字符串资源
res/drawable/? 该目录下存放各种位图文件（如png,jpg,gif等图片）。对于Android2.3版本而言，则是提供了drawable-ldpi(低分辨率）、 drawable-mdpi(中等分辨率）、 drawable-hdpi(高分辨率）这三个目录存放的图片文件的文件名完全相同，只是分辨率不同 res/layout/? 存放各种用户界面的布局文件。如main.xml res/values/? 存放各种简单值的xml文件。这些简单的值包括字符串值、整数值、颜色值、数组值等。如string.xml定义字符串资源 湖南城市学院

19 思考？ 湖南城市学院

20 线性布局 第二个应用程序bmi的界面 湖南城市学院

21 湖南城市学院

22 湖南城市学院

23 android:inputType=numberDecimal
湖南城市学院

24 android:id 属性 要使用一个用户界面组件，第一件事就是定义出界面说明文档。
大部分的界面组件不需要在程序中作后续处理（如LinearLayout,TextView），因此可以直接使用。 对于那些将在程序中被引用到的界面组件（如Button,EditText），我们需要通过在XML说明文档中定义出该界面组件的android:id标志符号属性。之后在程序中所有与这个界面有关的操作，都能通过android:id标识符号来调用这个组件。 湖南城市学院

25 android:id 属性 Android：id属性的定义： @+id/组件名
Java代码中可以通过findViewById来获取它 湖南城市学院

26 第三个应用程序：不同字体，颜色显示文本 湖南城市学院

27 湖南城市学院

28 湖南城市学院

29 XML属性 android:text 设置文本框内文本的内容 android:textsize设置文本框内文本的大小
android:singline 设置该文本框是否为单行显示 android:ellipsize 设置当显示的文本超过了TextView的长度时如何处理文本内容 android:autolink是否将符合指定格式的文本转换为可单击的超链接形式 android:shadowColor设置文本框内文本的阴影的颜色 android:shadowDx设置文本框内文本在水平方向的偏移 android:shadowDy设置文本框内文本在垂直方向的偏移 android:password设置该文本框是一个密码框（用点代替字符） 湖南城市学院

30 相对布局（RelativeLayout)
相对布局内子组件的位置总是相对兄弟组件、父容器来决定的 如果A组件的位置是由B组件的位置来决定的，Android要求先定义B组件，再定义A组件 湖南城市学院

31 RelativeLayout的XML属性
RelativeLayout可支持的XML属性，URL: 湖南城市学院

32 Android:gravity:设置文本框内文本的对齐方式
Android:ignoregravity：设置那个组件不受gravity组件的影响 湖南城市学院

33 RelativeLayout中的一个内部的类RelativeLayout
RelativeLayout中的一个内部的类RelativeLayout.LayoutParams，提供了大量的XML属性来控制RelativeLayout布局中子组件的布局分布，URL: 湖南城市学院

34 湖南城市学院

35 相对布局属性 Android:layout_above:控制该子组件位于各出ID组件的上方
Android:layout_below:控制该子组件位于各出ID组件的下方 Android:layout_alignBottom：控制该子组件位于各出ID组件的下边界对齐 Android:layout_alignTop:控制该子组件位于各出ID组件的上边界对齐 Android:layout_alignLeft控制该子组件位于各出ID组件的左边界对齐 Android:layout_alignRight控制该子组件位于各出ID组件的右边界对齐 Android:layout_alignParentBottom控制该子组件是否与布局容器底端对齐 Android:layout_alignParentLeft控制该子组件是否与布局容器左边对齐 Android:layout_alignParentRight控制该子组件是否与布局容器右边对齐 Android:layout_alignParentTop控制该子组件是否与布局容器顶端对齐 湖南城市学院

36 相对布局属性 Android:layout_centerHorizontal控制该子组件是否位于布局容器的水平居中位置
Android:layout_centerVertical控制该子组件是否位于布局容器的垂直居中位置 Android:layout_centerInParent控制该子组件是否位于布局容器的中央位置位置 Android:layout_toRightOf:控制该子组件位于给出ID组件的右侧 Android:layout_toLeftOf:控制该子组件位于给出ID组件的左侧 湖南城市学院

37 第四个应用程序： 梅花布局 湖南城市学院

38 湖南城市学院

39 湖南城市学院

40 控制该组件位于父容器的中间 android:layout_centerInParent
If true, centers this child horizontally and vertically within its parent. Must be a boolean value, either "true" or "false". 控制该子组件是否位于布局容器的中央位置 湖南城市学院

41 控制该组件位于view01组件的上方 android:layout_above =“id/view01”
android:layout_alignLeft=“id/view01” android:layout_above Positions the bottom edge of this view above the given anchor view ID. Accommodates bottom margin of this view and top margin of anchor view. Must be a reference to another resource, in the form or to a theme attribute in the form "?[package:][type:]name". 控制该子组件位于给出ID组件的上方 湖南城市学院

42 android:layout_alignLeft
Makes the left edge of this view match the left edge of the given anchor view ID. Accommodates left margin. Must be a reference to another resource, in the form or to a theme attribute in the form "?[package:][type:]name". 湖南城市学院

43 控制该组件位于view01组件的下方 android:layout_below=“@id/view01”
湖南城市学院

44 控制该组件位于view01组件的左边 android:layout_toLeftof=“@id/view01”
android:layout_toLeftOf Positions the right edge of this view to the left of the given anchor view ID. Accommodates right margin of this view and left margin of anchor view. Must be a reference to another resource, in the form or to a theme attribute in the form "?[package:][type:]name". 湖南城市学院

45 android:layout_alignTop
Makes the top edge of this view match the top edge of the given anchor view ID. Accommodates top margin. Must be a reference to another resource, in the form or to a theme attribute in the form "?[package:][type:]name". 湖南城市学院

46 控制该组件位于view01组件的右边 android:layout_toRightof=“@id/view01”
android:layout_toRightOf Positions the left edge of this view to the right of the given anchor view ID. Accommodates left margin of this view and right margin of anchor view. Must be a reference to another resource, in the form or to a theme attribute in the form "?[package:][type:]name". 湖南城市学院