说起UI布局，实际上就相当于我们小时候玩的拼图游戏，Android为我们提供了各种各样的布局和控件（拼图块儿），我们只需要根据不同的需求来将各个布局和控件拼起来。

注意：所有的布局或者控件都必须要指定宽和高：width&height

这里有三个属性：

fill_parent：填满父容器

match_parent：可填满的最大值

wrap_content：根据内部内容自适应大小

1.五大布局：

线性布局 LinearLayout

线性布局有一个最重要的属性：方向（orientation）

它可以指定我们内容的排列方式：要么从上到下/要么从左到右

我们可以在LinearLayout标签内部通过android:orientation="方向"来指定排列方向

android:orientation="vertical" -->指定排列方向为从上到下

android:orientation="horizontal" -->指定排列的方向从左到右

让我们写个布局看看

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />
<LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    >
    <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />
</LinearLayout>

</LinearLayout>

可以看到我们首先在一个纵向的LinearLayout中添加了两个图片控件和一个横向的LinearLayout，显示出来是这样的

线性布局

另外，线性布局还有一些属性：

    layout_gravity:当前控件相对于父控件的对齐方式
    gravity：当前控件中的内容或子控件相对于当前控件的对齐方式
    margin: 当前控件相对于四周控件的间距；
    padding：当前控件中的内容相对于当前控件的间距；

相对布局RelativeLayout

相对布局不需要想线性布局一样指定方向，不过需要指定每个控件的相对位置，什么是相对位置呢？----------比如说坐座位，你坐在我的左边，你相对我就是左，我在你屁股后面，我相对你的屁股，就是在后面。这么理解应该就容易一些了吧。
相对布局有几个常用的属性：

android:layout_toLeftOf —— 该组件位于引用组件的左方　　　　android:layout_toRightOf —— 该组件位于引用组件的右方　　　　android:layout_above —— 该组件位于引用组件的上方　　　　android:layout_below —— 该组件位于引用组件的下方 　　 android:layout_alignParentLeft —— 该组件是否对齐父组件的左端 　 android:layout_alignParentRight —— 该组件是否齐其父组件的右端 　android:layout_alignParentTop —— 该组件是否对齐父组件的顶部 　android:layout_alignParentBottom —— 该组件是否对齐父组件的底部　　
android:layout_centerInParent —— 该组件是否相对于父组件居中　　　　
android:layout_centerHorizontal —— 该组件是否横向居中　　　　android:layout_centerVertical —— 该组件是否垂直居中

让我们来看看代码

<RelativeLayout       xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="中"
    android:textSize="30sp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/center"
    android:layout_toLeftOf="@+id/center"
    android:text="左"
    android:textSize="30sp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/center"
    android:layout_toRightOf="@+id/center"
    android:text="右"
    android:textSize="30sp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/center"
    android:layout_alignLeft="@+id/center"
    android:text="上"
    android:textSize="30sp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/center"
    android:layout_below="@+id/center"
    android:text="下"
    android:textSize="30sp" />
</RelativeLayout>

我们可以看到，每一个控件他都有相对于另一个控件或者父控件的位置

效果图：

相对布局

帧布局FrameLayout

帧布局也是Android开发中常用的布局，理解起来的话就像小时候看的动画片一样
再不理解给你看个动画
外国牛人手绘七龙珠
…………暴露年龄了

帧布局的绘制都是从屏幕的左上角开始绘制，每个控件都会覆盖上一个控件

废话不多说，上代码

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eeff0000"
    android:gravity="center"
    android:text="这是第一个控件"
    android:textSize="50sp" />

<TextView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="#4400ff00"
    android:gravity="center"
    android:text="这是第二个控件"
    android:textSize="13sp" />

</FrameLayout>

我们现在在一个帧布局中添加了两个控件，并且为了区分，设置了不同的背景颜色，和尺寸大小

效果图：

帧布局

可以看到，我们设置的第一个控件的大小为填满父窗体，第二个大小指定宽和高都是50dp，我们首先添加的控件被第二个控件从屏幕的左上角开始覆盖了，因为宽和高有限，所有没有全部覆盖。这样做的好处就是，我们可以在一个activity页面中切换不同的界面，后面会讲。

表格布局

TableLayout代表一个表格TableLayout中的一个TableRow代表一行；TableRow中的一个控件代表一列；

不常用 ，可以用GridView代替

绝对布局 （被google抛弃了）

这个标题够不够醒目，绝对布局招谁惹谁了。。。
他其实上就是给控件指定具体的位置，因为太麻烦了，而且功能也不是特别突出，所以被上面三种布局给比下去了，用的人很少，可以说几乎没有，如果有。。。。。。。那一定是个耿直boy

权重

所谓的权重就是等比例划分，在线性布局中使用，可以用来屏幕适配从开发的角度来讲，Android和ios比最大的麻烦就是屏幕适配（虽然我不会ios）不同的机型，不同的尺寸，你写一套布局并不能适应所有的屏幕尺寸，可能在试验机上好好的，换到另一个手机，看起来就走形了，权重适配是解决这个问题的方法之一。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" 
android:orientation="horizontal">

<TextView 
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_weight="1"
    android:background="#f00"
    />

<TextView 
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_weight="1"
    android:background="#0f0"
    />
</LinearLayout>

在这个线性布局中我们指定了方向为横向，添加了两个文本控件，并且设置width(宽度)都为0dp，weight(权重)都为1，就是说，我们把LinearLayout这个父控件的宽度平均分成了两份，每个控件各占一份（1/2）

权重图1

有人有疑问了，我们可不可以让红色的控件占屏幕的1/2，让绿色的控件占屏幕的1/4呢？
答：可以，我们可以通过 android:weightSum=""这个属性，来设置具体把父控件分成几份，然后根据每个控件占几份来指定它的大小

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" 
android:orientation="horizontal"
android:weightSum="4">

<TextView 
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_weight="2"
    android:background="#f00"
    />

<TextView 
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_weight="1"
    android:background="#0f0"
    />
</LinearLayout>

看到了么？是不是很神奇？

权重2

总结

相信看完这篇文章，你已经对布局有一些认识并且会简单使用了，后面我会关于android开发中一些常用的控件写一篇文章。