首页 > 代码库 > Android学习5—布局简介
Android学习5—布局简介
Android界面的布局主要有四种,分别为RelativeLayout、LinearLayout、TableLayout、FrameLayout,接下来分别介绍这些布局如何使用(为了简单起见,接下来的介绍工作中,我分别附上布局文件的代码以及效果图,供大家参考)
一:RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background" >
<TextView
android:id="@+id/background_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Type here" />
<EditText
android:id="@+id/background_edittext1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/background_textview"
android:background="@android:drawable/editbox_background"/>
<Button
android:id="@+id/background_button_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/background_edittext1"
android:layout_alignParentRight="true"
android:layout_marginLeft="10px"
android:text="Ok"/>
<Button
android:id="@+id/background_button_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/background_edittext1"
android:layout_toLeftOf="@id/background_button_ok"
android:layout_alignTop="@id/background_button_ok"
android:text="Cancel"/></RelativeLayout>
效果图:
二:嵌套布局
<?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:orientation="vertical"
android:background="@drawable/background" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:background="@drawable/background_blue">
<TextView
android:id="@+id/multilayout_textview1"
android:layout_marginTop="15dp"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:textColor="@color/abc_search_url_text_holo"
android:text="PhoneNumber:"/>
<EditText
android:id="@+id/multilayout_editText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minLines="1"
android:maxLines="1"
android:layout_toRightOf="@id/multilayout_textview1"
android:background="@android:drawable/editbox_background"
android:layout_alignBottom="@id/multilayout_textview1"
/>
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Please Input The Message To Send"/>
<EditText
android:id="@+id/multilayout_editText2"
android:layout_width= "fill_parent"
android:layout_height="wrap_content"
android:minLines="3"
android:maxLines="7"
android:background="@android:drawable/editbox_background"/><Button
android:id="@+id/multilayout_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Send " /></LinearLayout>
效果图:
三:表格布局
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="100dp">
<TextView
android:id="@+id/table_layout_textview1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="电话号码:"/>
<EditText
android:id="@+id/table_layout_edittext1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"/>
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="200dp">
<TextView
android:id="@+id/table_layout_textview2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="短信内容:"/>
<EditText
android:id="@+id/table_layout_edittext2"
android:layout_width="wrap_content"
android:layout_weight="1"
android:minLines="3"
android:maxLines="7"
android:layout_height="fill_parent"/>
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="50dp">
<Button
android:id="@+id/table_layout_button1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="发送"/>
</TableRow>
</TableLayout>
效果图:
四:Frame布局
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src=http://www.mamicode.com/"@drawable/movie"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src=http://www.mamicode.com/"@drawable/pause"
android:layout_gravity="center"/></FrameLayout>
效果图:此布局为,第二张ImageView覆盖在第一张ImageView上面