Android从零开始（二）----UI组件之页面布局

View与ViewGroup

 在Android APP中，所有的用户界面元素都是由View和ViewGroup的对象构成的。View是绘制在屏幕上的用户与之交互的一个对象，而ViewGroup是一个用于存放其他的View或者是ViewGroup对象的一个布局容器。其实这一点有做过前端开发的朋友应该能够直接看明白，就不再多做解释了。

 以防万一，这里用一张从别的地方扒来的图片说明他们之间的层次关系。

图2-1 UI布局层次

 Android App的UI就是以这种层次树的结构所堆叠的，而创建一个UI布局一共有两种方式，一种是自己在JAVA里写代码，另外一种是通过XML来定义布局，XML文件更加接近人的思维，更加易于读懂

，因此我们一般都会采用第二种方式来些Android APP的UI，下面举一个XML的例子。

 可以用一些写过其他界面的知识来尝试着读一个这个代码，外面一个LinearLayout，里面又有两个标签，分别是TextView和Button，没错这个界面就是这么简单，一共使用了三个标签，其实不需要实际知道详细信息也可以进行猜测，外面是一个线性布局，里面一共有两个view，分别是textView大概是个谢文本的吧，另外一个则很明显是一个button。差不多就是这样，具体标签怎么使用有些什么，我们接下来讲。

Android布局

 说到布局，究竟什么才是布局呢？我自己的理解是，首先，布局是一个ViewGroup，也就是说他是去存放一些子层次的容器，不同的布局，就规定了一些不同的规则去使得其中的view甚至是ViewGroup以不同的方式去存放排列。
 网上去搜索Android布局，大多数教程一般都是说，有六大布局，分别是: LinearLayout(线性布局)，RelativeLayout(相对布局)，TableLayout(表格布局), FrameLayout(帧布局)，AbsoluteLayout(绝对布局)，GridLayout(网格布局),但是我认为应该再加上一个ConstraintLayout（约束布局），这个也是后面更新之后，使用很多的一个布局。

线性布局

图2-2 线性布局.png

  线性布局特点：同一级别的软件之间没有位置关系的依赖，只是按照添加顺序依次排列，其中，线性布局最重要的属性是android:orientation，通过指定horizontal与vertical来指定这个布局中元素的排列方向是水平还是竖直排布的，前面举的例子就是一个简单的竖直排布的线性布局。

帧布局

图2-3 帧布局.png

  帧布局感觉在日常使用中不多见，所以就不讲的多详细了，只讲出它的特点吧。
  帧布局会按照添加顺序层叠在一起，默认层叠在左上角位置，本例子因为设置了layout_gravity="center"，所以层叠在视图中心位置。

相对布局

 布局中一个元素的位置使用相对于另一个元素的位置去表示，比如说，一个元素相对于整个布局的来说处于他的左边框的右边，第二个元素又处在前一个元素的下方，相对布局是之前使用最为灵活的布局，但是现在已经被约束布局所代替

绝对布局

 Android手机阵营极其庞大，各个手机分辨率屏幕大小又有不同，因此以绝对的值去指定某个组件的大小的绝对布局，早已被弃用。

表格布局

 顾名思义，就是以表格的形式去排列布局中的元素，通过指定tableRow去指定这个布局中一共有多少个行。

 重点：android:collapseColumns="0,2"的意思就是，隐藏号为0和2的，也就是隐藏第一列和第三列，原本应当有五个button会显示，但是现在只会显示三个。

图2-4 表格布局隐藏列

 可以通过设置android:stretchColumns = "1"属性为1，使得第二列变为可拉伸的列，将其拉伸直至填充满整个行

图2-4 表格布局拉伸列

 表格布局很适合比较规整排列的界面，但是当界面的自由度比较高时，使用表格布局可能不够方便

网格布局

 Android4.0之后才更新的一个布局，其实我之前很少使用，它应该属于表格布局的一个升级，可以想象一些这个布局的使用方式，首先定义的时候，把整个屏幕按照网格的形式，分成固定的多少行多少列，可以设置布局中元素的排布方式，有水平排布和竖直排布两种方式，通过指定某个元素占用多少个行格子多少个列格子，来对页面进行时设计。
设计一个计算器的界面来对网格布局进行说明：

图2-5 网格布局展示

 这是一个挺重要的点，看了之前的代码，应该可以发现，每一个需要占多个行或者列的元素，都需要设定一个 android:layout_gravity = "fill"

约束布局

 ConstraintLayout是2016年google i/o会议上提出的一个新布局，Android studio2.3之后新建moudle所使用的布局就是ConstraintLayout，假如没有使用，那么先要在build.gradle中引入这个包

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.1'
}

 之前约束布局没有出现的时候，是不推荐使用界面可视化工具去通过拖拽来建立整个界面布局的，界面基本都是通过编写XML文件来进行设计的，但是这个约束布局正好相反，它更适合使用界面可视化工具去设计整个页面，让编辑器自动的给我们生成XML文件， 使用过dw软件去编写网页的人应该深有体会，这样能解放不知道多少的工作量，就算手动拖拽的页面有一点边界不吻合的这些小的问题，也可以通过代码的简单修改去实现。

layout_constraintTop_toTopOf       // 将所需视图的顶部与另一个视图的顶部对齐。 

layout_constraintTop_toBottomOf    // 将所需视图的顶部与另一个视图的底部对齐。 

layout_constraintBottom_toTopOf    // 将所需视图的底部与另一个视图的顶部对齐。 

layout_constraintBottom_toBottomOf // 将所需视图的底部与另一个视图的底部对齐。 

layout_constraintLeft_toTopOf      // 将所需视图的左侧与另一个视图的顶部对齐。 

layout_constraintLeft_toBottomOf   // 将所需视图的左侧与另一个视图的底部对齐。 

layout_constraintLeft_toLeftOf     // 将所需视图的左边与另一个视图的左边对齐。 

layout_constraintLeft_toRightOf    // 将所需视图的左边与另一个视图的右边对齐。 

layout_constraintRight_toTopOf     // 将所需视图的右对齐到另一个视图的顶部。

layout_constraintRight_toBottomOf  // 将所需视图的右对齐到另一个的底部。

layout_constraintRight_toLeftOf    // 将所需视图的右边与另一个视图的左边对齐。

layout_constraintRight_toRightOf   // 将所需视图的右边与另一个视图的右边对齐。

总结：Android的页面有很多布局，有些布局因为不适用已经弃用，而剩下的布局中，能够适应最复杂情况的布局为约束布局，当然约束布局也可以去实现一些简单的页面，但是不是说什么地方都要用约束布局，在简单的情况下，去选择合适的软件，才是最正确的做法。