[Android步步为营]第4营 布局管理器Layout

在前面几讲中， 我们其实已经多次用到过Layout，用的最多的线性布局。今天我们来详细探讨一下布局。

Layout，是在Activity的界面的结构，它定义了您的UI元素该如何组织来呈现给用户。Layout的定义其实有两种方式：

  • Xml定义
  • 代码定义

Xml layout 定义的好处在于，减少了与代码的耦合，同一份代码可以用不同layout以适应大小屏幕，横竖屏。

代码定义好的好处在于灵活性强，当然效率也相对要一些。

所以这两种方式有很有用，有时也会结合起来使用。但平常用的最多的还是xml形式的。

主要的Layout一共有五种：

  • LinearLayout 线性布局
  • RelativeLayout 相对布局
  • AbsoluteLayout 绝对定位，以绝对坐标来定位，已经被废弃，因为Android平台的设备屏幕如此众多，用绝对定位非常不合适。
  • FrameLayout 帧布局
  • TableLayout 表格布局

Android 3.0引入的还有Fragment, 严格来讲它并不是layout，以后会详细描述。

下面我们来详细研究一下这几种Layout：

LinearLayout

包括Vertical垂直, Horizontal水平两种，由属性android:orientation设定，这个在上一讲已经讲过，这里不在重复。

线性布局还有一个重要的属性weight. 我们先来看一个例子：

我们有三个按钮，水平放置：

<?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="wrap_content"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="收藏" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="下载" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="分享" />

</LinearLayout>

预览结果是：

7MAU605IHPH2(Y9A52L$UF5

实际上这样不大好看，我们希望他们都居中，而且平分水平方向的空间，于是我们为每一个Button 加上android:layout_weight属性，值都是1，表示他们的权重都是1：

<?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="wrap_content"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="收藏" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="下载" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="分享" />

</LinearLayout>

预览结果：

89X)WH4WC%0)4$25V$575}2所以当元素的layout_weight值都是一样时，他们会平分长度(horizontal时)或者高度(vertical时)。

接下来我们做一下别的尝试：

把两边的Button的layout_weight属性去掉呢？

15(B3{IUEKZIUM5}}9_DA(Y这个时候只有中间的Button有layout_weight=1, 把它的值调大点？ 2？ 3？。。。10？发现结果都是一样的。所以：

LinearLayout下的子元素，1. 默认情况下layout_weight为零 2.所有的子元素当中，layout_weight值最大的那个元素，会占满剩下的所有空间

LinearLayout中还有一个重要的属性：android:weightSum 总权重值

还是这个例子，假如我们想让两边的按钮占四分之一，中间按钮占四分之二， 可以这样来实现：

LinearLayout的android:weightSum=”4”, 两边的Button layout_weight=”1”, 中间的为2，结果如下：

T_ZET%YL3Q2T60)C_70]${F

你也许注意到，既然已经有了layout_weight来分配宽度（horizontal时）,layout_width的值还有意义吗？

确实，没有意义了，但是它又是必须要写的属性，所以，为了提高性能，我们可以把它写成android_width=”0dp”.

<Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="分享" />

RelativeLayout

相对布局，是通过UI元素的相互参照来定位,如下图，A，B，D在C的下面，而且D在A的右边，也在B的左边。

`J@9(Y5(TT7YO4NN0MOHKFX

相对布局非常有用，它可是实现许多复杂要求的界面布局。

 

相对布局有如下重要属性：

在某个元素的上下左右方，值为对应元素的id

android:layout_toLeftOf
android:layout_toRightOf
android:layout_above 

android:layout_below

让本元素的边缘与指定id的上下左右，基线边缘对齐，值都是某个元素的Id

android:layout_alignBaseline

android:layout_alignTop

android:layout_alignBottom
android:layout_alignLeft

android:layout_alignRight

 

以下的值为true时，靠在父容器的上下左右边缘

android:layout_alignParentBottom
android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_alignParentTop
android:layout_centerHorizontal
android:layout_centerInParent
android:layout_centerVertical

 

android:layout_alignWithParentIfMissing

如果设置为true, 被依赖的View， 如果设置成了Gone(View 有个可见性属性android:visibility, 可选三个值visible, invisible, gone), 将以其父容器作为参考。
 

举一个实例，就容易明白了：

M3F}J3FYU6B{EXWERF9@QZJ

要求：

  • 文本框和两个按钮靠界面底部，他们都是同一行。
  • 两个按钮靠右排列
  • 文本框靠左
  • 图片在文本框的上方
<?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:orientation="vertical" >
    
    <!-- android:layout_above， 在EditText 的上方 -->
    <ImageView
        android:id="@+id/top_image"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/et_reply"
        android:layout_marginBottom="10dp"
        android:src="@drawable/cat" />
    <!-- android:layout_alignParentLeft，android:layout_alignParentBottom 靠左在界面底部 -->    
    <EditText
        android:id="@+id/et_reply"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="10dp"
        android:ems="8"
        android:hint="留言..." />
 <!-- layout_toLeftOf在btn_renren的右边，layout_alignBottom与et_reply的底部边缘对齐 -->    
    <ImageButton
        android:id="@+id/btn_kaixin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/btn_renren"
        android:layout_alignBottom="@id/et_reply"
        android:src="@drawable/ic_chk_kaixin_selected" />

    <ImageButton
        android:id="@+id/btn_renren"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/et_reply"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_chk_renren_selected" />
</RelativeLayout>

 

需要注意的是，填写参考的id时，有时候是@id/xxx, 有时候是@+id/xxxx, 怎么分辨什么时候该用啥呢？

当依赖的元素在当前元素的后面（XML节点出现的顺序），用@+id/xxxx,因为还没有出现，所有要用@+id表示新建id

反之，在前面，用@id/xxxx， @id表示引用已有id

FrameLayout

布局当中的元素可以重叠在一起，元素出现的顺序很重要，后面的元素会覆盖前面的。

 

~)R3OL2YT1169AXB5H5DEQL

<?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:id="@+id/tv1"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:gravity="bottom|right"
        android:text="First"
        android:textSize="40sp"
        android:background="#ffabff00" />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:gravity="bottom|right"
        android:text="Second"
        android:textSize="40sp"
        android:background="#ff8432" />
     <TextView
        android:id="@+id/tv3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:gravity="bottom|right"
        android:text="Third"
        android:textSize="40sp"
        android:background="#0f0fff" />   
</FrameLayout>

我们可以看到，FrameLayout里面的元素默认都是以左上角为对齐的。

这个FrameLayout可能有个Bug， 设置android:layout_margin时不生效，但是如果先设置了android:layout_gravity， layout_margin又生效了。

TableLayout

表格的方式来排列元素。

<?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"
    android:stretchColumns="0,1,2" >

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

        <ImageView
            android:id="@+id/top_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic1" />

        <ImageView
            android:id="@+id/top_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic2" />

        <ImageView
            android:id="@+id/top_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic3" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp" >

        <ImageView
            android:id="@+id/top_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic4" />

        <ImageView
            android:id="@+id/top_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic5" />

        <ImageView
            android:id="@+id/top_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic6" />
    </TableRow>

</TableLayout>

5~[{4W%`3OIHDDMH@`2)U(Y

TableLayout属性有：

android:collapseColumns：以第0行为序，隐藏指定的列

如果android:collapseColumns=2，结果是：

_H@@DA7(DI6}@$O85_{P[VB中间一列被隐藏了。

android:shrinkColumns：以第0行为序，当行宽不够包裹内容时，自动“缩水”指定的列

注意是“缩水”，我们先把最后一张换上大一点的图片，让它不够位置，

S%DM_IRE3QH[N_Y_Q}DRO(W

如果android:shrinkColumns=2, 缩水最后一列，结果是：

{BKB)@__A$9A85IEGVIW%I8

如果android:shrinkColumns=1，缩水中间一列：

}NA_B{ZOE7MNPI6HB(TKKX9因为最后一张图太大了，中间一列直接“缩水”到不见了。

android:stretchColumns：以第0行为序，尽量把指定的列填充空白部分，注意是“空白部分”。第一个例子就是android:stretchColumns="0,1,2"

下一讲，我们来用代码定义Layout.

posted @ 2012-08-21 11:36  Stanley.Luo  阅读(3479)  评论(0)  编辑  收藏  举报