Android圖形用戶界面

安卓圖形用戶界面由多個View和ViewGroup構成，其中View爲組件，ViewGroup管理組建佈局

一、佈局方式

1、線性佈局LinearLayout

LinearLayout按照垂直或者水平順序依次排列View。

（1）LinearLayout相關屬性

Layout_width="match_parent"<!--填充父類窗口大小>

                        ="wrap_content"<!--根據內容自動設置長寬-->

Layout_height同上

orienttation 佈局模式 orienttation ="vertical "<!--垂直佈局-->

                                                            ="horizontal "<!--水平佈局-->

Layout_weight設置權重，默認值爲0，水平佈局中若控件權重相同，則各佔50%的寬度

Layout_gravity設置對齊模式 如 Layout_gravity=“center” <!--水平垂直居中-->

                                                                                 ="center_vertical"<!--垂直居中-->

                                                                                 ="center_horizontal "<!--水平居中-->"

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/textBackGround"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/text1_bgcolor"
            android:gravity="center"
            android:text="@string/text1_name"
            android:textColor="@color/font_color"
            android:textSize="@dimen/font_size" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/text2_bgcolor"
            android:gravity="center"
            android:text="@string/text2_name"
            android:textColor="@color/font_color"
            android:textSize="@dimen/font_size" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/text3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/text3_bgcolor"
            android:gravity="center"
            android:text="@string/text3_name"
            android:textColor="@color/font_color"
            android:textSize="@dimen/font_size" />

        <TextView
            android:id="@+id/text4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@color/text4_bgcolor"
            android:gravity="center"
            android:text="@string/text4_name"
            android:textColor="@color/font_color"
            android:textSize="@dimen/font_size" />
    </LinearLayout>
</LinearLayout>

實現效果:

二、RelaLayout相對佈局

按照其他子元素或者父元素的位置進行排列

（1）RelaLayout相關屬性

根據其他控件的"id"進行排列

toRightOf="id" 位於引用控件右

toLeftOf="id"  ~左

above="id" ~上

below="id" ~下

相對於父元素(View或者ViewGroup)進行排列

alignParentRight="true" 對齊父元素組件右端

alignParentLeft="true" ~左端

alignParentTop="true" ~頂部

alignParentbottom ~底部

<?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="@android:color/holo_blue_light">

    <TextView
        android:id="@+id/text_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本框1"
        android:textSize="32sp"></TextView>

    <TextView
        android:id="@+id/text_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text_one"
        android:text="文本框2"
        android:textSize="32sp"></TextView>

    <TextView
        android:id="@+id/text_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="文本框3"
        android:textSize="32sp" />
</RelativeLayout>

實現效果：

三、FrameLayout 單幀佈局

所有子元素都不能指定放置的位置.

所有子元素都位於父元素的左上方，並且後面的元素全部或者部分覆蓋前一個元素.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_dark"
        android:text="文本框1"
        android:textSize="32sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:text="文本框2"
        android:textSize="24sp" />
</FrameLayout>

實現效果：

四、AbsoluteLayout 絕對佈局

控件位置由(x,y)座標確定，左上方爲座標原點，即(0,0)

五、GridLayout 網格佈局-android4.0之後添加的佈局模式

（1）GridLayout相關屬性

rowCount設置行數

columnCount設置列數

columnSpan 設置跨列

rowSpan 設置跨行

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="3"
    android:rowCount="3">

    <Button
        android:background="@android:color/darker_gray"
        android:text="1"
        android:textSize="32dp" />

    <Button
        android:background="@android:color/darker_gray"
        android:text="2"
        android:textSize="32dp" />

    <Button
        android:background="@android:color/darker_gray"
        android:text="3"
        android:textSize="32dp" />

    <Button
        android:background="@android:color/darker_gray"
        android:text="4"
        android:textSize="32dp" />

    <Button
        android:background="@android:color/darker_gray"
        android:text="5"
        android:textSize="32dp" />


    <Button
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_rowSpan="2"
        android:background="@android:color/darker_gray"
        android:text="6"
        android:textSize="32dp" />

    <Button
        android:layout_width="match_parent"
        android:layout_columnSpan="2"
        android:layout_gravity="center"
        android:background="@android:color/darker_gray"
        android:text="7"
        android:textSize="32dp" />

</GridLayout>

實現效果：