Andriod应用开发基础教程课件 第2章 常用布局

Andriod应用开发基础教程第2章常用布局

布局定义了应用中的界面结构，布局中的所有元素都是建立在View（视图）和ViewGroup（视图容器）的基础上的。View通常绘制用户可以看到的控件，例如Button（按钮）和TextView（文本框），是Android所有控件的的基类，View本身可以是单个控件也可以是由多个控件组成的一组控件，通过这种关系就形成了View树的结构。View还包含事件处理使用户和界面可以进行交互。ViewGroup是一个不可见的容器，例如LinearLayout（线性布局）和ConstraintLayout（约束），它定义了View和其他ViewGroup对象的布局结构，ViewGroup是View的子类因此它也是View，但是ViewGroup可以容纳View和ViewGroup，但View不可以再容纳其他View或ViewGroup。图2-1

Android界面视图层次结构

布局可以通过以下两种方式声明：1、在XML中声明UI元素：Android开发中最常用的布局方式，可以通过XML文件定义UI控件的位置、大小、颜色等属性。2、JAVA代码中实例化布局元素：Android还允许通过代码来动态创建布局，这通常在需要动态调整布局或在复杂布局时使用。代码布局相比XML布局更加灵活，但是过度使用代码布局会使得代码变得难以维护且不符合MVC的设计原则，通常建议在简单布局中使用代码布局，在需要重用布局或者需要动态调整布局时使用XML布局。2.1线性布局

线性布局（LinearLayout）是Android开发中最基础且常用的布局方式之一，适合比较简单的布局场景，它允许开发者将子视图按照垂直或水平方向进行有序排列。在XML中运用线性布局只需在根元素层级内添加一个<LinearLayout>标签并设置相应的属性和布局参数即可。

表2-1线性布局中常用的属性属性属性值作用android:orientationvertical：垂直horizontal：水平设置布局的方向android:layout_widthandroid:layout_heightwrap_content：根据内容自适应大小match_parent：匹配父容器的大小具体像素值：如10dp定义LinearLayout本身的宽度和高度android:layout_gravitycenter_horizontal：水平居中center_vertical：垂直居中center：居中left、right：左部、右部top、bottom：上部、下部子视图在LinearLayout内部的对齐方式android:gravity同layout_gravity设置自身内部元素的对齐方式android:layout_weight整数控制子视图在垂直或水平方向上占据的空间比例android:layout_marginandroid:padding具体像素值：如5dp分别设置LinearLayout的外边距和内边距案例2.1

使用线性布局制作如图2-2所示的用户登录界面（参考代码见LinearLayoutActivity）图2-2用户登录应用界面2.2相对布局相对布局（RelativeLayout），顾名思义，就是需要有一个参照物，根据参照物来确定视图的位置，该参照物可以是其它视图，也可以是父容器。通过前面的线性布局案例可以发现，如果需要在多个方向上进行布局，就要嵌套多个线性布局。界面越复杂工作量越大，为了减少工作量可以在需要嵌套多个线性布局才能实现的布局中使用相对布局。相对布局十分灵活，可以实现复杂界面的设计，但掌握起来比较难。表2-2相对布局中常用的属性属性属性值作用与父容器定位相关属性android:layout_alignParentToptrue、false值为true时此视图的顶部与父视图的顶部边缘对齐android:layout_alignParentBottomtrue、false值为true时此视图的底部与父视图的底部边缘对齐android:layout_alignParentLefttrue、false值为true时此视图的左部与父视图的左部边缘对齐android:layout_alignParentRighttrue、false值为true时此视图的右部与父视图的右部边缘对齐android:layout_alignParentStarttrue、false值为true时此视图的起始边与父视图的右部起始边对齐android:layout_alignParentEndtrue、false值为true时此视图的结束边与父视图的右部结束边对齐android:layout_centerInParenttrue、false值为true时此视图位于父视图的居中位置android:layout_centerHorizontaltrue、false值为true时此视图位于父视图的水平方向上的居中位置android:layout_centerVerticaltrue、false值为true时此视图位于父视图的垂直方向上的居中位置相对其它视图定位属性android:layout_above其他视图id将此视图的底部边缘定位在给定视图的上方android:layout_below其他视图id将此视图的顶部边缘定位在给定视图的下方android:layout_toLeftOf其他视图id将此视图的右部边缘定位在给定视图的左方android:layout_toRightOf其他视图id将此视图的左部边缘定位在给定视图的右方android:layout_alignTop其他视图id将此视图的顶部边缘和给定视图的顶部边缘对齐android:layout_alignBottom其他视图id将此视图的底部边缘与给定视图的底部边缘对齐android:layout_alignLeft其他视图id将此视图的左部边缘与给定视图的左部边缘对齐android:layout_alignRight其他视图id将此视图的右部边缘与给定视图的右部边缘对齐android:layout_alignStart其他视图id将此视图的起始边与给定视图的起始边对齐android:layout_alignEnd其他视图id将此视图的结束边与给定视图的结束边对齐android:layout_alignBaseline其他视图id将此视图的基线与给定视图的基线对齐案例2.2

相对布局中视图相对于父容器的位置演示（参考代码见：RelativeLayoutActivity）android:layout_centerInParent="true"android:layout_centerHorizontal="true"android:layout_centerVertical="true"android:layout_alignParentTop="true"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:layout_alignParentLeft="true"案例2.3

相对布局中视图相对于其它视图的位置演示（参考代码见：RelativeLayoutActivity）android:layout_above="@+id/reference_1"android:layout_below="@+id/reference_2"android:layout_toLeftOf="@+id/reference_3"android:layout_toRightOf="@+id/reference_4"android:layout_alignTop="@+id/reference_5"android:layout_alignBottom="@+id/reference_6"android:layout_alignLeft="@+id/reference_7"android:layout_alignRight="@+id/reference_8"案例2.4

用相对布局完成案例2-1的用户登录界面（参考代码见：RelativeLayoutActivity）RelativeLayoutActivity加载布局文件activity_relative_layout_land.xml，运行RelativeLayoutActivity后生成应用界面如图2-2所示，用户名密码登陆部分代码部分得到了精简，可见相对布局在复杂界面设计中可一定程度上减少布局嵌套，优化代码。2.3绝对布局

AbsoluteLayout(绝对布局)中的控件是通过指定其在父容器中的精确坐标来确定的，否则将会被排在左上角，而手机应用需要适应不同的屏幕大小，而这种布局模型不能自适应屏幕尺寸大小，所以应用的相对较少。表2-3绝对布局中常用的属性属性属性值作用android:layout_x具体像素值：如20dp设置视图X坐标android:layout_y具体像素值设置视图Y坐标案例2.5

绝对布局演示（参考代码见：AbsoluteLayoutActivity）2.4表格布局

Android中也允许使用表格行与列的方式来排列控件即表格布局（TableLayout）。表格布局不需要声明包含了多少行、多少列，而是通过添加<TableRow>标签和其他控件的方式来确定表格的行数和列数，使用表格布局有以下注意事项；1、如果直接在TableLayout中添加控件，那么控件将和父容器等宽；2、如果想让控件出现在同一行，那么这些控件的外层一定要加一对<TableRow>；3、在TableRow中的控件，宽度都是默认wrap_content。表2-4

表格布局中常用的属性属性属性值作用android:stretchColumns列的索引值，从0开始，多个列索引值必须用逗号隔开，也可用通过“*”代替所有列拉伸列以填满剩下的多余空白空间。android:shrinkColumns收缩列。当可收缩的列过宽(内容过多)不会被挤出屏幕，注意：一列能同时收缩和拉伸android:collapseColumns隐藏列，从页面消失不占空间android:layout_span列数量列数跨度，指定当前View所占的列数。如android:layout_span="2"该控件占据2列android:layout_column列的索引值设置当前View所在的列，如android:layout_column="1"该控件显示在第2列案例2.6

使用表格布局设计一个简单的计算器界面。（参考代码见：TableLayoutActivity）2.5网格布局

网格布局（GridLayout）相对于表格布局和线性布局嵌套更加灵活，网格布局中可以自定义网格行数和列数、控件位于网格的行列位置、控件跨越的行列数及控件排列方式等网格布局和线性布局一样，也分为水平和垂直两种方式，默认水平布局下一个控件挨着一个控件从左到右依次排列，达到设置列数后控件会自动换行进行排列。表2-5网格布局中常用的属性属性属性值作用android:columnCount整数定义网格列数android:rowCount定义网格行数android:layout_columnSpan设置当前Viw所占的列数android:layout_rowSpan设置当前Viw所占的行数android:layout_column设置当前view所在的列注：某控件跨越多行或多列，需要将该控件的lavout_rowSpan或lavout_columnSpan属性设置为跨越的行列数，再设置layout_gravity=“fill”，表明该控件填满所跨越的行或列。案例2.7

使用网格布局改进计算器界面显示（参考代码见：GridLayoutActivity）2.6帧布局

帧布局(FrameLayout)是一种可叠加的布局，后添加的控件会层叠在先添加的控件上，后添加控件会覆盖先添加的控件。表2-6帧布局的常用属性属性属性值作用android:layout_marginTop像素值设置上外边距android:layout_marginBottom设置下外边距android:layout_marginLeft‌设置左外边距android:layout_marginRight‌设置右外边距android:paddingLeft‌设置左内边距android:paddingRight设置右内边距android:paddingTop设置上内边距android:paddingBottom‌设置下内边距android:gravitycenter、left、right等位置值控制子View在父容器内部的位置案例2.8

帧布局演示（参考代码见：FrameLayoutActivity）2.7约束布局

约束布局(ConstraintLayout)主要是为了解决布局嵌套过多的问题，它通过定义界面元素之间的相对位置和尺寸关系，自动调整布局以适应不同的屏幕尺寸和方向。要在约束布局中定义某个视图的位置，必须为该视图添加至少一个水平约束条件和一个垂直约束条件，每个约束条件均表示与其他视图、父布局或隐形引导线之间连接或对齐方式。2.7.1添加删除约束

成功创建ConstraintLayoutActivity后，在本模块res资源目录下打开布局文件activity_constraint_layout.xml，点击界面“Design”进入Design（设计）界面添加约束条件前先从“Palette”中拖入控件到Design界面中选中“Button”后可见该控件四周出现蓝色矩形框，该方框四个角有4个实心方框，四条边中心位置有4个空心圆圈，鼠标左键拖动这四个4个实心方框可对Button控件进行拉伸收缩操作，鼠标左键按住空心圆圈，将其拖动到边界或其它控件对应位置，即可为该控件添加对应的水平或垂直约束删除约束时，可以一次性删除所有约束，也可删除指定的约束1、删除所有约束：点击Design界面中的“ClearAllConstraints”。2、删除指定的约束：选中约束对应的圆点后按下“Delete”键。2.7.2约束布局中的约束方式

1、相对定位约束相对定位约束即用目标控件对被约束控件进行约束定位，需要注意的是垂直方向的约束，其目标控件件的约束也必须是垂直方向的，同理水平方向的约束，其目标控件的约束也必须是水平方向的。表2-7常用的相对定位约束属性及说明要设置被约束控件在父控件或目标控件居中对齐方法如下：（1）垂直居中layout_constraintBottom_toBottomOf="parent"layout_constraintTop_toTopOf="parent"（2）水平居中layout_constraintLeft_toLeftOf="parent"layout_constraintRight_toRightOf="parent"（3）垂直水平居中layout_constraintBottom_toBottomOf="parent"layout_constraintTop_toTopOf="parent"layout_constraintLeft_toLeftOf="parent"layout_constraintRight_toRightOf="parent"2、角度定位约束约束布局中的角度定位，通过设置角度和距离来确定两个控件的相对位置，其中距离是指被约束控件和目标控件中心点距离，角度是以Y轴正半轴为旋转起始线顺时针旋转来计算的。表2-8常用的角度定位约束属性及说明当角度设置为0时，被约束控件在目标控件正上方；当角度设置为90时，被约束控件在目标控件正右方；当角度设置为180时，被约束控件在目标控件正下方；当角度设置为270时，被约束控件在目标控件正左方。属性属性值作用android:layout_constraintCircle目标控件id用目标控件中心点确定定位原点android:layout_constraintCircleAngle角度旋转角度android:layout_constraintCircleRadius像素值被约束控件和目标控件中心点距离3、引导线约束可以添加垂直或水平引导线来约束控件，该引导线用户不可见。引导线定位需要先设置引导线方向再确定引导线的起始位置，起始位置可用像素值或百分比设置。表2-9常用的引导线约束属性及说明属性属性值作用android:orientationvertical：垂直horizontal：水平设置引导线的显示方向android:layout_constraintGuide_begin像素值设置引导线的起始距离android:layout_constraintGuide_end像素值设置引导线的结束距离android:layout_constraintGuide_percent0-1之间小数以比例方式设置引导线的起始距离4、尺寸约束约束布局中还支持控件尺寸约束，如约束控件最大最小高宽度、控件高宽比、控件尺寸和父布局尺寸的百分比等。表2-10尺寸束属性及说明属性属性值作用控件高度或宽度为wrap_content时，可以约束其最大最小的高宽度android:minWidth像素值设置被约束控件最小的宽度android:minHeight像素值设置被约束控件最小的高度android:maxWidth像素值设置被约束控件最大的宽度android:maxHeight像素值设置被约束控件最大的高度修改控件高宽为0dp，控件尺寸可按照父布局尺寸的百分比来设置android:layout_constraintWidth_percent0-1之间小数宽度占父布局百分比比例android:layout_constraintHeight_percent0-1之间小数高度占父布局百分比比例当宽高有一个被设置为0dp时，可设置宽高比android:layout_constraintDimensionRatio比例值被约束控件宽高比设置2.7.3边距和偏移

边距即设置被约束控件外边距对