五大布局

时间 2021-08-13

标签 android 框架 ide 布局 spa xml string 栏目 Android 繁體版

原文原文链接

五大布局即：线性布局(LinearLayout)、框架布局(FrameLayout)、表格布局(TableLayout)、绝对布局(AbsoluteLayout)和相对布局(RelativeLayout)。在了解五大布局以前，必须先了解一些经常使用的UI组件，例如：TextView组件，EditText组件，Button组件，RadioGroup和RadioButton组件，ImageView组件，Spinner组件，DatePicker和TimePicker组件......android

模仿QQ界面，定义相对布局管理器：框架

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"ide

xmlns:tools="http://schemas.android.com/tools"布局

android:layout_width="match_parent"spa

android:layout_height="match_parent"xml

android:gravity="center_horizontal">ip

<TextViewci

android:layout_marginTop="10dip"string

android:id="@+id/tv_account"it

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>

模仿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>