在Android开发中,界面设计是开发过程中的一个很重要的部分,今天主要来给大家介绍一下Android开发中主要应用到的一些界面布局。
Android界面设计中应用较多的是以下几个布局:LinearLayout(线性布局)、TableLayout(表格布局)、AbsoluteLayout(绝对布局)、RelativeLayout(相对布局)等、帧布局(FrameLayout)。接下来我将对它们来进行详细的介绍。
一、 界面布局之线性布局(LinearLayout)
这种布局比较常用,也比较简单,就是每个元素占一行,把它按照横向排放,也就是每个元素占一列。在布局中都按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后。
(1)垂直线性布局
<LinearLayout 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:orientation="horizontal"
tools:context=".MainActivity" >
<Button android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:layout_weight="1"
/>
<Button android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
android:layout_weight="1"
/>
<Button android:id="@+id/button2"
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"
android:layout_weight="1"
/> </LinearLayout>

图一:垂直线性布局
(1) 水平线性布局
将android:orientation="horizontal"设置为vertical,则他的方向为垂直的,具体效果如下图

图二:水平线性布局
二、 界面布局之相对布局(RelativeLayout)
相对布局是android界面设计中比较常用和好用的一个布局方式。
1. 相对布局的属性
相对于兄弟元素
android:layout_below="@id/aaa":在指定View的下方
android:layout_above="@id/xxx":在指定View的上方
android:layout_toLeftOf="@id/bbb":在指定View的左边
android:layout_toRightOf="@id/cccc":在指定View的右边
相对于父元素
android:layout_alignParentLeft="true":在父元素内左边
android:layout_alignParentRight="true":在父元素内右边
android:layout_alignParentTop="true":在父元素内顶部
android:layout_alignParentBottom="true":在父元素内底部
对齐方式
android:layout_centerInParent="true":居中布局
android:layout_centerVertical="true":水平居中布局
android:layout_centerHorizontal="true":垂直居中布局
android:layout_alignTop="@id/xxx":与指定View的上边界一致
android:layout_alignBottom="@id/xxx":与指定View下边界一致
android:layout_alignLeft="@id/xxx":与指定View的左边界一致
android:layout_alignRight="@id/xxx":与指定View的右边界一致
间隔
android:layout_marginBottom=""; 离某元素底边缘的距离
android:layout_marginLeft=""; 离某元素左边缘的距离
android:layout_marginRight ="";离某元素右边缘的距离
android:layout_marginTop=""; 离某元素上边缘的距离
android:layout_paddingBottom=""; 离父元素底边缘的距离
android:layout_paddingLeft=""; 离父元素左边缘的距离
android:layout_paddingRight ="";离父元素右边缘的距离
android:layout_paddingTop=""; 离父元素上边缘的距离
2.用例说明
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000"
>
<TextView
android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Type here:"
android:textColor="#ffffff"
android:textSize="30px"/>
<EditText
android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_background"
android:layout_below="@id/label"/>
<Button
android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:textColor="#ffffff"
android:text="OK" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:textColor="#ffffff"
android:text="Cancel" />
</RelativeLayout>

图三:相对布局
三、 界面布局之表格布局(TableLayout)
表格布局采用行、列的形式来管理元素组件。TableLayout的行和列不需要声明,而是采用添加方法控制。
每次在TableLayout中添加一个TableRow,一个TableRow就代表表格中的一行,也同样是容器,往里面添加一个子组件就代表增加一列。在表格布局中,列的宽度由最宽的那个单元格决定,整个表格布局宽度取决于父容器的宽度。
用例表示:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableRow
android:id="@+id/tableRow1"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="用户名" />
<EditText
android:id="@+id/userName"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_height="wrap_content"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="密码" />
<EditText
android:id="@+id/password"
android:layout_weight="1"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
</TableRow>
<TableRow
android:id="@+id/tableRow4"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="@+id/register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登 陆" />
<Button
android:id="@+id/register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="取 消" />
</TableRow>
</TableLayout>

图四:表格布局
四、 界面布局之绝对布局(AbsoluteLayout)
特点:以坐标的方式来定位在屏幕上的位置,引起缺乏灵活性,在没有绝对定位的情况下相比其他类型的布局更难维护。
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="@+id/lable1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="10dip"
android:layout_y="10dip"
android:text="inputname" />
<EditText
android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_y="40dip" />
<Button
android:id="@+id/test1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="190dip"
android:layout_y="100dip"
android:width="70dip"
android:text="OK" />
<Button
android:id="@+id/test2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="260dip"
android:layout_y="100dip"
android:width="70dip"
android:text="Cancle" />
</AbsoluteLayout>

图五:绝对布局
五、 界面布局之帧布局(FrameLayout)
FrameLayout是五大布局中最简单的一个布局。在帧布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分和全部遮挡。
用例所示:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff000000"
android:gravity="center"
android:text="1"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff654321"
android:gravity="center"
android:text="2"/>
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#fffedcba"
android:gravity="center"
android:text="3" /></FrameLayout>

图六:帧布局