layout相关

大致看了看布局大致有5种(approximately)

1. LinearLayout

2. RelativeLayout

3. FrameLayout

4. TableLayout

5. GridLayout

(貌似还有一个AbosuteLayout)

---

 

 

1.   LinearLayout

     常用属性：

orientation  子控件的排列方式	vertical 或者 horizontal
gravity  这属性决定其子布局	center   水平垂直都居中 center_vertical 垂直居中 center_horizontal  水平居中 right   子类控件在当前布局的右边 left   子类控件在当前布局的左边 bottom  子类控件在当前布局的底部

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

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

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

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

LinearLayout中注意：

layout_gravity  这个属性是控制当前某一个控件相对于父容器的位置的：(书写在子控件标签内，而不是linearlayout标签内)

      layout_gravity调整该布局相对父布局的位置        gravity是调整该布局中子布局的位置（可以再子控件标签内、也可以在layout标签内）

<Button
        android:layout_gravity="bottom"
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3" />

 

 

还有一个注意：layout_weight  额外控件分配

(实际上，linearlayout标签还有一个总额、所有的layout_weight的份额之和：weight_sum)

weightSum  总共分几份  ---它不写的时候，就自动计算

Layout_weight 额外空间分配(权重)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" 
    android:weightSum="2">

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

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

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

</LinearLayout>

 

如果把两份都给了第一个button，则是

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

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

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

 

还补充一个：

android:visibility="invisible" 控制布局是否显示

(显示 visible；不显示，但占空间 invisible、隐藏 gone)

（invisible的时候，额外空间要减去去它所占用的空间）

---

 

2. RelativeLayout  相对布局

子类控件相对于父容器  或者  子类控件之间

a. 相对于父容器，在子类控件中常用到的属性：

 

------以alignParent开头

layout_alignParentLeft=”true”  子类在父类容器左边

layout_alignParentTop=”true”  子类在父容器的上边

（当然有右边、下边）

 

--------以margin开头

layout_marginLeft=”21dp”  距离左边缘21dp

layout_marginTop=”21dp” 距离右边缘21dp

（也有marginRight/marginBottom）

 

--------以center开头

layout_centerInParent=”true”  水平竖直都居中

layout_centerHorizontal=”true” 水平居中

layout_centerVertical=”true”  竖直居中

 

试玩一下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="false"
        android:layout_alignParentBottom="true"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="26dp"
        android:layout_marginTop="26dp"
        android:text="Button2" />
    
    <Button
        android:id="@+id/button3"
          android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button3"
        />
    
    <Button
        android:id="@+id/button4"
          android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="Button4"
        />

</RelativeLayout>

 

注意：

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="40dp"
        android:text="Button1" />

相当于

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="40dp"
        android:text="Button1" />

 

当然下面这样写，虽然和上面写法一样，但是没有意义

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginTop="40dp"
        android:layout_marginBottom="40dp"
        android:text="Button1" />

 

 

a. 子类控件相对于子类控件，（在子类控件中）常用到的属性：

 

---在某控件的上下左右

• android:layout_toRightOf         在指定控件的右边
• android:layout_toLeftOf           在指定控件的左边
• android:layout_above               在指定控件的上边
• android:layout_below               在指定控件的下边

 

-----和某控件对齐

• android:layout_alignBaseline     跟指定控件水平对齐(即同一行)
• android:layout_alignLeft            跟指定控件左对齐(和指定控件的左边线对齐)
• android:layout_alignRight         跟指定控件右对齐(和指定控件的右边线对齐)
• android:layout_alignTop        跟指定控件顶部对齐
• android:layout_alignBottom      跟指定控件底部对齐

 

 

玩一下简单的商品展示：

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/imageView1"
        android:text="产品名称" 
        android:textSize="18sp"/>
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/textView1"
        android:layout_below="@+id/textView1"
        android:text="产品说明" 
        android:textSize="18sp"/>

</RelativeLayout>

（布局是一件很细心的工作）

---

 

3. FrameLayout

帧布局每次添加的控件都显示在最上面，最后显示在界面上的是最后添加的一个控件

(影音媒体播放的时候，上面的按钮)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#ff0000"
        android:text="最底部"
        android:gravity="left"
        android:textColor="#000000"
         />

    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#0ff0ff"
        android:layout_gravity="center"
        android:gravity="left"
        android:text="中间" />
    
    <Button
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="#ffffff"
        android:text="顶部" />
</FrameLayout>

 

当然也可以实现进度条

 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_gravity="center"/>
    <TextView
        android:text="80%" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_gravity="center"
        />

</FrameLayout>

（好了，了解到此为止）

 

 

 

---

4.TableLayout (表格布局)---貌似用的也比较少

 

TableLayout以行的方式管理子控件。

每一行为一个TableRow标签，当然也可以是一个View标签

作用在TableLayout布局控件上面的:

• android:shrinkColumns 收缩列
• android:stretchColumns 拉伸列
• android:collapseColumns 隐藏列 

-----拉伸stretchColumns

不指定拉伸单元格的时候，效果如下(左)；使用拉伸后的效果（右）

代码如下： (注意： 在每一行，即TableRow控件中，每一个控件就表示一个单元格)

 

 

-------收缩：

 

收缩列的效果

代码如下：

隐藏列用法同上面俩

 

下面都是以索引编号为单位

• android:layout_column 指定列位置(作用在列的身上)
• android:layout_span 合并列(作用在列的身上)

 

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

        <Button
            android:id="@+id/button1"
            android:layout_column="1"
            android:layout_span="2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1" />

        
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2" />

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

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />
        
    </TableRow>

</TableLayout>

但是这两个属性没有提示，而且用的时候，很多时候，不知道怎么回事儿，弄不出“应该有的结果”，建议不用。

 

 

注意<TableRow />默认宽度是 match_parent，高度可以自定义大小

TableRow单元行里的单元格的layout_width小于默认的宽度时就不起作用,

 

---

5.GridLayout(网格布局)

这个是4.0新增的布局管理器，类似于HTML的table标签，把容器凤城 rows x columns。

GridLayout标签 常用属性：

alignmentMode        设置该布局管理器采用的对齐模式

columnCount             设置网格列的数量

rowCount                    设置网格行的数量

columnOrderPreserved     是否保留列序号

rowOrderPreserved            是否保留行序号

useDefaultMargins              是否使用默认的页边距

 

其子控件常用属性：

layout_column   设置该子控件在父容器的第几列

layout_row         设置该子控件在父容器的第几行

layout_columnSpan    设置该子控件横向跨几列

layout_rowSpan          设置该子控件纵向跨几行

layout_gravity              采用何种方式占据该网格的空间

 

玩一下：

<!--     定义一个跨越4列的文本框 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:textSize="50sp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp" 
        android:padding="5dp"
        android:layout_gravity="right"
        android:background="#eee"
        android:textColor="#000"
        android:text="0"
        />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:text="Clear"
        />
</GridLayout>

---

以下是很少用的:

AbsoluteLayout(绝对布局)

android:layout_x 指定控件在父布局的x轴坐标

android:layout_y 指定控件在父布局的y轴坐标

(使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷)

---

小结：好的布局，需要你细心，对于布局的每一个细节都有很好的把握。心细一点儿，耐心一点儿。