五大布局即:线性布局(LinearLayout)、框架布局(FrameLayout)、表格布局(TableLayout)、绝对布局(AbsoluteLayout)和相对布局(RelativeLayout)。在了解五大布局之前,必须先了解一些常用的UI组件,例如:TextView组件,EditText组件,Button组件,RadioGroup和RadioButton组件,ImageView组件,Spinner组件,DatePicker和TimePicker组件......
模仿QQ界面,定义相对布局管理器:
<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:gravity="center_horizontal"> <TextView android:layout_marginTop="10dip" android:id="@+id/tv_account" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="18sp" android:id="@+id/tv_account"/> <EditText android:layout_marginTop="10dip" android:layout_toRightOf="@+id/tv_account" android:id="@+id/et_account" android:layout_width="250dip" android:layout_height="wrap_content" android:textSize="18sp" android:id="@+id/et_account"/> <TextView android:layout_marginTop="20dip" android:layout_below="@+id/tv_account" android:id="@+id/tv_pwd" android:layout_height="wrap_content" android:layout_width="wrap_content" android:textSize="18sp" android:id="@+id/tv_password"/> <EditText android:layout_toRightOf="@+id/tv_pwd" android:layout_below="@+id/et_account" android:id="@+id/et_pwd" android:layout_height="wrap_content" android:layout_width="250dip" android:textSize="18sp" android:id="@+id/et_password" android:password="true" /> <Button android:layout_marginTop="30dip" android:layout_below="@+id/tv_pwd" android:id="@+id/btn_login" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/btn_login"/> <Button android:layout_marginTop="30dip" android:layout_below="@+id/tv_pwd" android:layout_toRightOf="@+id/btn_login" android:id="@+id/btn_register" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/btn_register"/> </RelativeLayout> |
模仿QQ界面,定义线性布局管理器:
<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"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tv_account" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tv_password" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn_login" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn_register"/> </LinearLayout> </LinearLayout> |
模仿QQ界面,定义表格布局管理器:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="match_parent" > <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > <TextView android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="2" android:id="@+id/tv_account" /> <EditText android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="8" android:id="@+id/et_account" /> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > <TextView android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="2" android:id="@+id/tv_password" /> <EditText android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="8" android:id="@+id/et_password" /> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > <Button android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="5" android:id="@+id/btn_login"/> <Button android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="5" android:id="@+id/btn_register"/> </TableRow> </TableLayout> |
框架布局(又称祯布局)
<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" > <TextView android:layout_width="fill_parent" android:layout_height="100dip" android:background="#ff0000" android:text="@string/hello_world"/> <TextView android:layout_width="105dp" android:layout_height="50dip" android:background="#00ff00" android:text="@string/hello_world"/> </FrameLayout> |
绝对布局
<AbsoluteLayoutxmlns: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" > <TextView android:layout_x="20dip" android:layout_y="20dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff0000" android:text="@string/hello_world" /> </AbsoluteLayout> |