【Android开发-5】界面装修，五大布局你选谁

前言：如果要开一家店，门店装修是很重要的事情。有钱都请专门的建筑设计公司来设计装修，没钱的只能自己瞎折腾，好不好看全凭自己的感觉。像Android开发，在移动端大家看到的界面视觉不咋滴，一般连打开的动力都没了。所以Android开发就有了专门的UI设计人员，既然有了UI设计图，那怎么布局就需要靠自己去选择了，五大布局中可以随意选，只要能达到你的UI设计图的效果。设计图给你了，你选哪位装修工给你装修，就看效率了；不用说，我们都选择效率高的来装修。

Android的五大布局：

1.线性布局（LinearLayout）

2.相对布局（RelativeLayout）

3.帧布局（FrameLayout）

4.表格布局（TableLayout）

5.绝对布局（AbsoluteLayout）

一、线性布局

首先直接看效果图：



接着看界面布局文件中的代码：

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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#aa0000"
android:text="线性布局实战--垂直效果"
android:layout_gravity="center"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#00ff00"
android:text="线性布局实战--垂直效果"
android:gravity="center"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#FFC0CB"
android:text="线性布局实战--垂直效果"
android:layout_gravity="center"
android:layout_weight="1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#b0e0e6"
android:text="线性布局实战--垂直效果"
android:layout_gravity="center"
android:layout_weight="1"
/>
</LinearLayout>

</LinearLayout>

感性分析理解下：

LinearLayout中的android:orientation是线性布局中很重要的一个属性，通过设置两个属性值：vertical和horizontal,它可以让包含在LinearLayout中的子控件按照垂直或者水平方向来布局。

上面还有用到布局中常用的属性，我们也先感性的认识下：
android:layout_width -- 设置布局宽度

android:layout_height -- 设置布局高度（这两个属性，它的值可以设置有match_parent、wrap_content、fill_parent，分别代表匹配父控件高度或宽度，包裹内容的高度或宽度、充满父控件，效果图中可以看到相应效果）

android:layout_gravity -- 设置控件的位置，它的属性值有center/right/left等

android:gravity -- 设置控件中内容位置，它的属性值有center/right/left等
android:background
-- 设置背景色

android:layout_weight
-- 设置控件在LinearLayout中的所占的相对大小比例或者说权重值，这个要大家实践多个控件各种比例，才能更好理解

android:text
-- 设置控件的文本值

注：对于线性布局，当然还可以嵌套各种布局，上面就线性布局嵌套了线性布局；其实各种布局可以互相嵌套，只要没出错就行，实践出真理。

二、相对布局

效果图：



界面布局文件中的代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<TextView
android:id="@+id/first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#E9967A"
android:text="相对布局实战--控件居中" />

<TextView
android:id="@+id/second"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/first"
android:background="#FFC0CB"
android:gravity="center"
android:text="相对布局实战--内容居中" />

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/second" >

<EditText
android:id="@+id/third"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:hint="相对布局嵌套实战" />

<Button
android:id="@+id/fouth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/third"
android:text="相对父控件右对齐" />

<Button
android:id="@+id/fifth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/third"
android:layout_toLeftOf="@id/fouth"
android:text="兄弟控件的左边" />

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/fifth" >

<View
android:id="@+id/strut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="@id/strut"
android:text="控件水平居中" />

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="@id/strut"
android:layout_alignParentRight="true"
android:text="控件水平居中" />
</RelativeLayout>
</RelativeLayout>

</RelativeLayout>

感性分析理解下：

相对布局简单理解就是有个参照物让你参考，比如你相对于参照物1在左边，但是相对于参照物2却在右边。所以你选择的参照物不同，取得的结果也就不一样。
相对布局中，有接触到新属性如下：
android:id -- 设置控件的id,这里设置的id,编译器会自动把它生成在前面介绍过的R.java中

android:layout_centerHorizontal -- 布局中控件水平居中，属性值true/false

android:layout_below -- 相对XX控件的下方，属性值需设置相对XX控件的id

android:layout_toLeftOf -- 设置XX控件的左边，属性值需设置对于XX控件的id

android:layout_alignParentRight -- 相对父控件的右边，属性值true/false

相对布局的控件属性还有很多，但是基本上都是上面的，只是相对位置不同，这个翻翻手册就可以了解。还有从上面可以看出线性布局有时候能做的，相对布局也能做。所以实践中，谁方便就用谁，没强求！

三.帧布局
效果图：



界面布局文件中的代码：

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

<TextView
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#00BFFF"
android:gravity="right"
android:text="一层" />

<TextView
android:layout_width="260dp"
android:layout_height="260dp"
android:background="#FFC0CB"
android:gravity="right"
android:text="二层" />

<TextView
android:layout_width="220dp"
android:layout_height="220dp"
android:background="#F7EED6"
android:gravity="right"
android:text="三层" />

<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:text="四层" />

</FrameLayout>

感性分析理解下：

帧布局可以简单理解成一个洋葱，一层层的堆叠，你拨开一层，就可以看见里面的一层。每个控件在它里面都是相当于一层。如果里面嵌套个线性布局，也相当于一层，不信大家可以实践！
帧布局很重要的就是：它的位置都是从屏幕左上角（0，0）开始布局，然后覆盖的顺序是按你写的控件顺序，最先写的在最下面层，相当于洋葱的最里层。

四、表格布局

效果图：



界面布局文件中的代码：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:shrinkColumns="0"
android:stretchColumns="0,1,2" >

<TableRow>

<Button
android:layout_column="0"
android:text="第一行" />

<Button
android:layout_column="1"
android:text="第一行" />
</TableRow>

<TableRow>

<Button
android:layout_column="0"
android:text="第二行" />

<Button
android:layout_column="2"
android:text="第二行" />
</TableRow>

<TableRow>

<Button
android:layout_column="1"
android:text="第三行" />
</TableRow>

<TableRow>

<Button
android:layout_column="1"
android:layout_span="2"
android:text="第四行" />
</TableRow>

</TableLayout>

感性分析理解下：

表格这个顾名思义，就很容易理解。不就是一张表格嘛，表格主要就是行和列，所以表格布局，懂得怎么设置行和列，基本搞定。

表格布局中，属性如下：

android:shrinkColumns -- 查shrink英文单词，是收缩的意思，所以它就是列里面内容很多时，它就收缩，属性值设置指定列
android:stretchColumns -- 伸缩行，尽量占满界面，属性值设置指定列，比如1，2，3

android:layout_column -- 设置指定列，比如是0，还是1，还是2

android:layout_span -- 设置一个霸占总数的几列，你设置2，总数为3，就是当前列独享2列的宽度

TableRow -- 设置行

五、绝对布局

效果图：



界面布局文件中的代码：

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="20dip"
android:layout_y="20dip"
android:text="帐号：" />

<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="80dip"
android:layout_y="15dip"
android:width="210px" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="20dip"
android:layout_y="80dip"
android:text="密  码：" />

<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="80dip"
android:layout_y="75dip"
android:password="true"
android:width="210px" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="130dip"
android:layout_y="135dip"
android:text="登   录" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="220dip"
android:layout_y="135dip"
android:text="重  置" />

</AbsoluteLayout>

感性分析理解下：

绝对布局可以这样简单理解，你拥有绝对的权利，你想在界面哪个位置放控件，就可以在哪个位置放控件。
绝对布局最重要的助手：
android:layout_x="xxdip"
android:layout_y="xxdip"
通过这两个助手，你就可以命令界面中的控件在哪个位置呆着，就在哪个位置呆着。

终于五大布局，弄完了。自己通过实践也进一步加深理解，总的说有收获！