Android 布局详解图文.docx

资源描述

Android 布局详解图文.docx

《Android 布局详解图文.docx》由会员分享，可在线阅读，更多相关《Android 布局详解图文.docx（29页珍藏版）》请在冰点文库上搜索。

Android 布局详解图文.docx

Android布局详解图文

Android布局详解【图文】

原文分四篇在这里我将其整理方便大家学习下载：

下载地址：

Android布局是开发中非常重要的一个知识部分，它的布局分为以下几种：

LinearLayout：

线性布局

RelativeLayout：

相对布局

TableLayout：

表格布局

GridView：

网格布局

TabLayout：

选项卡布局

ListView：

列表布局

一、LinearLayout

简单来说，直着排，横着排都可以，还可以嵌套，此布局运用的非常多。

下面直接上示例代码及截图：

接下来，看一下布局XML文件:

--lversion="

xmlversion="1.0"encoding="utf-8"?

android="

android:

orientation="vertical"android:

layout_width="fill_parent"

android:

layout_height="fill_parent">

orientation="horizontal"

android:

layout_width="fill_parent"android:

layout_height="fill_parent"

android:

layout_weight="1">

text="red"android:

gravity="center_horizontal"

android:

background="#aa0000"android:

layout_width="wrap_content"

android:

layout_height="fill_parent"android:

layout_weight="1"/>

text="green"android:

gravity="center_horizontal"

android:

background="#00aa00"android:

layout_width="wrap_content"

android:

layout_height="fill_parent"android:

layout_weight="1"/>

text="blue"android:

gravity="center_horizontal"

android:

background="#0000aa"android:

layout_width="wrap_content"

android:

layout_height="fill_parent"android:

layout_weight="1"/>

text="yellow"android:

gravity="center_horizontal"

android:

background="#aaaa00"android:

layout_width="wrap_content"

android:

layout_height="fill_parent"android:

layout_weight="1"/>

orientation="vertical"

android:

layout_width="fill_parent"android:

layout_height="fill_parent"

android:

layout_weight="1">

text="rowone"android:

textSize="15pt"

android:

layout_width="fill_parent"android:

layout_height="wrap_content"

android:

layout_weight="1"/>

text="rowtwo"android:

textSize="15pt"

android:

layout_width="fill_parent"android:

layout_height="wrap_content"

android:

layout_weight="1"/>

text="rowthree"android:

textSize="15pt"

android:

layout_width="fill_parent"android:

layout_height="wrap_content"

android:

layout_weight="1"/>

text="rowfour"android:

textSize="15pt"

android:

layout_width="fill_parent"android:

layout_height="wrap_content"

android:

layout_weight="1"/>

下面详细详解这些配置的含义：

LinearLayout标签的常用属性

android:

orientation="horizontal"：

定义方向水平或垂直（horizontal/vertical ）

android:

layout_width="fill_parent"：

宽度填充满父控件的宽度

android:

layout_height="fill_parent"：

宽度填充满父控件的高度

android:

layout_weight="1"：

重量?

可解释为权重，这是个什么意思呢，请看下图

我将这里的配置变了一下，

orientation="horizontal"

android:

layout_width="fill_parent"android:

layout_height="fill_parent"

android:

layout_weight="1">

text="red"android:

gravity="center_horizontal"

android:

background="#aa0000"android:

layout_width="wrap_content"

android:

layout_height="fill_parent"android:

layout_weight="1"/>

text="green"android:

gravity="center_horizontal"

android:

background="#00aa00"android:

layout_width="wrap_content"

android:

layout_height="fill_parent"android:

layout_weight="2"/>

text="blue"android:

gravity="center_horizontal"

android:

background="#0000aa"android:

layout_width="wrap_content"

android:

layout_height="fill_parent"android:

layout_weight="3"/>

text="yellow"android:

gravity="center_horizontal"

android:

background="#aaaa00"android:

layout_width="wrap_content"

android:

layout_height="fill_parent"android:

layout_weight="4"/>

可以看到我设置成了1，2，3，4，这四TextView显示的宽度不一样了，具体是怎么算的，这个我们就不追究了，意思清楚就行，都设置为1则平分，否则数给的越大，占的位置就越多。

再看一下TextView的解释

text="red"android:

gravity="center_horizontal"

android:

background="#aa0000"android:

layout_width="wrap_content"

android:

layout_height="fill_parent"android:

layout_weight="1"/>

android:

text="red"：

要显示的内容

android:

gravity="center_horizontal"：

显示内容的对齐方式

android:

background="#aa0000"：

背景色

android:

layout_width="wrap_content"：

宽度，包括自己的内容的宽度

android:

layout_height="fill_parent"：

高度，填充父控件的高度

android:

layout_weight="1"：

权重

其实含义如果懂些CSS属性的话，还是蛮好懂的，布局跟Div有点类似

//类似一个外层DIV，里面的内容垂直布局android:

orientation="vertical"

android="

android:

orientation="vertical"android:

layout_width="fill_parent"

android:

layout_height="fill_parent">

//类似第一个子DIV，内容水平布局android:

orientation="horizontal"

android:

layout_width="fill_parent"android:

layout_height="fill_parent"

android:

layout_weight="1">

//类似第二个子DIV，内容垂直布局android:

orientation="vertical"

android:

layout_width="fill_parent"android:

layout_height="fill_parent"

android:

layout_weight="1">

先把大的框框画好，再在各个子框里面细画内容，这个布局蛮简单的。

二、RelativeLayout

RelativeLayout

RelativeLayout布局:

相对位置布局，类似于Word中的位置对齐，总共有九个方位，如下图所示

下面,我们来看看布局文件的代码与详解:

viewplain

xml version="1.0" encoding="utf-8"?

android="

4. android:

layout_width="fill_parent"

5. android:

layout_height="fill_parent">

7. android:

id="@+id/label"

8. android:

layout_width="fill_parent"

9. android:

layout_height="wrap_content"

10. android:

text="Type here:

"/>

11.

12. android:

id="@+id/entry"

13. android:

layout_width="fill_parent"

14. android:

layout_height="wrap_content"

15. android:

background="@android:

drawable/editbox_background"

16. android:

layout_below="@id/label"/>

17.

18. android:

id="@+id/ok"

19. android:

layout_width="wrap_content"

20. android:

layout_height="wrap_content"

21. android:

layout_below="@id/entry"

22. android:

layout_alignParentRight="true"

23. android:

layout_marginLeft="10dip"

24. android:

text="OK" />

25.

26. android:

layout_width="wrap_content"

27. android:

layout_height="wrap_content"

28. android:

layout_toLeftOf="@id/ok"

29. android:

layout_alignTop="@id/ok"

30. android:

text="Cancel" />

31.

android="

android:

layout_width="fill_parent"

android:

layout_height="fill_parent">

RelativeLayout声明此Activity使用相对布局,

android:

layout_width="fill_parent":

宽度填充父控件的宽度

android:

layout_height="fill_parent":

高度填充父控件的高度

TextView //一个标签

android:

id="@+id/label" //组件ID

android:

layout_width="fill_parent" //宽,填充父控件

android:

layout_height="wrap_content"//高,刚刚包含自己的内容的高度,相当于自适应

android:

text="Typehere:

" //标签显示的内容

EditText //一个文本框

android:

id="@+id/entry" //组件ID

android:

layout_width="fill_parent" //宽

android:

layout_height="wrap_content" //高

android:

background="@android:

drawable/editbox_background" //背景色

android:

layout_below="@id/label" //below英文单词译为在…下,这里引用前面的标签组

件,意为摆在这个标签的下面

Button //一个按钮

android:

id="@+id/ok" //组件ID

android:

layout_width="wrap_content" //宽度自适应

android:

layout_height="wrap_content" //高度自适应

android:

layout_below="@id/entry" //在前面组件文本框的下面

android:

layout_alignParentRight="true"//相对父控件右对齐,这里的父控件应该是屏幕,

即屏幕的右边

android:

layout_marginLeft="10dip"//组件的外边距10个像素,margin,padding

可以看看CSS的讲解.

android:

text="OK"//按钮上显示的内容

Button

android:

layout_width="wrap_content"//宽自适应

android:

layout_height="wrap_content"//高自适应

android:

layout_toLeftOf="@id/ok"//使当前控件置于id为ok的控件的左边。

android:

layout_alignTop="@id/ok"//使当前控件与id为ok控件的上端排齐。

android:

text="Cancel"//按钮上显示的内容

可以看到相对位置的对齐方式有以下图中所示的这么多:

可以分别对应Word中的九个方位,以及还可以设置类似CSS中的组件与组件之间的外边距,如margin即是设置这一项,注意layout_margin这一项设置像素以后,则是设置的上下左右四个方位的值,如果只想设置某一边的话,则使用下面的marginLeft……之一,

设置组件内文字与组件边距可用属性padding,如下图:

最后效果图为

三、TableLayout

viewplain

xml version="1.0" encoding="utf-8"?

android="

3. android:

layout_width="fill_parent"

4. android:

layout_height="fill_parent"

5. android:

stretchColumns="1">

9. android:

layout_column="1"

10. android:

text="Open..."

11. android:

padding="3dip" />

12.

13. android:

text="Ctrl-O"

14. android:

gravity="right"

15. android:

padding="3dip" />

16.

17.

18.

19.

20. android:

layout_column="1"

21. android:

text="Save..."

22. android:

padding="3dip" />

23.

24. android:

text="Ctrl-S"

25. android:

gravity="right"

26. android:

padding="3dip" />

27.

28.

29.

30.

31. android:

layout_column="1"

32. android:

text="Save As..."

33. android:

padding="3dip" />

34.

35. android:

text="Ctrl-Shift-S"

36. android:

gravity="right"

37. android:

padding="3dip" />

38.

39.

40.

41. android:

layout_height="2dip"

42. android:

background="#FF909090" />

43.

44.

45.

46. android:

text="X"

47. android:

padding="3dip" />

48.

展开阅读全文