第2章 Android界面设计基础 QQ号： QQ群： (Android编程-清华版)

Presentation on theme: "第2章 Android界面设计基础 QQ号： QQ群： (Android编程-清华版)"— Presentation transcript:

1 第2章 Android界面设计基础 QQ号：1281147324 QQ群：489059718(Android编程-清华版)
（公共版） 网络资源：

2 本章知识结构

3 本章示例 基本界面控件使用 布局管理器的嵌套使用

4 2.1 基础View控件 2.1.1 View与ViewGroup类

5 2.1 基础View控件 1 View类 View类是所有界面控件类的超类； 代表屏幕上一块空白的矩形区域，用于绘画和事件处理；

6 2.1基础View控件 2 ViewGroup类 ViewGroup类是View类的一个抽象子类，是一种特殊的View；
是所有布局类和容器组件的超类，ViewGroup中可以包含View和ViewGroup对象； ViewGroup并没有定义其包含的View布局，由其子类中定义它所包含的View的排列方式。

7 2.1基础View控件 3 View和ViewGroup关系 View与ViewGroup的关系类似于文件与文件夹的关系；
视图组 View与ViewGroup的关系类似于文件与文件夹的关系； View与ViewGroup组合使用，形成一种界面布局的层次结构。 视图 ViewGroup控件的层次结构

8 2.1基础View控件 4 控制界面显示的两种方法 通过XML布局文件设置控件属性进行控制。 通过Java代码调用控件类相应的方法进行控制。
两种方式都可以使界面达到预期的效果，实际上，XML文件的属性与代码中类的方法之间存在着一一对应的关系，可查看View类API介绍。

9 2.1基础View控件 两种方式的优缺点 完全使用XML布局文件虽然方便、便捷，但灵活性不好，不能动态改变属性值。 解决方案
完全使用Java代码来控制用户界面不仅繁琐而且界面和逻辑代码相混合，不利于软件设计人员的分工合作。 完全使用XML布局文件虽然方便、便捷，但灵活性不好，不能动态改变属性值。 解决方案 混合使用这两种方式来控制界面，一般来说，习惯将一些变化小的、比较固定的、初始化的属性放在XML文件中管理，而对于那些需要动态变化的属性则交给Java代码控制。

10 2.1.2 文本显示框（TextView） TextView类直接继承于View类，用于在界面上显示文本信息，与Word中“字体”的功能类似，可以设置显示文本的颜色、大小、字体、风格等信息。 TextView类的常见XML属性、对应方法及说明 XML属性 对应的Java方法 说明 android:textColor setTextColor(int) 设置文本的颜色 android:textSize setTextSize(int,float) 设置文本的大小 android:textStyle setTypeface(Typeface) 设置文本的风格 android:typeface 设置文本的字体 android:width setWidth(int) 设置文本框的宽度（pixel为单位）

11 2.1.2 文本显示框（TextView） 除了上述几乎所有文本显示控件都拥有的属性外，Android中的TextView还提供一些特殊功能，例如：自动识别文本中的各种链接、显示部分HTML标签定义的格式。 识别自动链接的属性为：android:autoLink，该属性的值为： none：不匹配任何格式，这是默认值。 web：只匹配网址，网址会以超链接的形式显示。 ：只匹配电子邮箱，电子邮箱会以超链接的形式显示。 phone：只匹配电话号码，电话号码会以超链接的形式显示。 map：只匹配地图地址，地理位置会以超链接的形式显示。 all：匹配以上所有。 当匹配时，相应部分会以超链接形式显示，单击超链接，会自动运行相关程序。

12 2.1.2 文本显示框（TextView） 在Android中经常需要设置尺寸，包括组件的宽度和高度、边距、文本大小等，这些尺寸的单位各不相同，在Android提供了多种尺寸单位，常见有： px (像素pixels) ：屏幕上真实像素表示，不同设备显示效果相同，用于表示清晰度，像素越高越清晰。 dip或dp (device independent pixels) ：设备独立像素，是一个抽象单位，基于屏幕的物理密度，1dp在不同密度的屏幕上对应的px不同，从而整体效果不变，dp可消除不同类型屏幕对布局的影响。 sp (Scale-independent Pixels—best for text size) ：比例独立像素，主要处理字体的大小，可以根据屏幕自适应。 为了适应不同分辨率、不同的屏幕密度的设备，推荐使用dip，文字大小使用sp。

13 2.1.2 文本显示框（TextView） 显示部分HTML标签定义的格式，需要Android中Html类的辅助，该类提供了一个fromHtml（）方法，该方法可以识别字符串中的HTML标签，返回值为Spanned类型，该类实现了CharSequence接口，可以作为参数传入setText（）方法。 首先为该文本框添加一个id属性，然后在onCreate()方法中，通过findViewById(R.id.***)，获取该文本框，最后设置通过setText()方法来设置显示的内容。 TextView tv=((TextView)findViewById(R.id.myText); tv.setText(Html.fromHtml (“欢迎参加<font color=‘blue’>手机软件设计赛</font>”));

14 2.1.3 文本编辑框（EditText） 可以把TextView看成是一个文本编辑器的基类，但其本身不提供编辑功能，TextView有一个子类EditText，该控件允许用户输入，并且可设置输入的类型。 EditText常用属性 android:hint：设置文本框内容为空时，文本框内显示的提示信息（灰色），一旦输入内容，该提示立即消失，当删除文本框内容时，提示信息又会自动出现。 android:minLines：设置文本编辑框的最小行数。 android:inputType：设置文本框的输入类型，例如数字、电话号码、密码等。

15 2.1.4 按钮（Button） 按钮是人机交互中一个关键的控件，主要用于发送请求、提交数据等，例如登录、注册等。
Android中Button是TextView的子类，也可以显示文本信息，相对于普通的TextView而言，Button的特殊之处在于可以接收事件，并对相应事件进行处理。例如单击事件、双击事件、触摸事件等。具体的事件处理将在后面进行讲解。 注意：Button是TextView的子类，是一个特殊的文本。

16 应用举例

17 应用举例

18 2.1.5 应用举例 layout\activity_main.xml →线性布局内组件的对齐方式：水平居中 →线性布局方向为垂直
应用举例 layout\activity_main.xml →线性布局内组件的对齐方式：水平居中 →线性布局方向为垂直 →为TextView添加id属性 →组件宽度为内容包裹 →组件高度为内容包裹 →设置文本大小为20像素 →设置宽度为填充父容器 →组件高度为内容包裹 →设置文本编辑框的提示信息 →设置文本编辑框的输入类型为密码 →设置文本编辑框的提示信息 →设置按钮的现实文本

19 2.1.5 应用举例 layout\activity_main.xml →设置按钮的显示文本 →设置文本字体大小为18像素
应用举例 layout\activity_main.xml →设置按钮的显示文本 →设置文本字体大小为18像素 →设置文本颜色为蓝色 →自动识别所有链接 →设置显示的文本

20 应用举例

21 应用举例 本程序涉及html格式标签的使用，需在java代码中进行简单设置，首先通过findViewById()方法获得组件，然后进行设置显示文本。该过程调用html类的静态方法fromHtml(). →根据id获取文本组件 →设置文本组件的显示文本

22 2.1.5 应用举例 附：引入已有应用程序的基本步骤 1. 下载第二章源代码包，并将代码解包
应用举例 附：引入已有应用程序的基本步骤 1. 下载第二章源代码包，并将代码解包 本书全部代码包下载前解包到workspace文件夹下

23 2.1.5 应用举例 附：引入已有应用程序的基本步骤 2.选择Eclips 的File/import..菜单，显示引入资源及项目的对话框
应用举例 附：引入已有应用程序的基本步骤 2.选择Eclips 的File/import..菜单，显示引入资源及项目的对话框 资源对话框

24 应用举例 附：引入已有应用程序的基本步骤 引入项目对话框

25 应用举例 附：引入已有应用程序的基本步骤 3. 选定项目后，返回图引入资源对话框，再单击Finish按钮。在Package Explorer下面显示刚引入的项目名称 引入了新的项目：TextViewTest

26 应用举例 附：引入已有应用程序的基本步骤 4. 运行引入的项目：右击TextViewTest项目，然后在弹出菜单中选择Run as/ Android Application 启动项目运行的菜单选择过程

27 应用举例 附：引入已有应用程序的基本步骤 5. 查看所需看的代码，这里主要是看布局文件。依次单击 res/layout/ activity_main.xml 查看布局文件的代码

28 应用举例 附：引入已有应用程序的基本步骤 可以查看该项目的清单文件(AndroidManifest.xml)和主程序(MainActivity. java)等。

29 2.2 布局管理器 android中布局管理器本身也是一个界面组件，所有的布局管理器都是ViewGroup类的子类，都可以当做容器来使用。
2.2 布局管理器 android中布局管理器本身也是一个界面组件，所有的布局管理器都是ViewGroup类的子类，都可以当做容器来使用。 android 中用得最多的布局主要是：线性布局，表格布局，性对布局。

30 线性布局 线性布局由LinearLayout类来表示，将容器里的控件一个挨一个地排列起来。排列方向只有两种：水平排列和垂直排列。通过其android:orientation属性来设置。 当容器中控件的宽度总和或高度总和超过父容器的宽度或高度时，超过的部分如何显示呢？ 当添加某一控件后，宽度超过父容器时，即该控件能显示部分，但无法完整显示时，该控件会被压缩，从而完全显示，而再添加其他控件时，将不会显示该控件。高度亦如此。 如果需要完全显示，怎么做？

31 2.2.2 表格布局 表格布局（TableLayout）指以行和列的形式对控件的排列方式进行管理。
表格布局 表格布局（TableLayout）指以行和列的形式对控件的排列方式进行管理。 在表格布局中，通过添加TableRow来添加表格行，TableRow本身也是容器，可以添加其他控件，每添加一个控件，相对于该行添加了一列。 如果没有添加TableRow而是直接在表格中添加控件，则该控件独自占一行。 表格布局中所有列的宽度都一致，列的宽度由该列中最宽的那个单元决定，整个表格布局的宽度则取决于父容器的宽度。

32 表格布局 表格布局中的常见属性： android:collapseColumns：隐藏指定的列，其值为列所在的序号，从0开始，如果需要隐藏多列，可用逗号隔开这些序号。 android:shrinkColumns：收缩指定的列以适合屏幕，使整行能够完全显示不会超出屏幕。 android:stretchColumns：扩展指定的列以填充空白部分。该属性用于某一行的内容不足以填充整个屏幕。 android:layout_column：指定控件在TableRow中列的序号。 android:layout_span：指定控件所跨越的列数，即将多列合并为一列。

33 表格布局 利用表格布局设计以下界面。

34 相对布局 相对布局，顾名思义就是相对于某个控件的位置，由RelativeLayout类表示，这种布局的关键是找到一个合适的参照物，如果甲组件的位置需要根据乙组件的位置来确定，那么要求先定义乙组件，再定义甲组件。 在相对布局中，每个控件的位置可通过它相对于某个控件的方位以及对齐方式来确定。方位或对齐方式的值为参考控件的ID，由于父容器是确定的，只有一个，所以与父容器方位与对齐的关系取值为true或false。

35 其他布局 层布局也叫帧布局，由FrameLayout类表示。其每个控件占据一层，后面添加的层会覆盖前面的层，后面的控件会叠放在先前的控件之上。如果后面控件的大小大于前面的控件，那么前面的控件将会完全被覆盖，不可见；如果后面控件无法完全覆盖前面的控件，则未覆盖部分，显示先前的控件。 绝对布局，即指定每个控件在手机上的具体坐标，每个控件的位置和大小都是固定的。

36 布局的综合应用

37 布局的综合应用 界面要求：该界面中包含一个文本编辑框（EditText）、28个按钮（Button），文本编辑框的宽度为填充父容器、高度为内容包裹，行数最少为2行。28个按钮中26个按钮的高度为50dp，宽度为60dp，“=”按钮高度为100dp，宽度为60dp，“0”按钮的高度为50dp，宽度为120dp。所有按钮的文本大小为20sp，对齐方式为居中。（特殊符号：←、√、±） (考察知识点：基本界面控件的使用、布局的嵌套)

38 2.2.5 布局的综合应用 该界面整体采用垂直线性布局，先添加一个文本框，然后添加一个四行五列的表格布局，最后添加相对布局，摆放剩余按钮。
布局的综合应用 该界面整体采用垂直线性布局，先添加一个文本框，然后添加一个四行五列的表格布局，最后添加相对布局，摆放剩余按钮。 由于所有按钮都需要设置高度、宽度、对齐方式、字体大小、等属性，在此我们定义三种按钮样式。 →普通按钮风格 →设置按钮宽度 →设置按钮高度 →设置按钮上字体大小 →设置按钮文本大小 →设置按钮文本对齐方式 →较宽按钮风格 →设置按钮宽度为120dp →设置按钮高度为50dp →设置按钮上的字体大小为20sp →设置按钮上文字水平居中 →较高按钮风格 →设置按钮宽度为60dp →设置按钮高度为100dp →设置按钮上字体大小为20sp →设置按钮上文字水平居中

39 布局嵌套使用示例 首先整体采用线性布局： 1 <LinearLayout xmlns:android=" 2 xmlns:tools=" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical"> →垂直线性布局 6 <EditText →文本编辑框 7 8 android:layout_height="wrap_content" 9 android:minLines="2" /> →高度最少两行 10 <TableLayout.../ > →表格布局 11 <RelativeLayout.../> →相对布局 12 </LinearLayout>

40 2.2.4 布局嵌套使用示例 表格布局中包含四行五列: →表格布局 →宽度填充父容器 →高度包裹内容 →表格行(第一行) →宽度填充父容器
布局嵌套使用示例 表格布局中包含四行五列: →表格布局 →宽度填充父容器 →高度包裹内容 →表格行(第一行) →宽度填充父容器 →内容水平居中对齐 →插入一列（第1列） →引用样式btn01 →按钮文字为MC →插入一列（第2列） →插入一列（第3列） →插入一列（第4列） →插入一列（第5列）

41 布局的综合应用 →表格行（第2行）

42 布局的综合应用 →表格行（第3行）

43 布局的综合应用 →表格行（第4行） →添加Id属性

44 布局的综合应用 相对布局需要一个参照物。本例中，按钮“2”以“1”按钮(id为“one”，见下面代码第6行)为参考，与“1”顶端对齐（见代码14行），在“1”的右边（见代码15行），详见下面代码。 1 <RelativeLayout →相对布局 2 android:layout_width="match_parent" 3 android:layout_height="wrap_content" 4 android:gravity="center_horizontal" > →水平居中对齐 5 <Button 6 →添加ID属性，供其他组件参考 7 8 android:text="1" →按钮文字“1” 9 android:textColor="#0000ff" →按钮文字为蓝色，“#RRGGBB” 10 android:textStyle="bold" /> →按钮文字为粗体字 11 12 13 14 →“2”与“1”顶端对齐 15 →“2”在“1”的右边 16 android:text="2" />

45 知识点补充 在strings.xml文件中定义字符串常量，然后在布局文件中引用该字符串相对于直接在布局文件中使用字符串常量的有以下几个好处：
节省内存空间，当有多处使用同一个字符串时，内存中只保存一份，引用的是同一个字符串； 方便快速更新，不需要逐个更改； 有利于资源的国际化。

46 知识点补充 layout_xxx属性与xxx属性的含义类似，那么它们有什么区别呢？
一般来说，layout_xxx属性表示该控件在父容器中的属性，而xxx属性则表示该控件所包含的内容的属性，例如layout_gravity表示该控件整体在父容器中的对齐方式，而gravity则表示该控件所包含的内容的对齐方式。

47 2.3 开发自定义View 开发自定义View时的一般步骤如下： 1.定义自己组件的类名，并让该类继承View类或一个现有的View的子类。
2.重写父类的一些方法。当Java代码创建该组件或根据xml布局文件加载并构建界面时都将调用构造器，根据业务需要重写父类的部分方法。 3.既可以通过Java代码来创建，也可以通过xml布局文件进行创建。 注意：在xml布局文件中，该组件的标签是完整的包名+类名，而不再仅仅是原来的类名。

48 2.3 开发自定义View 例如 我们自定义一个圆形组件，运行效果如下图

49 2.3 开发自定义View →定义自定义组件类 →构造方法，调用父类构造方法 →重写父类的onDraw()方法 →创建一个画笔
→设置画笔颜色——蓝色 →画一个圆，半径为50

50 2.3 开发自定义View 通过xml布局文件来使用该组件，代码如下： →完整的包名+类名