1、帧布局 FrameLayout:
是最简单的一个布局对象。在他里面的的所有显示对象爱你过都将固定在屏幕的左上角,不能指定位置,但允许有多个显示对象,只是后一个会直接覆盖在前一个之上显示,会把前面的组件部分或全部挡住。下图的例子里,FrameLayout中放了3个ImageView组件,第一个是蓝色的,第二个是绿色的,第三个是树状图(透明的png格式)。ImageView就相当于Html中的img标签,接下来会讲到这个组件。
下面看一个FrameLayout的例子:
<? xml version="1.0" encoding="utf-8" ?>
< FrameLayout android:id ="@+id/FrameLayout01"
android:layout_width ="fill_parent" android:layout_height ="fill_parent"
xmlns:android ="http://schemas.android.com/apk/res/android" >
< ImageView android:id ="@+id/ImageView01" android:src ="@drawable/p1"
android:layout_width ="wrap_content" android:layout_height ="wrap_content" ></ ImageView >
< ImageView android:id ="@+id/ImageView02" android:src ="@drawable/p2"
android:layout_width ="wrap_content" android:layout_height ="wrap_content" ></ ImageView >
< ImageView android:id ="@+id/ImageView03" android:src ="@drawable/p3"
android:layout_width ="wrap_content" android:layout_height ="wrap_content" ></ ImageView >
</ FrameLayout >
2、线性布局 LinearLayout:
线性布局是所有布局中最常用的类之一,也是RadioGroup, TabWidget, TableLayout, TableRow, ZoomControls类的父类。LinearLayout可以让它的子元素垂直或水平的方式排成一行(不设置方向的时候默认按照垂直方向排列)。
下面看一个LinearLayout的例子:别被例子的长度吓住,仔细看一下其实就是一个LinearLayout中放5个TextView标签而已,TextView相当于Html标签中的Label。
<? xml version="1.0" encoding="utf-8" ?>
< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"
android:orientation ="vertical"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
android:gravity ="center_horizontal"
>
< TextView
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:text ="给小宝宝起个名字:"
android:textSize ="20px"
android:textColor ="#0ff"
android:background ="#333"
/>
< TextView
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:text ="遥遥是男孩的小名"
android:textSize ="20px"
android:textColor ="#0f0"
android:background ="#eee"
android:layout_weight ="3"
/>
< TextView
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:text ="瑶瑶是女孩的小名"
android:textColor ="#00f"
android:textSize ="20px"
android:background ="#ccc"
android:layout_weight ="1"
/>
< TextView
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:text ="海因是男孩的大名"
android:textColor ="#f33"
android:textSize ="20px"
android:background ="#888"
android:layout_weight ="1"
/>
< TextView
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:text ="海音是女孩的大名"
android:textColor ="#ff3"
android:textSize ="20px"
android:background ="#333"
android:layout_weight ="1"
/>
</ LinearLayout >
3、绝对布局 AbsoluteLayout
绝对定位AbsoluteLayout,又可以叫做坐标布局,可以直接指定子元素的绝对位置,这种布局简单直接,直观性强,但是由于手机屏幕尺寸差别比较大,使用绝对定位的适应性会比较差。
下面我们举一个例子看看:例子里的机器人图片大小是250X250,可以看到我们使用android:layout_x和android:layout_y来指定子元素的纵横坐标。
<? xml version="1.0" encoding="utf-8" ?>
< AbsoluteLayout android:id ="@+id/AbsoluteLayout01"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
xmlns:android ="http://schemas.android.com/apk/res/android"
android:background ="#fff" >
< ImageView
android:src ="@drawable/android"
android:layout_y ="40dip"
android:layout_width ="wrap_content"
android:layout_x ="35dip"
android:id ="@+id/ImageView01"
android:layout_height ="wrap_content" >
</ ImageView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="fill_parent"
android:id ="@+id/TextView01"
android:text ="Android2.2 学习指南"
android:textColor ="#0f0"
android:textSize ="28dip"
android:layout_y ="330dip"
android:layout_x ="35dip" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="fill_parent"
android:id ="@+id/TextView02"
android:text ="图文并茂,理论清晰,操作性强"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_y ="365dip"
android:layout_x ="35dip" >
</ TextView >
</ AbsoluteLayout >
4、相对布局 RelativeLayout
相对布局 RelativeLayout 允许子元素指定它们相对于其父元素或兄弟元素的位置,这是实际布局中最常用的布局方式之一。它灵活性大很多,当然属性也多,操作难度也大,属性之间产生冲突的的可能性也大,使用相对布局时要多做些测试。
下面我们用相对布局再做一次上面的例子,首先放置一个图片,其它两个文本分别相对上一个元素定位:
<? xml version="1.0" encoding="utf-8" ?>
< RelativeLayout android:id ="@+id/RelativeLayout01"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
android:background ="#fff"
xmlns:android ="http://schemas.android.com/apk/res/android" >
< ImageView android:id ="@+id/ImageView01"
android:src ="@drawable/android"
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:layout_marginTop ="40dip"
>
</ ImageView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView01"
android:text ="Android2.2 学习指南"
android:textColor ="#0f0"
android:textSize ="28dip"
android:layout_below ="@id/ImageView01"
android:layout_centerHorizontal ="true"
android:layout_marginTop ="10dip" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView02"
android:text ="图文并茂,理论清晰,操作性强"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_below ="@id/TextView01"
android:layout_centerHorizontal ="true"
android:layout_marginTop ="5dip" >
</ TextView >
</ RelativeLayout >
下面介绍一下RelativeLayout用到的一些重要的属性:
第一类:属性值为true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物
第二类:属性值必须为id的引用名“@id/id-name”
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐
第三类:属性值为具体的像素值,如30dip,40px
android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离
我们再把上面的例子重新做一遍,这一次多放一些属性在里面,大家试验一下:
<? xml version="1.0" encoding="utf-8" ?>
< RelativeLayout android:id ="@+id/RelativeLayout01"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
android:background ="#cfff" 色彩的设置是argb,第一个c是透明度
xmlns:android ="http://schemas.android.com/apk/res/android" >
< ImageView android:id ="@+id/ImageView01"
android:src ="@drawable/android"
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:layout_marginTop ="40dip"
android:layout_centerHorizontal ="true" >
</ ImageView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView01"
android:text ="Android2.2 学习指南"
android:textColor ="#0f0"
android:textSize ="28dip"
android:layout_below ="@id/ImageView01"
android:layout_centerHorizontal ="true"
android:layout_marginTop ="10dip" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView02"
android:text ="图文并茂,理论清晰,操作性强"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_below ="@id/TextView01"
android:layout_centerHorizontal ="true"
android:layout_marginTop ="5dip" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView03"
android:text ="alignTop"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_alignTop ="@id/ImageView01" 和ImageView01上边缘对齐
android:layout_centerHorizontal ="true" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView04"
android:text ="alignLeft"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_alignLeft ="@id/ImageView01"
android:layout_centerHorizontal ="true" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView05"
android:text ="alignRight"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_alignRight ="@id/ImageView01"
android:layout_centerHorizontal ="true" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView06"
android:text ="alignBottom"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_alignBottom ="@id/ImageView01"
android:layout_centerHorizontal ="true" >
</ TextView >
</ RelativeLayout >
是最简单的一个布局对象。在他里面的的所有显示对象爱你过都将固定在屏幕的左上角,不能指定位置,但允许有多个显示对象,只是后一个会直接覆盖在前一个之上显示,会把前面的组件部分或全部挡住。下图的例子里,FrameLayout中放了3个ImageView组件,第一个是蓝色的,第二个是绿色的,第三个是树状图(透明的png格式)。ImageView就相当于Html中的img标签,接下来会讲到这个组件。
下面看一个FrameLayout的例子:
<? xml version="1.0" encoding="utf-8" ?>
< FrameLayout android:id ="@+id/FrameLayout01"
android:layout_width ="fill_parent" android:layout_height ="fill_parent"
xmlns:android ="http://schemas.android.com/apk/res/android" >
< ImageView android:id ="@+id/ImageView01" android:src ="@drawable/p1"
android:layout_width ="wrap_content" android:layout_height ="wrap_content" ></ ImageView >
< ImageView android:id ="@+id/ImageView02" android:src ="@drawable/p2"
android:layout_width ="wrap_content" android:layout_height ="wrap_content" ></ ImageView >
< ImageView android:id ="@+id/ImageView03" android:src ="@drawable/p3"
android:layout_width ="wrap_content" android:layout_height ="wrap_content" ></ ImageView >
</ FrameLayout >
2、线性布局 LinearLayout:
线性布局是所有布局中最常用的类之一,也是RadioGroup, TabWidget, TableLayout, TableRow, ZoomControls类的父类。LinearLayout可以让它的子元素垂直或水平的方式排成一行(不设置方向的时候默认按照垂直方向排列)。
下面看一个LinearLayout的例子:别被例子的长度吓住,仔细看一下其实就是一个LinearLayout中放5个TextView标签而已,TextView相当于Html标签中的Label。
<? xml version="1.0" encoding="utf-8" ?>
< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"
android:orientation ="vertical"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
android:gravity ="center_horizontal"
>
< TextView
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:text ="给小宝宝起个名字:"
android:textSize ="20px"
android:textColor ="#0ff"
android:background ="#333"
/>
< TextView
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:text ="遥遥是男孩的小名"
android:textSize ="20px"
android:textColor ="#0f0"
android:background ="#eee"
android:layout_weight ="3"
/>
< TextView
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:text ="瑶瑶是女孩的小名"
android:textColor ="#00f"
android:textSize ="20px"
android:background ="#ccc"
android:layout_weight ="1"
/>
< TextView
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:text ="海因是男孩的大名"
android:textColor ="#f33"
android:textSize ="20px"
android:background ="#888"
android:layout_weight ="1"
/>
< TextView
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:text ="海音是女孩的大名"
android:textColor ="#ff3"
android:textSize ="20px"
android:background ="#333"
android:layout_weight ="1"
/>
</ LinearLayout >
3、绝对布局 AbsoluteLayout
绝对定位AbsoluteLayout,又可以叫做坐标布局,可以直接指定子元素的绝对位置,这种布局简单直接,直观性强,但是由于手机屏幕尺寸差别比较大,使用绝对定位的适应性会比较差。
下面我们举一个例子看看:例子里的机器人图片大小是250X250,可以看到我们使用android:layout_x和android:layout_y来指定子元素的纵横坐标。
<? xml version="1.0" encoding="utf-8" ?>
< AbsoluteLayout android:id ="@+id/AbsoluteLayout01"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
xmlns:android ="http://schemas.android.com/apk/res/android"
android:background ="#fff" >
< ImageView
android:src ="@drawable/android"
android:layout_y ="40dip"
android:layout_width ="wrap_content"
android:layout_x ="35dip"
android:id ="@+id/ImageView01"
android:layout_height ="wrap_content" >
</ ImageView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="fill_parent"
android:id ="@+id/TextView01"
android:text ="Android2.2 学习指南"
android:textColor ="#0f0"
android:textSize ="28dip"
android:layout_y ="330dip"
android:layout_x ="35dip" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="fill_parent"
android:id ="@+id/TextView02"
android:text ="图文并茂,理论清晰,操作性强"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_y ="365dip"
android:layout_x ="35dip" >
</ TextView >
</ AbsoluteLayout >
4、相对布局 RelativeLayout
相对布局 RelativeLayout 允许子元素指定它们相对于其父元素或兄弟元素的位置,这是实际布局中最常用的布局方式之一。它灵活性大很多,当然属性也多,操作难度也大,属性之间产生冲突的的可能性也大,使用相对布局时要多做些测试。
下面我们用相对布局再做一次上面的例子,首先放置一个图片,其它两个文本分别相对上一个元素定位:
<? xml version="1.0" encoding="utf-8" ?>
< RelativeLayout android:id ="@+id/RelativeLayout01"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
android:background ="#fff"
xmlns:android ="http://schemas.android.com/apk/res/android" >
< ImageView android:id ="@+id/ImageView01"
android:src ="@drawable/android"
android:layout_width ="fill_parent"
android:layout_height ="wrap_content"
android:layout_marginTop ="40dip"
>
</ ImageView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView01"
android:text ="Android2.2 学习指南"
android:textColor ="#0f0"
android:textSize ="28dip"
android:layout_below ="@id/ImageView01"
android:layout_centerHorizontal ="true"
android:layout_marginTop ="10dip" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView02"
android:text ="图文并茂,理论清晰,操作性强"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_below ="@id/TextView01"
android:layout_centerHorizontal ="true"
android:layout_marginTop ="5dip" >
</ TextView >
</ RelativeLayout >
下面介绍一下RelativeLayout用到的一些重要的属性:
第一类:属性值为true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物
第二类:属性值必须为id的引用名“@id/id-name”
android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐
第三类:属性值为具体的像素值,如30dip,40px
android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离
我们再把上面的例子重新做一遍,这一次多放一些属性在里面,大家试验一下:
<? xml version="1.0" encoding="utf-8" ?>
< RelativeLayout android:id ="@+id/RelativeLayout01"
android:layout_width ="fill_parent"
android:layout_height ="fill_parent"
android:background ="#cfff" 色彩的设置是argb,第一个c是透明度
xmlns:android ="http://schemas.android.com/apk/res/android" >
< ImageView android:id ="@+id/ImageView01"
android:src ="@drawable/android"
android:layout_width ="wrap_content"
android:layout_height ="wrap_content"
android:layout_marginTop ="40dip"
android:layout_centerHorizontal ="true" >
</ ImageView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView01"
android:text ="Android2.2 学习指南"
android:textColor ="#0f0"
android:textSize ="28dip"
android:layout_below ="@id/ImageView01"
android:layout_centerHorizontal ="true"
android:layout_marginTop ="10dip" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView02"
android:text ="图文并茂,理论清晰,操作性强"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_below ="@id/TextView01"
android:layout_centerHorizontal ="true"
android:layout_marginTop ="5dip" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView03"
android:text ="alignTop"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_alignTop ="@id/ImageView01" 和ImageView01上边缘对齐
android:layout_centerHorizontal ="true" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView04"
android:text ="alignLeft"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_alignLeft ="@id/ImageView01"
android:layout_centerHorizontal ="true" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView05"
android:text ="alignRight"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_alignRight ="@id/ImageView01"
android:layout_centerHorizontal ="true" >
</ TextView >
< TextView
android:layout_height ="wrap_content"
android:layout_width ="wrap_content"
android:id ="@+id/TextView06"
android:text ="alignBottom"
android:textColor ="#333"
android:textSize ="18dip"
android:layout_alignBottom ="@id/ImageView01"
android:layout_centerHorizontal ="true" >
</ TextView >
</ RelativeLayout >
http://android.yaohuiji.com/archives/category/android-basic/page/6