《第2讲-高级用户界面设计-布局layoutppt课件.ppt》由会员分享，可在线阅读，更多相关《第2讲-高级用户界面设计-布局layoutppt课件.ppt（31页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 Data WarehouseAndroid平台手机嵌入式开发平台手机嵌入式开发第2讲高级用户界面设计_布局layout.魏志军魏志军1 主要内容：主要内容：uAndroidAndroid平台平台UIUI组件架构探讨组件架构探讨uUIUI组件的定义、组件的定义、uUIUI组件的引用、组件的引用、u组件的属性及组件的属性及IDIDu控制UI界面u布局组件布局组件2 主要内容：主要内容：完美的用户界面对于移动平台的软件产品而言是至关重要的完美的用户界面对于移动平台的软件产品而言是至关重要的u本章重点介绍本章重点介绍AndroidAndroid平台架构中比较常见、重要的界面元素，平台架构中比较常见、
2、重要的界面元素，并通过实例，迅速掌握在并通过实例，迅速掌握在AndroidAndroid平台上搭建称心如意的界面平台上搭建称心如意的界面3 2.1：Android平台平台UI组件架构组件架构在在AndroidAndroid平台中，所有的平台中，所有的可视组件是可视组件是视图类视图类viewview的子类。的子类。u视图类中有一个重要的直接子类视图类中有一个重要的直接子类视图组类视图组类(ViewGroup)(ViewGroup)，所有的，所有的布局类都是视图组类的直接或者布局类都是视图组类的直接或者间接子类。间接子类。这些这些布局类都在小部件布局类都在小部件(Widget)(Widget)的的
3、包包(android.widget)(android.widget)中中4 2.1：Android平台平台UI组件架构组件架构u视图组类有一个重要的直接子类：适配器视图类视图组类有一个重要的直接子类：适配器视图类（AdapterViewAdapterView）,该类又包含若干个直接或者间接的视图类。如：该类又包含若干个直接或者间接的视图类。如：列表视图类列表视图类(ListView)(ListView)和格子视图类（和格子视图类（GridViewGridView）u视图类还有一个重要的直接子类：视图类还有一个重要的直接子类：文本视图类文本视图类(TextView(TextView)，按钮，按钮
4、类是其子类之一；而复选框类类是其子类之一；而复选框类(CheckBox)(CheckBox)和单选按钮类和单选按钮类(RadioButton)(RadioButton)又是按钮类的间接子类。又是按钮类的间接子类。5 2.1：Android平台平台UI组件架构组件架构u容器类可以是组件类的子类，组件类也可以是容器类的子类。因容器类可以是组件类的子类，组件类也可以是容器类的子类。因为容器本身也是组件，可以视为组合组件，组件本身也是容器，为容器本身也是组件，可以视为组合组件，组件本身也是容器，可以由多个组件组成。可以由多个组件组成。6 2.1：Android平台平台UI组件架构组件架构u布局的角色：
5、布局的角色：AndroidAndroid平台中，布局被定义为视图组平台中，布局被定义为视图组(ViewGroup)(ViewGroup)的子类，并纳的子类，并纳入到小部件包中。入到小部件包中。在功能上，在功能上，布局既可以用于容纳其他视图，又可以作为视图显示，布局既可以用于容纳其他视图，又可以作为视图显示，还可以作为小部件加入到其他布局中还可以作为小部件加入到其他布局中。从而形成繁茂的视图结构层次树，给同行展示的就是更加灵活和从而形成繁茂的视图结构层次树，给同行展示的就是更加灵活和丰富的界面效果丰富的界面效果7 2.2：UI组件的定义组件的定义AndroidAndroid组件可以通过以下两种方
6、式进行定义：组件可以通过以下两种方式进行定义：u在在XMLXML中定义界面元素：中定义界面元素：提供了丰富的提供了丰富的XMLXML词汇表对应绝大多数视图和子类，通过标记就词汇表对应绝大多数视图和子类，通过标记就可以定义对应的视图类或其子类。可以定义对应的视图类或其子类。好处：不仅增加了界面定义的弹性，也简化了编码过程好处：不仅增加了界面定义的弹性，也简化了编码过程u在在JavaJava代码中定义界面元素：代码中定义界面元素：就是平常定义组件的方式，即通过就是平常定义组件的方式，即通过newnew语句初始化一个类实例，语句初始化一个类实例，然后设置其属性，并调用其方法。然后设置其属性，并调用其
7、方法。8 2.2：UI组件的引用、属性、组件的引用、属性、IDu对象的引用，一般来说都是延续对象的引用，一般来说都是延续先创建、再使用先创建、再使用的原则的原则；但是对于通；但是对于通过过XMLXML定义界面元素的形式，如何引用这些已经实例化的对象呢？定义界面元素的形式，如何引用这些已经实例化的对象呢？资源打包工具（资源打包工具（aaptaapt）通过分析定义组件的）通过分析定义组件的xmlxml文件来自动生成组件的标文件来自动生成组件的标识列表，并生成资源标识列表，封装在识列表，并生成资源标识列表，封装在R.javaR.java类中。类中。通过组件标识，在通过组件标识，在ActivityAc
8、tivity中或者根组件中调用中或者根组件中调用findViewById()findViewById()方方法即可获得指定组件标识的组件对象句柄。法即可获得指定组件标识的组件对象句柄。9 2.2：UI组件的引用、属性、组件的引用、属性、IDu组件属性组件属性：XMLXML中有很多属性用来定义该类的实例对象的成员内容。中有很多属性用来定义该类的实例对象的成员内容。例如：使用例如：使用android:textandroid:text定义所显示文本内容，该方式与运行时使用定义所显示文本内容，该方式与运行时使用setTextsetText()()方法是一致的。方法是一致的。注意：注意：xmlxml定义
9、中，给一个文本组件设置定义中，给一个文本组件设置texttext属性也是合法的，但是该属属性也是合法的，但是该属性不会被性不会被AndroidAndroid平台的资源解析功能识别，所以该内容不会显示出来。平台的资源解析功能识别，所以该内容不会显示出来。uIDID：用于区分组成屏幕的视图树中的各个组件。：用于区分组成屏幕的视图树中的各个组件。android:id=android:id=“+id/+id/ID”。+号：该资源必须创建并添加到资源中号：该资源必须创建并添加到资源中 android:id=android:id=“id/id/ID”。无无+号：无需创建，只是引用号：无需创建，只是引用10
10、 2.3：控制：控制UI界面界面 1、使用XML布局文件控制UI界面3、使用XML和Java代码混合控制UI界面4、开发自定义的View2、在代码中控制UI界面112.3.1 使用使用XML布局文件控制布局文件控制UI界面界面使用XML布局文件控制UI界面可以分为以下两个关键步骤两个关键步骤。（1）在Android应用的res/layout目录下编写XML布局文件，可以是任何符合Java命名规则的文件名。创建后，R.java会自动收录该布局资源。（2）在Activity中使用以下Java代码显示XML文件中布局的内容。setContentView(R.layout.main);122.3.2
11、在代码中控制在代码中控制UI界面界面在代码中控制UI界面可以分为以下3个关键步骤。（1）创创建建布布局局管管理理器器，可以是帧布局管理器、表格布局管理器、线性布局管理器和相对布局布局管理器等，并且设置布局管理器的属性。例如，为布局管理器设置背景图片等。（2）创建具体的组件，可以是TextView、ImageView、EditText和Button等任何Android提供的组件，并且设置组件的布局和各种属性。（3）将创建的具体组件添加到布局管理器中。132.3.3 使用使用XML和和Java代码混合控制代码混合控制UI界面界面使用XML和Java代码混合控制UI界面，习惯上把变化小、行为比较固定
12、的组件放在XML布局文件中，把变化较多、行为控制比较复杂的组件交给Java代码来管理。14在Android中，所有的UI界面都是由View类和ViewGroup类及其子类组合而成的。其中，View类是所有UI组件的基类，而ViewGroup类是容纳这些UI组件的容器，其本身也是View类的子类。在ViewGroup类中，除了可以包含普通的View类外，还可以再次包含ViewGroup类。View类和ViewGroup类的层次结构如下图所示。2.3.4 开发自定义的开发自定义的View15开发自定义的View组件大致分为以下3个步骤。（1）创建一个继承android.view.View类的Vie
13、w类，并且重写构造方法。（2）根据需要重写相应的方法。（3）在项目的活动中，创建并实例化自定义View类，并将其添加到布局管理器中。2.3.4 开发自定义的开发自定义的View16 2.4：布局组件：布局组件(Layouts)AndroidAndroid平台中，强化了布局的地位，可是组件必须放在布局或者与布局平台中，强化了布局的地位，可是组件必须放在布局或者与布局具有相同地位的容器中，否则，资源管理器认为该摆放方式非法具有相同地位的容器中，否则，资源管理器认为该摆放方式非法.AndroidAndroid平台定义了：平台定义了：lLinearLayout(LinearLayout(线性布局线性布
14、局)、lAbsoluteLayout(AbsoluteLayout(绝对布局绝对布局)、lRelativeLayout(RelativeLayout(相对布局相对布局)、lTableLayout(TableLayout(表格布局表格布局)、lFrameLayout(FrameLayout(框架布局框架布局,帧布局帧布局)其中绝对布局不是很常用，最新的版本中已经不再使用其中绝对布局不是很常用，最新的版本中已经不再使用17 2.4：布局组件：布局组件(Layouts)u1 1、LinearLayout(LinearLayout(线性布局线性布局)线性布局LinearLayout是将容器内的子组件按
15、照直线方式进行摆放按照直线方式进行摆放；其方向可以是竖向竖向或者或者横向横向，这依赖于你怎么定义方向orientation属性。线性布局的几个重要属性：线性布局的几个重要属性：l方向属性：方向属性：android:orientation=“horizontal”或者或者verticall宽度属性：宽度属性：android:layout_width=fill_parentl高度属性：高度属性：android:layout_height=fill_parent“18 2.4：布局组件：布局组件(Layouts)lgravitygravity属性：用于控制布局中视图组件的位置。有属性：用于控制布局中
16、视图组件的位置。有toptop、bottombottom、leftleft、rightright、center_verticalcenter_vertical，center_horizontalcenter_horizontal，centercenter等取值；等取值；（如果该属性在一些视图组件中使用，则控制控件上面的东西的位置，如如果该属性在一些视图组件中使用，则控制控件上面的东西的位置，如TextView里面的文本默认居左作对齐的，如果让这些文本居中的话，只要在这个TextView的属性里加上android:gravity=“center”）如设置多个属性值，需要使用”|”进行分隔，注意不
17、能有空格等字符比如要弄一个左下位置：则可以设置：android:gravity=left|bottom 19 2.4：布局组件：布局组件(Layouts)20 2.4：布局组件：布局组件(Layouts)u1 1、LinearLayoutLinearLayout(线性布局线性布局)线性布局的几个重要属性：线性布局的几个重要属性：l layout_gravitylayout_gravity:定位当前视图在父元素的位置，取值和定位当前视图在父元素的位置，取值和gravitygravity相同相同llayout_weightlayout_weight ：将排列好组件后的剩余的空间，按权重比例进行分配
18、将排列好组件后的剩余的空间，按权重比例进行分配。该属该属性是一个非负整数值，性是一个非负整数值，如果该属性大于如果该属性大于0 0，线性布局会根据水平或者垂直方向，按照不同视图的线性布局会根据水平或者垂直方向，按照不同视图的layout_weightlayout_weight值占所有视图值占所有视图layout_weightlayout_weight属性之和的比例，来分配每个视图属性之和的比例，来分配每个视图所占的区域比例，同时视图将按照比例拉伸。所占的区域比例，同时视图将按照比例拉伸。如果属性值为如果属性值为0 0，视图不会拉伸，按照原大小显示视图不会拉伸，按照原大小显示注意：注意：一旦一旦
19、ViewView设置了该属性设置了该属性(假设有效的情况下假设有效的情况下)，那么该，那么该 ViewView的宽度等于的宽度等于原有宽度原有宽度(android:layout_widthandroid:layout_width)加上剩余空间的占比！加上剩余空间的占比！21 2.4：布局组件：布局组件(Layouts)u1 1、LinearLayout(LinearLayout(线性布局线性布局)22 2.4：布局组件：布局组件(Layouts)u2 2、RelativeLayout(RelativeLayout(相对布局相对布局)在相对布局的所有子组件中，后一个组件要参照前一个组件的位置进行
20、摆在相对布局的所有子组件中，后一个组件要参照前一个组件的位置进行摆放。放。相对布局的几个重要属性：相对布局的几个重要属性：上下位置：上下位置：android:layout_above=id/labTitle“android:layout_below=id/labTitle“左右位置：左右位置：android:layout_toLeftOf=id/btnAction“android:layout_toRightOf=id/btnAction对齐方式：对齐方式：android:layout_alignTop=id/btnAction“android:layout_alignBaseline=“id
21、/btnAction“设置视图底端对齐RelativeLayout.23 2.4：布局组件：布局组件(Layouts)u2 2、RelativeLayout(RelativeLayout(相对布局相对布局)RelativeLayout TextView android:id=+id/labTitle android:layout_width=wrap_content android:layout_height=wrap_content Button android:id=+id/btnActionandroid:layout_width=wrap_content android:layout_
22、height=wrap_content android:layout_below=id/labTitleandroid:layout_below=id/labTitle“24 2.4：布局组件：布局组件(Layouts)u3 3、AbsoluteLayout(AbsoluteLayout(绝对布局绝对布局)在绝对布局的所有子组件中，各自为政，必须单独指定其位置信息。理论上来说，通过绝对布局可以随心所欲的放置组件，但是在实际操作中，可能会因为改变一个组件的位置而造成多个组件的位置都要随着调整的情况。android:layout_x：横坐标android:layout_y：纵坐标绝对布局没有额外的
23、属性，其绝对布局没有额外的属性，其xmlxml属性都继承于其父类属性都继承于其父类AbsoluteLayout.25 2.4：布局组件：布局组件(Layouts)u3 3、AbsoluteLayout(AbsoluteLayout(绝对布局绝对布局)AbsoluteLayout 26 2.4：布局组件：布局组件(Layouts)u4 4、FrameLayout(FrameLayout(框架布局，帧布局框架布局，帧布局)FrameLayout是最简单的一个布局对象。所有添加到这个布局中的视图都以层叠的方式显示，最后一个添加的视图显示在最上面，上一层的视图会覆盖下一层的视图。类似于堆栈一样。所有的
24、子元素将会固定在屏幕的左上角；你不能为所有的子元素将会固定在屏幕的左上角；你不能为FrameLayout中的一中的一个子元素指定一个位置。后一个子元素将会直接在前一个子元素之上进行个子元素指定一个位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充覆盖填充，这些元素互相叠加。只有一个元素显示在最前端。FrameLayout.27 2.4：布局组件：布局组件(Layouts)u4 4、FrameLayout(FrameLayout(框架布局框架布局)FrameLayout 28 2.4：布局组件：布局组件(Layouts)u5 5、TableLayout(TableLayout(表格布局表格
25、布局)表格布局TableLayout把它的子视图定位到行和列中。表布局容器不显示行，列和单元的边界线。由TableLayout标签和若干个TableRow标签组成.TableRow对象是一个TableLayout的子视图（每个TableRow定义了表中的一个单独行）。每行有0或多个单元，可用任何其他视图定义。因此，行单元可能由各个视图对象组成，如ImageView或TextView对象。一个单元也可以是一个ViewGroup对象（比如，你可以嵌入另一个表布局作为一个单元）。TableLayout.29 2.4：布局组件：布局组件(Layouts)u5 5、TableLayoutTableLay
26、out(表格布局表格布局)表格布局的几个重要属性：表格布局的几个重要属性：列的伸展：列的伸展：android:stretchColumns=1“android:stretchColumns：属性用于指明哪些列可以伸展：属性用于指明哪些列可以伸展，其属性值可以是单个或者多个列的编号，列编号从0开始，编号与编号之间用“，”分开，如果属性值为如果属性值为”*”,则将每一列等宽拉伸至最大宽度则将每一列等宽拉伸至最大宽度 如果想让控件根据手机屏幕的分辨率来进行自动调整（自适应），必须使如果想让控件根据手机屏幕的分辨率来进行自动调整（自适应），必须使用用dip，而不能使用，而不能使用px进行设置进行设置 30 2.4：布局组件：布局组件(Layouts)u5 5、TableLayout(TableLayout(表格布局表格布局)TableLayout