2019-08-26 Day22 布局方式与图像解锁DEMO

---

目的

• 了解Android布局，学习如何使用他们，明白其布局方式
• 使用所学布局知识，完成图像解锁demo

Android布局

概念

布局就是主要把界面中的控件按照某种规律摆放在指定的位置；主要是为了解决应用程序在不同手机中的显示问题

布局种类

• AbsoluteLayout（绝对布局）
• FrameLayout（框架布局/帧布局）
• LinearLayout（线性布局）
• RelativeLayout（相对布局）
• TableLayout（表格布局）
• ConstraintLayout（约束布局）
  今天所讲解的是FrameLayout（框架布局/帧布局）、LinearLayout（线性布局）、RelativeLayout（相对布局）以及ConstraintLayout（约束布局）

帧布局 FrameLayout

帧布局是将所有的子元素放在整个界面的左上角，后面的子元素直接覆盖前面的子元素，所以用的比较少

属性

• android:foreground: 设置改帧布局容器的前景图像
• android:foregroundGravity: 设置前景图像显示的位置

使用方法

效果如下：

image.png

线性布局 LinearLayout

线性布局是按照水平或垂直的顺序将子元素(可以是控件或布局)依次按照顺序排列，每一个元素都位于前面一个元素之后

方向 Orientation

线性布局分为两种——水平方向和垂直方向的布局
系统默认采用横向布局

• Vertical（竖向）

从左到右 
android:orientation=”horizontal”

代码实例：

效果如下：

image.png

• Horizontal（横向）

从上到下 
android:orientation=”vertical”

代码实例：

效果如下：

image.png

对齐方式

线性布局里有两种设置边距的方式，分别是Margin和Padding
Margin：控件边缘和其他控件的间距，即外间距
Padding：控件内部内容和控件自己边缘的间距，即内间距

image.png

红色的箭头表示的是Margin,而黑色的箭头表示的是Padding；在线性布局中，各个控件不会重叠，因为它们依照顺序排布

权重 layout_weight

LinearLayout 支持使用 android:layout_weight 属性为各个子视图分配权重。此属性根据视图应在屏幕上占据的空间量向视图分配“重要性”值。 权重值更大的视图可以填充父视图中任何剩余的空间。子视图可以指定权重值，然后系统会按照子视图声明的权重值的比例，将视图组中的任何剩余空间分配给子视图。 默认权重为零。
android:layout_weight 表示子元素占据的空间大小的比例。分配权重值，其值越小，权重越大。

其计算方法大致如图：

QQ图片20190826211041.png

使用方法

效果如下：

image.png

相对布局 RelativeLayout

相对布局是在页面内，以控件之间相对位置或相对父容器位置进行排列。同时，必须确定控件的x和y坐标以及长和宽

注意：在引用其他子元素之前，引用的ID必须已经存在，否则将出现异常。

属性

image.png

image.png

使用方法

效果如下：

image.png

约束布局 ConstraintLayout

约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件

属性

image.png

使用方法

效果如下：

image.png

不太确定控件的宽和高的时候，写作0dp

宽高比例

效果如下：

image.png

在app:layout_constraintDimensionRatio="a,1:2"中，如果a为w，就是高宽比；如果a为h，就是宽高比

平分宽度

效果如下：

image.png

---

心得体会

总算是把四个布局搞得比较清楚，也算会使用一些，但还是会有问题，继续克服