UI用戶界面

FrameLayout：是指定一塊區域，也就是說保留一個區塊放元件，所有放在上面的元件都會被放置在FrameLayout的左上角，如果說把多個元件一起放在FrameLayout中，那麼這些控制項會一個一個疊在一起。
sample_frame_layout.xml

<?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">

    <!--FrameLayout主要用來呈現一個固定的區塊，這裡載入一張圖片，同時載入不同圖片將會被覆蓋-->
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <!--圖片檔名要英文，並且照片需放在mipmap的四個資料夾中-->
        <ImageView
            android:src="@mipmap/tr"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView" />
    </FrameLayout>
</LinearLayout>

LinearLayout：是最常用的一種Layout，可設定成horizontal水平或者是vertical垂直左右排列。
sample_linear_layout.xml

<?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">
    <!--這裡特別注意layout_weight被定成１，與下面的另一個layout的ｗeight是一樣的，呈現時就會１：１-->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="New Text"
            android:id="@+id/textView5"
            android:background="#ffff201b" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="New Text"
            android:id="@+id/textView6"
            android:background="#ff08ff1d" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="New Text"
            android:id="@+id/textView7"
            android:background="#ff1227ff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="New Text"
            android:id="@+id/textView8"
            android:background="#ff940cff" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
       >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="9pt"
            android:text="New Text"
            android:id="@+id/textView" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12pt"
            android:text="New Text"
            android:id="@+id/textView2" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15pt"
            android:text="New Text"
            android:id="@+id/textView3" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18pt"
            android:text="New Text"
            android:id="@+id/textView4" />
    </LinearLayout>



</LinearLayout>

RelativeLayout：顧名思義就相對位置的版面配置。

sample_relative_layout.xml

<?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">
    <!--RelativeLayout顧名思議就是相對位置-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="我是TextView控制項"
            android:id="@+id/textView9"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true" />

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button"
            android:layout_below="@+id/textView9"
            android:layout_alignParentStart="true" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button2"
            android:layout_below="@+id/button"
            android:layout_centerHorizontal="true" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button3"
            android:layout_alignTop="@+id/button2"
            android:layout_alignParentEnd="true" />

    </RelativeLayout>

</LinearLayout>

TableLayout：顧名思義就像是表格般的版面配置

sample_table_layout.xml

<?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">


    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Name"
                android:id="@+id/textView10" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="textPersonName"
                android:text="Name"
                android:ems="10"
                android:id="@+id/editText" />
        </TableRow>

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TEL"
                android:id="@+id/textView11" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="textPersonName"
                android:text="Name"
                android:ems="10"
                android:id="@+id/editText2" />
        </TableRow>

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button4" />
        </TableRow>
    </TableLayout>
</LinearLayout>