【Android学习】浅谈六大布局属性与实现

来源：互联网发布：淘宝待付款订单有效期编辑：程序博客网时间：2024/06/05 00:29

写在前面

在介绍android常见的六个布局之前，我先简单介绍一下所有Layout都具有的属性，这样以下布局就不再赘述

常见属性与属性值
layout_width/layout_height（宽度与高度）：48px，warp_content，match_parent（少用fill_parent）
layout_margin/padding + 方向（外/内边距）:48px
layout_gravity/grabvity（相对兄弟/父控件距离）

LinearLayout（线性布局）

LinearLayout是最常用一种布局方式，它主要提供控件的水平或垂直的线性排列（默认是垂直排列）

常见属性与属性值
orientation（组件排列方式）：horizontal,vertical
layout_weight（分配权重比例）
代码实例

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#ADFF2F"        android:layout_weight="1"/>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_weight="1"        android:orientation="horizontal">        <LinearLayout        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:background="#04f5ad"        android:layout_weight="2"/>        <LinearLayout        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:background="#061ab4"        android:layout_weight="3"/>    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#f12c09"        android:layout_weight="0.5"/>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_weight="1"        android:orientation="horizontal">        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:background="#eccb60"            android:layout_weight="3"/>        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:background="#722f99"            android:layout_weight="1"/>        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:background="#907e91"            android:layout_weight="1"/>    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#ff7002"        android:layout_weight="1"/></LinearLayout>

效果图

RelativeLayout（相对布局）

RelativeLayout按照子元素之间或相对于父元素的位置关系进行布局，较为灵活，有很好的适配性，适合比较复杂的界面布局，但需要注意的是，在指定位置关系时，引用的ID必须在引用之前先被，否则将出现异常

常见属性与属性值
layout_alignParentBottom
layout_alignParentLeft
layout_alignParentRight
layout_alignParentTop
layout_centerHorizontal
layout_centerVertical
layout_centerInParent
以上为相对父元素位置
layout_above
layout_below
layout_toLeftOf
layout_toRightOf
layout_alignBottom
layout_alignLeft
layout_alignRight
layout_alignTop
layout_alignBaseline
以上为相对子控件位置
代码实例

<?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">    <TextView        android:text="left-bottom"        android:background="#837e7e"        android:layout_width="100px"        android:layout_height="100px"        android:layout_alignParentBottom="true"        />    <TextView        android:text="left-top"        android:background="#837e7e"        android:layout_width="100px"        android:layout_height="100px"        android:layout_alignParentLeft="true"        />    <TextView        android:text="right-top"        android:background="#837e7e"        android:layout_width="100px"        android:layout_height="100px"        android:layout_alignParentRight="true"        />    <TextView        android:text="top"        android:background="#837e7e"        android:layout_width="100px"        android:layout_height="100px"        android:layout_centerHorizontal="true"        />    <TextView        android:text="left-middle"        android:background="#837e7e"        android:layout_width="100px"        android:layout_height="100px"        android:layout_centerVertical="true"        />    <TextView        android:id="@+id/middle"        android:text="middle"        android:background="#837e7e"        android:layout_width="100px"        android:layout_height="100px"        android:layout_centerInParent="true"        />    <TextView        android:text="up"        android:background="#837e7e"        android:layout_width="50px"        android:layout_height="50px"        android:layout_centerHorizontal="true"        android:layout_above="@id/middle"        />    <TextView        android:text="down"        android:background="#837e7e"        android:layout_width="50px"        android:layout_height="50px"        android:layout_centerHorizontal="true"        android:layout_below="@id/middle"        />    <TextView        android:text="left"        android:background="#837e7e"        android:layout_width="50px"        android:layout_height="50px"        android:layout_centerVertical="true"        android:layout_toLeftOf="@id/middle"        />    <TextView        android:text="right"        android:background="#837e7e"        android:layout_width="50px"        android:layout_height="50px"        android:layout_centerVertical="true"        android:layout_toRightOf="@id/middle"        /></RelativeLayout>

效果图

TableLayout（表格布局）

TableLayout类似于html中的table，由TableRow组成，而TableRow是LinearLayout的子类，代表一行的线性布局，每向TableRow中添加一个组件则增加一列，Table的宽度由最宽的TableRow决定

常见属性与属性值
android:collapseColumns（隐藏列）
android:shrinkColumns（收缩列）
android:stretchColumns（拉伸列）
android:layout_span（跨越列）
代码实例

<?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"    >    <!-- TableRow具有linearLayout的属性 -->    <TableRow>        <TextView            android:text="1,1"            android:background="#f70808"            android:layout_width="wrap_content"            android:layout_weight="1"            />        <TextView            android:text="1,2"            android:background="#eac54c"            android:layout_width="wrap_content"            android:layout_weight="1"            />        <TextView            android:text="1,3"            android:background="#35d40d"            android:layout_width="wrap_content"            android:layout_weight="1"            />    </TableRow>    <TableRow>        <TextView            android:text="2,1"            android:background="#f28c8c"            android:layout_width="wrap_content"            android:layout_weight="1"            />    </TableRow>    <TableRow>        <TextView            android:text="3,1"            android:background="#fa5017"            android:layout_width="wrap_content"            />        <TextView            android:layout_span="2"            android:text="3,2"            android:background="#fcfc19"            android:layout_width="wrap_content"            />    </TableRow>    <TableRow>        <TextView            android:text="4,1"            android:background="#6265fc"            android:layout_width="wrap_content"            />        <TextView            android:text="4,2"            android:background="#1a3aca"            android:layout_width="wrap_content"            />        <TextView            android:text="4,2"            android:background="#08047e"            android:layout_width="wrap_content"            />    </TableRow></TableLayout>

效果图

FrameLayout（帧布局）

布局中的所有元素都被至于左上角，从坐标（0，0）开始，无法指定确切位置，后者覆盖前者，其中的控件也会被覆盖

常见属性与属性值
android:foreground（前景图）
android:foregroundGravity（前景图位置）
代码实例

<?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:text="1"        android:textSize="150px"        android:layout_gravity="end"        android:textAlignment="textEnd"        android:background="#f28c8c"        android:layout_width="600px"        android:layout_height="600px"        />    <TextView        android:text="2"        android:textSize="150px"        android:background="#37efe3"        android:layout_width="400px"        android:layout_height="400px"        />    <TextView        android:text="3"        android:textSize="150px"        android:layout_gravity="center"        android:textAlignment="center"        android:background="#fdf905"        android:layout_width="350px"        android:layout_height="400px"        /></FrameLayout>

效果图

GridLayout（线性布局）

Android 4.0后的，和TableLayout有点类似，但多了一些自定义的新功能，如自定义网格的行数列树，组件位于几行几列，甚至是横跨几行几列，以及设置布局中组件的排列方式，

常见属性与属性值
orientation : vertical , horizontal
layout_gravity
rowCount
columnCount
以上设置于GridLayout中
layout_row : from 0
layout_column : from 0
layout_rowSpan
layout_columnSpan
以上设置于GridLayout的控件中
代码实例

<?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:columnCount="4"    android:orientation="horizontal"    android:rowCount="7">　    <Button        android:background="#000000"        android:layout_gravity="fill"        android:layout_columnSpan="4"        android:text="0" />    <Button        android:background="#000000"        android:layout_gravity="fill"        android:layout_columnSpan="4"        android:text="0" />    <Button android:text="C" />　　    <Button android:text="+/-" />　　　    <Button android:text="%" />    　　    <Button android:text="/" />　　    <Button android:text="7" />    <Button android:text="8" />    　　    <Button android:text="9" />    　　    <Button android:text="*" />    　　    <Button android:text="4" />    　　    <Button android:text="5" />    　　    <Button android:text="6" />    <Button android:text="-" />    <Button android:text="1" />    <Button android:text="2" />    <Button android:text="3" />    <Button android:text="+" />    <Button        android:layout_gravity="fill"        android:layout_columnSpan="2"        android:text="0" />    <Button android:text="." />    <Button android:text="=" /></GridLayout>

效果图

AbsoluteLayout（绝对定位布局）

从名称就可以猜测，这种布局方式利用坐标轴（如左上角：（0，0），往右X轴递增，往下Y轴递增）的方式定位了组件的位置，不可改变，但由于不同手机的屏幕尺寸以及分辨率可能导致界面的适配性低下，故该种布局方式已经过时，不再演示

参考资料：http://www.runoob.com/w3cnote/android-tutorial-intro.html

阅读全文

0 0