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>

实现效果：