Android UI -- 布局介绍（布局包括FrameLayout, LinearLayout, RelativeLayout, GridLayout）

首先介绍常用布局类

FrameLayout 最简单的布局管理器。

　　这个布局管理类有几个特性：

添加组件默认在左上角的。
如果添加多个组件会叠加到一起，并且都在左上角。（可以通过一gravity属性改变叠加情况）
后添加的组件在上层。

LinearLayout LinearLayout通过垂直方向和水平方面进行布局的，LinearLayout允许每一个视图都有一个weight属性。
RelativeLayout RelativeLayout是相对于其他的组件和屏幕边缘布局的管理类。
GridLayout GridLayout是Android4.0引入的概念，网格的布局方式，及其灵活，可以减少嵌套布局方式。

1.定义布局

定义一个简单的XML布局

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

定义了一个线性布局方式，方向是垂直方向的（通过android:orientation="vertical"属性控制）

这里有三个常量我们将进行详细讲解fill_parent,match_parent,wrap_content。

fill_parent 填满父类的View,Fragment,Activity的空间。
wrap_content 把视图大小设置为显示内容的最小尺寸。
match_parent 从Android 2.2开始fill_parent改名为match_parent。

用java代码实现布局

  LinearLayout layout = new LinearLayout(this);
  layout.setOrientation(LinearLayout.VERTICAL);
 
  Button button = new Button(this);
  button.setText("xxx");
 
  int height = LinearLayout.LayoutParams.MATCH_PARENT;
  int weight = LinearLayout.LayoutParams.WRAP_CONTENT;
 
  layout.addView(button, new LinearLayout.LayoutParams(height, weight));
  setContentView(layout);

这个代码也比较简单，不做详细介绍了。

2.使用布局创建和设备无关的UI

1.LinearLayout(线性布局)

线性布局是最简单的布局之一，简单但是缺少了灵活性。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="xx1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="xx2"
        />

　　<!--被嵌套的垂直LinearLayout布局-->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="xx3"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="xx4"/>
    </LinearLayout>
</LinearLayout>

效果下如图，这里有嵌套布局，一个水平布局的LinearLayout里面嵌套了一个竖直的LinearLayout布局方式。

2.RelativeLayout(相对布局)

RelativeLayout布局非常的灵活，主要针对边框和其他组件进行布局。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/buttonBar"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
        <Button
            android:text="xx1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:text="xx2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
 
    <Button
        android:text="xx3"
        android:layout_above="@+id/buttonBar"
        android:layout_alignParentLeft="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </Button>
</RelativeLayout>

效果图如下

讲几个属性，这个属性对相对布局非常重要

android:layout_centerHrizontal 水平居中
android:layout_centerVertical 竖直居中
android:layout_centerInparent 相对于父类完全居中
android:layout_alignParentBottom 贴紧父元素的下边缘
android:layout_alignParentLeft 贴紧父元素的左边缘
android:layout_alignParentRight 贴紧父元素的右边缘
android:layout_alignParentTop 贴紧父元素的上边缘
android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物

来个小的总结

android:layout_centerInparent 相当于layout_centerHrizontal和layout_centerVertical一起用是一个效果，如果同时设置android:layout_alignParentBottom和android:layout_alignParentTop会把控件拉长和父类一样，同样道理android:layout_alignParentLeft和android:layout_alignParentRight也一样拉长控件。

android:layout_below 在某元素的下方
android:layout_above 在某元素的的上方
android:layout_toLeftOf 在某元素的左边
android:layout_toRightOf 在某元素的右边

来个小总结

如果同时设置了android:layout_below和android:layout_above并且id指向的是同一个控件，这是控件会消失不见。如果同时设置了android:layout_below和android:layout_above指定不同的控件会把控件拉长。

android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

来个小总结

同样这样的布局方式也会有拉长的情况。

android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离

3.GridLayout(网格布局)

网格布局在Android3.0（API level 11）导入，是所有布局管理器中最灵活的一种。

<?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:alignmentMode="alignMargins"
            android:orientation="horizontal"
            android:columnOrderPreserved="true"
            android:rowCount="3"
            android:rowOrderPreserved="true"
            android:columnCount="4">
 
    <Button android:id="@+id/xx1" android:text="1" />
    <Button android:text="2" android:layout_column="0" android:layout_row="2"/>
    <Button android:text="3" android:layout_rowSpan="3" android:layout_gravity="fill"/>
    <Button android:text="4"/>
    <Button android:text="5"/>
    <Button android:text="6"/>
    <Button android:text="7"/>
    <Button android:text="8"/>
    <Button android:text="9"/>
    <Button android:text="10"/>
 
</GridLayout>

GridLayout下的属性

android:orientation 在GridLayout的根目录下，有两个属性horizontal和vertical顾名思义就是水平和竖直布局。
android:rowCount 网格的行数
android:columnCount 网格的列数

包含控件属性

android:layout_columnSpan 水平合并单元格
android:layout_rowSpan 竖直合并单元格
android:layout_gravity 有很多属性：fill,bottom 等等。

　　　　　　　　　　　　　　　　　　作者 Young-Ken(微博)

　　　　　　　　　　　　　　　　　　审阅者 Cindy-Leee(微博)转载请注明 http://www.cnblogs.com/youngKen/p/4831953.html