Android布局管理器介绍

前言

一个人至少要拥有一个梦想，有一个理由坚强。心若没有栖息的地方，到哪里都是流浪。

线性布局

线性布局由LinearLayout类来代表，它会将容器里的组件一个挨着一个地排列起来。

代码示例1

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

    <Button
        android:id="@+id/bn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bn1"
                />
     <Button
        android:id="@+id/bn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bn2"
                />
      <Button
        android:id="@+id/bn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bn3"
                />
</LinearLayout>

效果1

Screenshot_20171017-140522.png

代码示例2

<?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"
    android:gravity="left|center_vertical" >

    <Button
        android:id="@+id/bn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bn1"
                />
     <Button
        android:id="@+id/bn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bn2"
                />
      <Button
        android:id="@+id/bn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bn3"
                />
</LinearLayout>

效果2

Screenshot_20171017-141513.png

提示

android:orientation属性,控制各组件横向排列和竖向排列。

android:gravity属性,控制它所包含的子元素的对齐方式。

android:layout_gravity属性,设置该子元素在父容器中的对齐方式。

表格布局

表格布局由TableLayout所代表，TableLayout继承了LinearLayout，因此它的本质依然是线性布局管理器。除此之外，表格布局是通过添加TableRow、其他组件来控制表格的行数和列数。

代码示例

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

    <!-- 定义第一个表格布局，指定第二列允许收缩，第三列允许拉伸 -->
    <TableLayout android:id="@+id/tablelayout01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="1"
        android:stretchColumns="2">

    <!-- 直接添加按钮，独自占一行 -->
    <Button
        android:id="@+id/bt1_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="独自占一行的按钮"
        />
    <TableRow>
       <Button
        android:id="@+id/bt1_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮"
        />
        <Button
        android:id="@+id/bt1_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="收缩的按钮"
        />
         <Button
        android:id="@+id/bt1_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="拉伸的按钮"
        />
    </TableRow>

    </TableLayout>

    <!-- 定义第二个表格布局，指定第二列隐藏 -->
    <TableLayout android:id="@+id/tablelayout02"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1">

    <!-- 直接添加按钮，独自占一行 -->
    <Button
        android:id="@+id/bt2_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="独自占一行的按钮"
        />

     <TableRow>
       <Button
        android:id="@+id/bt2_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮"
        />
        <Button
        android:id="@+id/bt2_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="隐藏按钮"
        />
         <Button
        android:id="@+id/bt2_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮"
        />
    </TableRow>


    </TableLayout>

    <!-- 定义第三个表格布局，指定第二列和第三列被拉伸 -->
    <TableLayout android:id="@+id/tablelayout03"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="1,2">
    <!-- 直接添加按钮，独自占一行 -->
    <Button
        android:id="@+id/bt3_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="独自占一行的按钮"
        />
        <TableRow>
           <Button
            android:id="@+id/bt3_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="普通按钮"
            />
            <Button
            android:id="@+id/bt3_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="拉伸按钮"
            />
             <Button
            android:id="@+id/bt3_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="拉伸按钮"
            />
         </TableRow>
    </TableLayout>
</LinearLayout>

效果

Screenshot_20171017-143543.png

提示

android:stretchColumns属性,设置允许被拉伸的列的列序号。

android:shringkColumns属性,设置允许被收缩的列的列序号。

android:collapseColumns属性,设置需要被隐藏的列的列序号。

上述属性如果有多个列序号，直接用逗号隔开。

帧布局

帧布局由FrameLayout所代表，FrameLayout直接继承了ViewGroup组件。

代码示例

<?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" >
    <!-- 依次定义6个TextView，先定义的TextView位于底层 -->

    <TextView
        android:id="@+id/view01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="320pt"
        android:height="320pt"
        android:background="#f00"
        />

    <TextView
        android:id="@+id/view02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="280pt"
        android:height="280pt"
        android:background="#0f0"
        />

    <TextView
        android:id="@+id/view03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="240pt"
        android:height="240pt"
        android:background="#00f"
        />

    <TextView
        android:id="@+id/view04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="200pt"
        android:height="200pt"
        android:background="#ff0"
        />

    <TextView
        android:id="@+id/view05"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="160pt"
        android:height="160pt"
        android:background="#f0f"
        />
    <TextView
        android:id="@+id/view06"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="120pt"
        android:height="120pt"
        android:background="#0ff"
        />
</FrameLayout>

效果

Screenshot_20171017-150702.png

提示

帧布局的效果是把组件一个个地叠加在一起。

相对布局

相对布局由RelativeLayout所代表，相对布局容器内子组件的位置总是相对兄弟组件、父容器来决定的。

代码示例

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

    <!-- 定义该组件位于父容器直中间 -->
    <Button
        android:id="@+id/bt0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中心按钮"
        android:layout_centerInParent="true"
        />

    <!-- 定义该组件位于bt0组件的上方 -->
    <Button
        android:id="@+id/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="上方按钮"
        android:layout_above="@id/bt0"
        android:layout_alignLeft="@id/bt0"
        />

    <!-- 定义该组件位于bt0组件的下方 -->
    <Button
        android:id="@+id/bt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="上方按钮"
        android:layout_below="@id/bt0"
        android:layout_alignLeft="@id/bt0"
     />
    <!-- 定义该组件位于bt0组件的左侧 -->
    <Button
        android:id="@+id/bt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左侧按钮"
        android:layout_toLeftOf="@id/bt0"
        android:layout_alignTop="@id/bt0"
     />
    <!-- 定义该组件位于bt0组件的右侧 -->
    <Button
        android:id="@+id/bt4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右侧按钮"
        android:layout_toRightOf="@id/bt0"
        android:layout_alignTop="@id/bt0"
     />
</RelativeLayout>

效果

Screenshot_20171017-152728.png

提示

layout_above属性,控制该子组件位于给出ID组件的上方。

layout_below属性,控制该子组件位于给出ID组件的下方。

layout_toLeftOf属性,控制该子组件位于给出ID组件的左侧。

layout_toRightOf属性,控制该子组件位于给出ID组件的右侧。

layout_alignTop属性,控制该子组件与给出ID组件的上边界对齐。

layout_alignBottom属性,控制该子组件与给出ID组件下上边界对齐。

layout_alignLeft属性,控制该子组件与给出ID组件的左边界对齐

layout_alignRight属性,控制该子组件与给出ID组件的右边界对齐。

网格布局

网格布局由GridLayout所代表，它的作用类似于HTML中的table标签，它把整个容器划分成rows x columns个网格，每个网格可以放置一个组件。除此之外，也可以设置一个组件横跨多少列、纵跨多少行。

代码示例

MainActivity.java

public class MainActivity extends Activity {

    GridLayout gridLayout;

    //定义16个按钮文本
    String[] chars = new String[]
            {
                "AC","+/-","%","÷",
                "7","8","9","x",
                "4","5","6","-",
                "1","2","3","+",
                "0","00",".","="
            };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.grid);
        gridLayout = (GridLayout) findViewById(R.id.root);
        for(int i = 0; i < chars.length; i++)
        {
            Button bt = new Button(this);
            bt.setText(chars[i]);//设置按钮文本
            bt.setTextSize(40);//设置按钮的文本大小
            bt.setWidth(120);//设置按钮的宽度
            bt.setHeight(110);//设置按钮的高度
            //指定该按钮所在的行
            GridLayout.Spec rowSpec = GridLayout.spec(i / 4 + 1);
            //指定该按钮所在的列
            GridLayout.Spec columnSpec = GridLayout.spec(i % 4);
            GridLayout.LayoutParams params = new GridLayout.LayoutParams(rowSpec,columnSpec);

            //指定该按钮占满父容器
            params.setGravity(Gravity.FILL);
            gridLayout.addView(bt,params);

        }

    }


}

grid.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="6"
    android:columnCount="4"
    android:id="@+id/root"
     >
    <!-- 定义一个横跨4列的文本框，并设置该文本框的前景色、背景色等属性 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:textSize="100sp"
        android:layout_marginLeft="2pt"
        android:layout_marginRight="2pt"
        android:padding="3pt"
        android:gravity="right"
        android:background="#eee"
        android:textColor="#000"
        android:text="0"
        />
</GridLayout>

效果

Screenshot_20171017-161435.png

提示

android:rowCount属性,设置该网格的行数量。

android:columnCount属性,设置该网格的列数量。

android:layout_rowSpan属性,设置该组件在GridLayout纵向上跨几行。

android:layout_columnSpan,设置该组件在GridLayout横向上跨几行。

绝对布局

绝对布局由AbsoluteLayout所代表。大部分时候，使用绝对布局不是一个好思路，绝对布局很难兼顾不同屏幕大小、分辨率的问题。因此AbsoluteLayout布局管理器已过时。