Chendd's Blog

世界上没有什么事情是一行代码不能解决的。如果有，那就两行。

Android学习日记12--布局管理器

1、概述

       布局管理器的用途：

  • a、可以更好的管理组件;
  • b、通过使用布局管理器，Android应用程序可以做到平台无关性

       布局管理器都是ViewGroup的子类，所有可充当容器的父类都是ViewGroup，而ViewGroup也是View的子类

image　　

       下面分别介绍常用的布局管理器

2、线性布局管理器

       LinearLayout,最常用的布局之一。它提供控件水平或垂直排列的模型

       常用属性及其对应方法：

image

       gravity 可取属性说明：

image

       当需要为gravity设多个值时，可用|分隔开

       布局XML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/lla"
android:gravity="right"
>

<Button
android:text="添加"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>

</LinearLayout>

JAVA代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// 计数器，记录按钮个数
    int count = 0;

    @Override
    public void onCreate(Bundle savedInstanceState) { // 重写 onCreate 方法
        super.onCreate(savedInstanceState);
        setContentView(R.layout.horizontal_layout);
        // 获取屏幕中的按钮控件对象
        Button button = (Button) findViewById(R.id.Button01);

        // 为按钮添加 OnClickListener 接口实现
        button.setOnClickListener(


        new View.OnClickListener() {

            public void onClick(View v) {
                // 获取线性布局对象
                LinearLayout ll = (LinearLayout) findViewById(R.id.lla);

                String msg = MainActivity.this.getResources().getString(
                        R.string.button);
                // 创建一个 Button 对象
                Button tempbutton = new Button(MainActivity.this);



                tempbutton.setText(msg + (++count)); // 设置 Button 控件显示的内容
                // 设置 Button 的宽度
                tempbutton.setWidth(80);
                // 向线性布局中添加 View
                ll.addView(tempbutton);



            }

        });

    }

       运行效果：每点击添加按钮一次会在下方垂直生成一个按钮

image

       将布局文件中

android:orientation=“vertical”

vertical改为horizontal

       每点击一次会在右方水平方向生成一个按钮

image

       当水平方向该行容不下一个宽度为80的按钮时，按钮就会被压缩，如下图

image

       此时再点击添加按钮时，画面没有任何变化，不会另起一行添加按钮，超出屏幕的将不会被显示。

3、表格布局

       TableLayout 类似HTML里的Table分为行和列来管理。 每一行为一个TableRow，也可以为View对象。当为View对象时就跨越该行所有列 TableRow中可以添加子控件，每个子控件为一列。并不会为每个单元格绘制边框 每个单元格为一个View，可以有空的单元格，也可以跨越多列 一个列的宽度由该列最宽的单元格决定的

TableLayout 可以设置三种属性

  • Shrinkable ：它可以被压缩以适应其父容器的大小
  • Stretchable ：它可以被拉伸以填满空闲区域
  • Collapsed ：该列被隐藏

image

       如果要对多列进行设置，用逗号隔开

       这三个属性在JAVA代码也有对应的方法，值得一提的是它是继承Linearlayout的

布局XML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/water"
    android:gravity="bottom"
    android:orientation="vertical" >

    <TableLayout
        android:id="@+id/TableLayout01"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/TextView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_margin="4px"
            android:background="@drawable/darkgray"
            android:text="@string/tv1" >
        </TextView>
    </TableLayout>

    <TableLayout
        android:id="@+id/TableLayout02"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="0" >

        <TableRow
            android:id="@+id/TableRow01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/TextView02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_margin="4px"
                android:background="@drawable/blue"
                android:text="@string/tvStrech" >
            </TextView>

            <TextView
                android:id="@+id/TextView03"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_margin="4px"
                android:text="@string/tvShort" >
            </TextView>
        </TableRow>
    </TableLayout>

    <TableLayout
        android:id="@+id/TableLayout03"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1"
        android:shrinkColumns="0" >

        <TableRow
            android:id="@+id/TableRow02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/TextView04"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_margin="4px"
                android:background="@drawable/darkgray"
                android:text="@string/tvShrink" >
            </TextView>

            <TextView
                android:id="@+id/TextView05"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_margin="4px"
                android:background="@drawable/lightred"
                android:text="@string/tvShort" >
            </TextView>

            <TextView
                android:id="@+id/TextView06"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_margin="4px"
                android:background="@drawable/blue"
                android:text="@string/tvLong" >
            </TextView>
        </TableRow>
    </TableLayout>

</LinearLayout>

运行效果：

image

4、相对布局

       RelativeLayout子控件 的位置由兄弟控件或父容器来决定的 如果A控件由B控件来决定位置，则布局文件B控件要在A控件声明之前

常用属性

  • 第一类:属性值为true或false

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

  • 第二类：属性值必须为id的引用名“@id/id-name”

    • android:layout_below 在某元素的下方
    • android:layout_above 在某元素的的上方
    • android:layout_toLeftOf 在某元素的左边
    • android:layout_toRightOf 在某元素的右边
    • android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
    • android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
    • android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
    • android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

  • 第三类：属性值为具体的像素值，如30dip，40px

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

布局XML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:id="@+id/tv1"
        android:layout_centerInParent="true"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="big"
        android:textSize="30sp"
        android:id="@+id/tv2"
        android:layout_toRightOf="@id/tv1"
        android:layout_alignBottom="@id/tv1"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="middle"
        android:textSize="20sp"
        android:id="@+id/tv3"
        android:layout_above="@id/tv1"
        android:layout_alignLeft="@id/tv1"
        />

</RelativeLayout>

运行效果：

image

5、帧布局

       FrameLayout在屏幕上开辟一块区域，在这块区域可以添加多个控件 但都会被对其到屏幕左上角，并且大小取决于最大的控件，如果控件一样大，只能看到最上面的控件

布局XML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/lightgray"
        android:gravity="center"
        android:text="big" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@drawable/darkgray"
        android:gravity="center"
        android:text="middle" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/blue"
        android:gravity="center"
        android:text="small" />

</FrameLayout>

运行效果：

image

6、绝对布局

       AbsoluteLayout是绝对位置布局。在此布局中的子元素的android:layout_x和android:layout_y属性将生效，用于描述该子元素的坐标位置。屏幕左上角为坐标原点（0,0），第一个0代表横坐标，向右移动此值增大，第二个0代表纵坐标，向下移动，此值增大。在此布局中的子元素可以相互重叠。在实际开发中，通常不采用此布局格式，因为它的界面代码过于刚性，以至于有可能不能很好的适配各种终端。由于不采用，在此就不演示代码了。

Comments