Android之布局

Android中的布局分为六种,分别是相对布局、线性布局、表格布局、网格布局、帧布局、绝对布局,良好的布局设计对UI界面至关重要,下面先来看看先相对布局。

相对布局(RelativeLayout):

在Eclipse中开发Android程序时,默认采用的就是相对布局。相对布局通常有两种形式,一种是相对于容器而言的,一种是相对于控件而言的,为了能准确定位布局中的控件,相对布局提供了很多属性。

android:layout_centerHrizontal  水平居中
android:layout_centerVertical    垂直居中
android:layout_centerInparent  相对于父元素完全居中
  
android:layout_alignParentBottom   贴紧父元素的下边缘
android:layout_alignParentLeft        贴紧父元素的左边缘
android:layout_alignParentRight      贴紧父元素的右边缘
android:layout_alignParentTop        贴紧父元素的上边缘
android:layout_alignWithParentIfMissing     如果对应的兄弟元素找不到的话就以父元素做参照物
android:layout_below        在某元素的下方
android:layout_above        在某元素的的上方
android:layout_toLeftOf     在某元素的左边
android:layout_toRightOf   在某元素的右边
  
android:layout_alignTop       本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft       本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom  本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight     本元素的右边缘和某元素的的右边缘对齐
  
android:layout_marginBottom   离某元素底边缘的距离
android:layout_marginLeft        离某元素左边缘的距离
android:layout_marginRight      离某元素右边缘的距离
android:layout_marginTop        离某元素上边缘的距离

  

介绍的这些布局属性,我们经常会用到,下面来看看一个布局界面图感受数形结合感受一下:

线性布局(LinearLayout):

线性布局是Android中较为常用的布局方式,它使用<LinearLayout>标签表示。线性布局主要有两种形式,一种是水平线性布局,一种是垂直线性布局。

       

表格布局(TableLayout):

在表格布局TableLayout中,行数由TableRow对象控制的,即布局中有多少TableRow对象,就有多少行。每个TableRow中可以放置多个组件。列数由最宽的单元格决定,假如第一个TableRow有两个控件,第二个TableRow有三个控件,那这个TableLayout就有三列。在控件中通过android:layout_column属性指定具体的列数,该属性的值从“0”开始,表示第一列。下面看一个表格布局:

布局中有一个三行三列的表格,也就是有三个TableRow对象。下面看一下表格布局对应的代码:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="2" >
    <TableRow>
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:text="Button1" />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="Button2" />
    </TableRow>
    <TableRow>
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="Button3" />
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="Button4" />
    </TableRow>
    <TableRow>
        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="Button5" />
    </TableRow>
</TableLayout>

网格布局(GirdLayout):

网格布局是Android4.0新增的布局,它实现了控件的交错显示,能够避免因布局嵌套对设备性能的影响,更利于自由布局的开发。网格布局用一组无限细的直线将绘图区域分成行、列和单元,并指定控件的显示区域和控件在该区域的显示方式,如图所示:

 网格布局中的控件可以很整齐的排列,并且可以控制每个控件所占的行数和列数。下面看一下网格布局对应的代码:

<?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:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal" >
    <Button 
        android:layout_column="3"
        android:text="/" />
    <Button android:text="1" />
    <Button android:text="2" />
    <Button android:text="3" />
    <Button android:text="*" />
    <Button android:text="4" />
    <Button android:text="5" />
    <Button android:text="6" />
    <Button android:text="-" />
    <Button android:text="7" />
    <Button android:text="8" />
    <Button android:text="9" />
    <Button
        android:layout_gravity="fill"
        android:layout_rowSpan="3"
        android:text="+" />
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="0" />
    <Button android:text="00" />
    <Button
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:text="=" />
</GridLayout>

上述代码中,可以看到有很多个Button,个别的Button按钮中包含一些属性,如android:layout_column表示该按钮在第几列,android:layout_rowSpan表示该控件占用几行,android:layout_columnSpan表示该控件占用几列。

在这里要特别注意的是:由于GridLayout是Android4.0之后有的新功能,如果要在项目中使用这种布局,需要把SDK的最低版本指定为Android4.0(API14)以上,所以我们需要配置好SDK版本:

<uses-sdk
     android:minSdkVersion="14"
     android:targetSdkVersion="17" />

帧布局(FrameLayout):

帧布局是Android布局中最简单的一种,帧布局为每个加入其中的控件创建一个空白区域(称为一帧,每个控件占据一帧)。采用帧布局方式设计界面时,只能在屏幕左上角显示一个控件,如果添加多个控件,这些控件会按照顺序在屏幕的左上角重叠显示,且会透明显示之前控件的文本,如图所示:

从图中可以看出,界面中添加了3个Button控件,Button1是最先添加的大按钮,Button2是接着添加的较小按钮,Button3是最后添加的小按钮,这三个控件叠加显示在屏幕的左上角。

下面看一下帧布局对应的代码,具体如下:

<?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" >
    <Button
        android:id="@+id/button1"
        android:layout_width="294dp"
        android:layout_height="294dp"
        android:text="Button1" />
    <Button
        android:id="@+id/button2"
        android:layout_width="218dp"
        android:layout_height="214dp"
        android:text="Button2" />
    <Button
        android:id="@+id/button3"
        android:layout_width="156dp"
        android:layout_height="143dp"
        android:text="Button3" />
</FrameLayout>

绝对布局(AbsoluteLayout):

绝对布局需要通过指定x、y坐标来控制每一个组件的位置,放入该布局的组件需要通过android:layout_x和android:layout_y两个属性指定其准确的坐标值,并显示在屏幕上,布局如图所示:

从图我们就可以看出,组件是以屏幕左上角为坐标原点,将Button1的坐标设置为(50,50),Button2的坐标设置为(200,150),根据这个坐标精确定位组件在屏幕中的位置,相对应的代码如下:

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="50dp"
        android:layout_y="50dp"
        android:text="Button1" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="200dp"
        android:layout_y="150dp"
        android:text="Button2" />
</AbsoluteLayout>

上述代码中,Button控件的android:layout_x属性表示该控件在X坐标的第50dp像素上,android:layout_y属性表示控件在Y坐标的第50dp象素上,Button2也是通过这两个属性设置的控件位置。

而我们需要注意的是,理论上绝对布局可以完成任何的布局设计,且灵活性很大,但是实际的工程应用中不提倡使用这种布局。因为使用这种布局不但需要精确计算每个组件的大小,而且当应用程序运行在不用屏幕的手机上产生的效果也不相同,因此,一般不推荐使用绝对布局。

不努力,还要青春干什么?
原文地址:https://www.cnblogs.com/caidupingblogs/p/5532036.html