android中为了适应各种布局的格式,提供了5种布局格式:
LinearLayout(线性布局)FrameLayout(帧布局)RelativeLayout(相对布局)TableLayout(表格布局)AbsoluteLayout(绝对布局)。
在android的项目中,我们要设计出让人耳目一新的界面,无时无刻都要用到这些布局格式。这些布局文件主要是以xml文件的格式存在,并且保存在/res/layout目录下。此文件夹下存着我们写的各种布局文件。例如:/res/layout/activity_main.xml.
下面我们详细介绍一下5种布局文件:
FrameLayout(帧布局)
此布局是最简单的布局形式,所添加的组件都是层叠的方式显示,第一个控件在最底层,最后添加的控件在视图显示的最上层,有点类似堆栈的形式。下面给出自己的一个实例:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="300dip" android:orientation="vertical" > <Button android:id="@+id/start" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="startAnimation" /> <Button android:id="@+id/stop" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="reversestartAnimation" /> </LinearLayout> <!-- windmill layout --> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <FrameLayout android:id="@+id/windmill_layout" android:layout_width="match_parent" android:layout_height="80dip" > <ImageView android:id="@+id/im_roof" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/windmill_roof" /> <ImageView android:id="@+id/im_fan" android:layout_width="104dp" android:layout_height="106dp" android:layout_gravity="center" android:src="@drawable/windmill_fan" /> </FrameLayout> <ImageView android:id="@+id/im_window" android:layout_width="80dip" android:layout_height="80dip" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="20dp" android:src="@drawable/windmill_window" /> </RelativeLayout> </LinearLayout>
这是在RelativeLayout中嵌套一个FrameLayout布局。并且FrameLayout布局中有两个互相重叠的imageView对象。
2. AbsoluteLayout(绝对布局)
此布局中的子控件需要指定其坐标的相对位置的横纵坐标,否则此布局会像FrameLayout布局一样被排在左上角。此布局不能自动适应屏幕尺寸,所以少用,这里简单介绍一下定义。
3.TableLayout(表格布局)
定义:把子控件元素放置在行和列中,并且不显示行列和单元格边界线。每一行就是一个TableRow,也可以是一个View对象。在TableRow里面每天加一个控件,代表一列。
属性参数说明:
android:layout_colum :设置控件在TableRow中所处的列。
android: layout_span:设置此控件所跨越的列数。
android:collapseColumns:TableLayout指定的列隐藏,多列隐藏,逗号将隐藏类隔开。
android:StretchColumns:指定的列为可以伸展的列,多列伸展,用逗号隔开。
android:shrinkColmns:设置指定的列为可收缩的列。
4.LinearLayout(线性布局)
定义:在一个方向上(垂直或者水平)对齐所有子元素,一个垂直列表中每一行都只有一个子元素,一个水平列表只是一列高度。
<?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="wrap_content" android:gravity="center_vertical" android:orientation="vertical" > <TextView android:id="@+id/catalog" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#E0E0E0" android:textColor="#454545" android:layout_weight="1.0" android:paddingLeft="5dip" android:paddingTop="5dip" android:paddingBottom="5dip" android:text="A"/> <TextView android:id="@+id/title" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center_vertical" android:gravity="center_vertical" android:layout_weight="1.0" android:textColor="#336598" android:layout_marginLeft="5dip" android:paddingTop="10dip" android:paddingBottom="10dip" android:text="hhhh"/> </LinearLayout>
5.RelativeLayout(相对布局)
定义:根据布局中子控件会根据他们设置的参照控件和参数进行相对布局。参照控件可以是父控件,也可以是其他的子控件,但是被参照的空间必须在参照它的控件之前定义。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/umeng_socialize_comment_item" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ffffff" android:padding="5dp" > <!-- 头像 --> <RelativeLayout android:id="@+id/umeng_socialize_comment_item_profile_gp" android:layout_width="50dp" android:layout_height="130dp" android:layout_marginLeft="8dp" android:gravity="center" > <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@null" /> <ImageView android:id="@+id/umeng_socialize_comment_avatar" android:layout_width="48dp" android:layout_height="48dp" android:layout_marginTop="8dp" android:layout_centerVertical="true" android:src="@drawable/umeng_socialize_default_avatar" android:scaleType="fitXY" /> </RelativeLayout> <TextView android:id="@+id/umeng_socialize_comment_item_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginTop="5dp" android:layout_toRightOf="@id/umeng_socialize_comment_item_profile_gp" android:ellipsize="end" android:ems="10" android:maxLines="1" android:textColor="@color/umeng_socialize_list_item_textcolor" android:textSize="14sp" /> <!-- A123456789B123456789C123456789D123456789E123456789F123456789G123456789H123456789 --> <TextView android:id="@+id/umeng_socialize_comment_item_content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginTop="0dp" android:layout_toRightOf="@id/umeng_socialize_comment_item_profile_gp" android:layout_below="@id/umeng_socialize_comment_item_name" android:maxLength="35" android:layout_marginRight="18dp" android:scrollHorizontally="false" android:ellipsize="end" android:textColor="#646464" android:textSize="12sp" /> <TextView android:id="@+id/umeng_socialize_comment_item_time" android:layout_marginTop="0dp" android:layout_marginLeft="8dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/umeng_socialize_comment_item_content" android:layout_toRightOf="@id/umeng_socialize_comment_item_profile_gp" android:textColor="@color/umeng_socialize_text_time" android:textSize="10sp" /> <ImageView android:id="@+id/umeng_socialize_comment_item_has_location" android:layout_marginTop="0dp" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_height="18dp" android:layout_width="18dp" android:scaleType="fitXY" android:visibility="invisible" android:src="@drawable/umeng_socialize_location_ic"/> </RelativeLayout>
相对布局中的属性参数比较多,也比较重要的布局格式。介绍一下relativeLayout布局的属性参数:
android:layout_centerHorizontal 水平居中
android:layout_centervertical 垂直居中
android:layout_centerInParent 相对于父元素完全居中
android: layout_alignparentBottom 贴近父元素的下边缘
android:layout_alignparentLeft
android:layout_alignParentRight
android:layout_alignparentTop
android:layout_alignwithparentifmissing 如果对应的兄弟元素找不到,就以父元素作为参照物
android:layout_below="id/id-name" 在某元素下面
android:layot_top
android:layout_toLeftof
android:layout_toRightof
android:layout_alignTop 本元素的上边缘和某元素的上边缘对齐
android:layout_alignBottom
android:layout_alignLeft
android:layout_alignRight
android:layout_marginBottom 离某元素底边缘的距离
android:layout_margintop
android:layout_marginleft
android:layout_marginright