View与ViewGroup
在Android APP中，所有的用户界面元素都是由View和ViewGroup的对象构成的。View是绘制在屏幕上的用户与之交互的一个对象，而ViewGroup是一个用于存放其他的View或者是ViewGroup对象的一个布局容器。其实这一点有做过前端开发的朋友应该能够直接看明白，就不再多做解释了。
图2-1 UI布局层次
Android App的UI就是以这种层次树的结构所堆叠的，而创建一个UI布局一共有两种方式，一种是自己在JAVA里写代码，另外一种是通过XML来定义布局，XML文件更加接近人的思维，更加易于读懂
，因此我们一般都会采用第二种方式来些Android APP的UI，下面举一个XML的例子。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a Button" />
</LinearLayout>
可以用一些写过其他界面的知识来尝试着读一个这个代码，外面一个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去指定这个布局中一共有多少个行。
<TableLayout
android:id="@+id/TableLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:collapseColumns="0,2" >
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="one" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="two" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="three" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="four" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="five" />
</TableRow>
</TableLayout>
重点：android:collapseColumns="0,2"的意思就是，隐藏号为0和2的，也就是隐藏第一列和第三列，原本应当有五个button会显示，但是现在只会显示三个。
图2-4 表格布局隐藏列
可以通过设置android:stretchColumns = "1"属性为1，使得第二列变为可拉伸的列，将其拉伸直至填充满整个行
图2-4 表格布局拉伸列
表格布局很适合比较规整排列的界面，但是当界面的自由度比较高时，使用表格布局可能不够方便
网格布局
Android4.0之后才更新的一个布局，其实我之前很少使用，它应该属于表格布局的一个升级，可以想象一些这个布局的使用方式，首先定义的时候，把整个屏幕按照网格的形式，分成固定的多少行多少列，可以设置布局中元素的排布方式，有水平排布和竖直排布两种方式，通过指定某个元素占用多少个行格子多少个列格子，来对页面进行时设计。
设计一个计算器的界面来对网格布局进行说明：
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/GridLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="4"
android:orientation="horizontal"
android:rowCount="6" >
<TextView
android:layout_columnSpan="4"
android:layout_gravity="fill"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#FFCCCC"
android:text="0"
android:textSize="50sp" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:text="回退" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:text="清空" />
<Button android:text="+" />
<Button android:text="1" />
<Button android:text="2" />
<Button android:text="3" />
<Button android:text="-" />
<Button android:text="4" />
<Button android:text="5" />
<Button android:text="6" />
<Button android:text="*" />
<Button android:text="7" />
<Button android:text="8" />
<Button android:text="9" />
<Button android:text="/" />
<Button
android:layout_width="wrap_content"
android:text="." />
<Button android:text="0" />
<Button android:text="=" />
</GridLayout>
图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 // 将所需视图的右边与另一个视图的右边对齐。
网友评论