【Android学习】浅谈六大布局属性与实现

写在前面

在介绍android常见的六个布局之前，我先简单介绍一下所有Layout都具有的属性，这样以下布局就不再赘述

• 常见属性与属性值
  layout_width/layout_height（宽度与高度）：48px，warp_content，match_parent（少用fill_parent）
  layout_margin/padding + 方向（外/内边距）:48px
  layout_gravity/grabvity（相对兄弟/父控件距离）

---

LinearLayout（线性布局）

LinearLayout是最常用一种布局方式，它主要提供控件的水平或垂直的线性排列（默认是垂直排列）

• 常见属性与属性值

  orientation（组件排列方式）：horizontal,vertical
  layout_weight（分配权重比例）

• 代码实例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ADFF2F"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="#04f5ad"
        android:layout_weight="2"/>

        <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="#061ab4"
        android:layout_weight="3"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f12c09"
        android:layout_weight="0.5"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#eccb60"
            android:layout_weight="3"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#722f99"
            android:layout_weight="1"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#907e91"
            android:layout_weight="1"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ff7002"
        android:layout_weight="1"/>

</LinearLayout>

• 效果图
  

---

RelativeLayout（相对布局）

RelativeLayout按照子元素之间或相对于父元素的位置关系进行布局，较为灵活，有很好的适配性，适合比较复杂的界面布局，但需要注意的是，在指定位置关系时，引用的ID必须在引用之前先被，否则将出现异常

• 常见属性与属性值
  layout_alignParentBottom
  layout_alignParentLeft
  layout_alignParentRight
  layout_alignParentTop
  layout_centerHorizontal
  layout_centerVertical
  layout_centerInParent
  以上为相对父元素位置
  layout_above
  layout_below
  layout_toLeftOf
  layout_toRightOf
  layout_alignBottom
  layout_alignLeft
  layout_alignRight
  layout_alignTop
  layout_alignBaseline
  以上为相对子控件位置
• 代码实例

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

    <TextView
        android:text="left-bottom"
        android:background="#837e7e"
        android:layout_width="100px"
        android:layout_height="100px"
        android:layout_alignParentBottom="true"
        />

    <TextView
        android:text="left-top"
        android:background="#837e7e"
        android:layout_width="100px"
        android:layout_height="100px"
        android:layout_alignParentLeft="true"
        />

    <TextView
        android:text="right-top"
        android:background="#837e7e"
        android:layout_width="100px"
        android:layout_height="100px"
        android:layout_alignParentRight="true"
        />

    <TextView
        android:text="top"
        android:background="#837e7e"
        android:layout_width="100px"
        android:layout_height="100px"
        android:layout_centerHorizontal="true"
        />

    <TextView
        android:text="left-middle"
        android:background="#837e7e"
        android:layout_width="100px"
        android:layout_height="100px"
        android:layout_centerVertical="true"
        />

    <TextView
        android:id="@+id/middle"
        android:text="middle"
        android:background="#837e7e"
        android:layout_width="100px"
        android:layout_height="100px"
        android:layout_centerInParent="true"
        />

    <TextView
        android:text="up"
        android:background="#837e7e"
        android:layout_width="50px"
        android:layout_height="50px"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/middle"
        />

    <TextView
        android:text="down"
        android:background="#837e7e"
        android:layout_width="50px"
        android:layout_height="50px"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/middle"
        />

    <TextView
        android:text="left"
        android:background="#837e7e"
        android:layout_width="50px"
        android:layout_height="50px"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/middle"
        />

    <TextView
        android:text="right"
        android:background="#837e7e"
        android:layout_width="50px"
        android:layout_height="50px"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/middle"
        />

</RelativeLayout>

• 效果图
  
  

  ---

TableLayout（表格布局）

TableLayout类似于html中的table，由TableRow组成，而TableRow是LinearLayout的子类，代表一行的线性布局，每向TableRow中添加一个组件则增加一列，Table的宽度由最宽的TableRow决定

• 常见属性与属性值
  android:collapseColumns（隐藏列）
  android:shrinkColumns（收缩列）
  android:stretchColumns（拉伸列）
  android:layout_span（跨越列）
• 代码实例

<?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"
    >
    <!-- TableRow具有linearLayout的属性 -->
    <TableRow>
        <TextView
            android:text="1,1"
            android:background="#f70808"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            />
        <TextView
            android:text="1,2"
            android:background="#eac54c"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            />
        <TextView
            android:text="1,3"
            android:background="#35d40d"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:text="2,1"
            android:background="#f28c8c"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            />
    </TableRow>
    <TableRow>

        <TextView
            android:text="3,1"
            android:background="#fa5017"
            android:layout_width="wrap_content"
            />
        <TextView
            android:layout_span="2"
            android:text="3,2"
            android:background="#fcfc19"
            android:layout_width="wrap_content"
            />
    </TableRow>
    <TableRow>

        <TextView
            android:text="4,1"
            android:background="#6265fc"
            android:layout_width="wrap_content"
            />
        <TextView
            android:text="4,2"
            android:background="#1a3aca"
            android:layout_width="wrap_content"
            />
        <TextView
            android:text="4,2"
            android:background="#08047e"
            android:layout_width="wrap_content"
            />
    </TableRow>

</TableLayout>

• 效果图
  
  

  ---

FrameLayout（帧布局）

布局中的所有元素都被至于左上角，从坐标（0，0）开始，无法指定确切位置，后者覆盖前者，其中的控件也会被覆盖

• 常见属性与属性值
  android:foreground（前景图）
  android:foregroundGravity（前景图位置）

• 代码实例

<?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:text="1"
        android:textSize="150px"
        android:layout_gravity="end"
        android:textAlignment="textEnd"
        android:background="#f28c8c"
        android:layout_width="600px"
        android:layout_height="600px"
        />

    <TextView
        android:text="2"
        android:textSize="150px"
        android:background="#37efe3"
        android:layout_width="400px"
        android:layout_height="400px"
        />

    <TextView
        android:text="3"
        android:textSize="150px"
        android:layout_gravity="center"
        android:textAlignment="center"
        android:background="#fdf905"
        android:layout_width="350px"
        android:layout_height="400px"
        />
</FrameLayout>

• 效果图
  
  

  ---

GridLayout（线性布局）

Android 4.0后的，和TableLayout有点类似，但多了一些自定义的新功能，如自定义网格的行数列树，组件位于几行几列，甚至是横跨几行几列，以及设置布局中组件的排列方式，

• 常见属性与属性值
  orientation : vertical , horizontal
  layout_gravity
  rowCount
  columnCount
  以上设置于GridLayout中
  layout_row : from 0
  layout_column : from 0
  layout_rowSpan
  layout_columnSpan
  以上设置于GridLayout的控件中

• 代码实例

<?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:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="7">　

    <Button
        android:background="#000000"
        android:layout_gravity="fill"
        android:layout_columnSpan="4"
        android:text="0" />
    <Button
        android:background="#000000"
        android:layout_gravity="fill"
        android:layout_columnSpan="4"
        android:text="0" />

    <Button android:text="C" />　　

    <Button android:text="+/-" />　　　

    <Button android:text="%" />
    　　
    <Button android:text="/" />　　

    <Button android:text="7" />

    <Button android:text="8" />
    　　
    <Button android:text="9" />
    　　
    <Button android:text="*" />
    　　
    <Button android:text="4" />
    　　
    <Button android:text="5" />
    　　
    <Button android:text="6" />

    <Button android:text="-" />

    <Button android:text="1" />

    <Button android:text="2" />

    <Button android:text="3" />

    <Button android:text="+" />

    <Button
        android:layout_gravity="fill"
        android:layout_columnSpan="2"
        android:text="0" />

    <Button android:text="." />

    <Button android:text="=" />


</GridLayout>

• 效果图
  
  

  ---

AbsoluteLayout（绝对定位布局）

从名称就可以猜测，这种布局方式利用坐标轴（如左上角：（0，0），往右X轴递增，往下Y轴递增）的方式定位了组件的位置，不可改变，但由于不同手机的屏幕尺寸以及分辨率可能导致界面的适配性低下，故该种布局方式已经过时，不再演示

---

参考资料：http://www.runoob.com/w3cnote/android-tutorial-intro.html