Android界面布局中几种常用的布局

发布于: 2016-12-13    浏览: 2836    作者:系统管理员

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>

长沙网站设计,长沙手机网站,长沙软件公司,湖南软件开发,长沙软件定制,长沙软件开发,湖南软件公司,长沙微信小程序,长沙网络公司,长沙软件外包公司,长沙竞价托管

图六:帧布局

在线客服

售前咨询

售后服务

投诉/建议

服务热线
0731-83091505
18874148081