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="@drawable/movie"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/pause"
        android:layout_gravity="center"/>

</FrameLayout>

效果图：此布局为，第二张ImageView覆盖在第一张ImageView上面

巴特西

Android学习5—布局简介

一：RelativeLayout

二：嵌套布局

三：表格布局

四：Frame布局

注：以上布局有些简单，仅供以后忘记时参考

最新文章

热门文章