求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
  
 
 
     
   
分享到
Android软件开发之盘点界面五大布局(九)
 

发布于2011-10-10

 

1.线性布局(LinearLayout)

线性布局的形式可以分为两种,第一种横向线性布局 第二种纵向线性布局,总而言之都是以线性的形式 一个个排列出来的,纯线性布局的缺点是很不方便修改控件的显示位置,所以开发中经常会 以 线性布局与相对布局嵌套的形式设置布局。

如图所示 使用了线性布局的水平方向与垂直方向,从图中可以清晰的看出来所有控件都是按照线性的排列方式显示出来的,这就是线性布局的特点。

  • 设置线性布局为水平方向
  • android:orientation="horizontal"
  • 设置线性布局为垂直方向
  • android:orientation="vertical"
  • 设置正比例分配控件范围
  • android:layout_weight="1"
  • 设置控件显示位置,这里为水平居中
  • android:gravity="center_horizontal"

在xml中我使用了LinearLayout 嵌套的方式 配置了2个线性布局 一个水平显示 一个垂直显示。

<?xml version="1.0" encoding="utf-8"?>  

  

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

    android:layout_width="fill_parent"   

    android:layout_height="fill_parent"  

    android:orientation="vertical"  

    >  

<LinearLayout   

    android:layout_width="fill_parent"   

    android:layout_height="fill_parent"  

    android:orientation="horizontal"  

    android:gravity="center_horizontal"  

    android:layout_weight="2"  

    >  

    <ImageView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:src="@drawable/jay"  

    />  

      

    <TextView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:text="雨松MOMO"  

        android:background="#FF0000"  

        android:textColor="#000000"    

        android:textSize="18dip"    

    />  

    <EditText  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:text="水平方向"  

    />  

</LinearLayout>  

  

<LinearLayout   

    android:layout_width="fill_parent"   

    android:layout_height="fill_parent"  

    android:orientation="vertical"  

    android:layout_weight="1"  

    >  

      

    <TextView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:text="雨松MOMO"  

        android:background="#FF0000"  

        android:textColor="#000000"    

        android:textSize="18dip"    

    />  

    <EditText  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:text="垂直方向"  

    />  

    <Button  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:text="雨松MOMO"  

    />  

    <ImageView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:src="@drawable/image"  

    />  

</LinearLayout>  

</LinearLayout>  

2.相对布局(RelativeLayout)

相对布局是android布局中最为强大的,首先它可以设置的属性是最多了,其次它可以做的事情也是最多的。android手机屏幕的分辨率五花八门所以为了考虑屏幕自适应的情况所以在开发中建议大家都去使用相对布局 它的坐标取值范围都是相对的所以使用它来做自适应屏幕是正确的。

设置距父元素右对齐

android:layout_alignParentRight="true"

设置该控件在id为re_edit_0控件的下方

android:layout_below="@id/re_edit_0"

设置该控件在id为re_image_0控件的左边

android:layout_toLeftOf="@id/re_iamge_0"

设置当前控件与id为name控件的上方对齐

android:layout_alignTop="@id/name"

设置偏移的像素值

android:layout_marginRight="30dip"

<?xml version="1.0" encoding="utf-8"?>  

  

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  

    android:layout_width="fill_parent"   

    android:layout_height="fill_parent"  

    >  

    <EditText  

        android:id="@+id/re_edit_0"  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:text="雨松MOMO"  

        android:layout_alignParentRight="true"  

    />  

    <ImageView  

        android:id="@+id/re_iamge_0"  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:src="@drawable/jay"  

        android:layout_below="@id/re_edit_0"  

        android:layout_alignParentRight="true"  

    />  

    <TextView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:background="#FF0000"  

        android:text="努力学习"  

        android:textColor="#000000"    

        android:textSize="18dip"    

        android:layout_toLeftOf="@id/re_iamge_0"  

    />  

    <EditText  

        android:id="@+id/re_edit_1"  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:text="雨松MOMO"  

        android:layout_alignParentBottom="true"  

    />  

    <ImageView  

        android:id="@+id/re_iamge_1"  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:src="@drawable/image"  

        android:layout_above="@id/re_edit_1"  

    />  

    <TextView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:background="#FF0000"  

        android:text="努力工作"  

        android:textColor="#000000"    

        android:textSize="18dip"    

        android:layout_toRightOf="@id/re_iamge_1"  

        android:layout_above="@id/re_edit_1"  

    />  

</RelativeLayout>  

3.帧布局(FrameLayout)

原理是在控件中绘制任何一个控件都可以被后绘制的控件覆盖,最后绘制的控件会盖住之前的控件。如图所示界面中先绘制的ImageView 然后在绘制的TextView和EditView 所以后者就覆盖在了前者上面。

<?xml version="1.0" encoding="utf-8"?>  

<FrameLayout  

    xmlns:android="http://schemas.android.com/apk/res/android"  

    android:layout_width="fill_parent"  

    android:layout_height="fill_parent">  

    <ImageView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:src="@drawable/g"  

    />  

    <TextView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:text="雨松MOMO"  

        android:background="#FF0000"  

        android:textColor="#000000"    

        android:textSize="18dip"    

    />  

    <ImageView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:src="@drawable/image"  

        android:layout_gravity="bottom"  

    />  

    <EditText  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:text="快乐生活每一天喔"  

        android:layout_gravity="bottom"  

    />  

</FrameLayout> 

4.绝对布局(AbsoluteLayout)

使用绝对布局可以设置任意控件的 在屏幕中 X Y 坐标点,和帧布局一样后绘制的控件会覆盖住之前绘制的控件,笔者不建议大家使用绝对布局还是那句话因为android的手机分辨率五花八门所以使用绝对布局的话在其它分辨率的手机上就无法正常的显示了。

设置控件的显示坐标点

android:layout_x="50dip"

android:layout_y="30dip"

<?xml version="1.0" encoding="utf-8"?>  

  

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"  

    android:layout_width="fill_parent"   

    android:layout_height="fill_parent">  

    <ImageView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:src="@drawable/f"  

        android:layout_x="100dip"  

        android:layout_y="50dip"  

    />  

    <TextView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:text="当前坐标点 x = 100dip y = 50 dip"  

        android:background="#FFFFFF"  

        android:textColor="#FF0000"    

        android:textSize="18dip"    

        android:layout_x="50dip"  

        android:layout_y="30dip"  

    />  

      

    <ImageView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:src="@drawable/h"  

        android:layout_x="50dip"  

        android:layout_y="300dip"  

    />  

    <TextView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:text="当前坐标点 x = 50dip y = 300 dip"  

        android:background="#FFFFFF"  

        android:textColor="#FF0000"    

        android:textSize="18dip"    

        android:layout_x="30dip"  

        android:layout_y="280dip"  

    />  

</AbsoluteLayout>  

5.表格布局(TableLayout)

在表格布局中可以设置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"  

    >  

    <ImageView  

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"  

        android:src="@drawable/g"  

        android:layout_gravity="center"  

    />  

    <TableRow  

        android:layout_width="wrap_content"  

        android:layout_height="fill_parent"  

        android:padding="10dip">  

        <TextView  

            android:text="姓名"   

            android:gravity="left"  

            />  

        <TextView  

            android:text="电话"  

            android:gravity="right"/>  

    </TableRow>  

     

    <View  

        android:layout_height="2dip"  

        android:background="#FFFFFF" />  

     

    <TableRow  

        android:layout_width="wrap_content"  

        android:layout_height="fill_parent"  

        android:padding="10dip">  

        <TextView  

            android:text="雨松"   

            android:gravity="left"  

            />  

        <TextView  

            android:text="15810463139"  

            android:gravity="right"/>  

    </TableRow>  

      

    <TableRow  

        android:layout_width="wrap_content"  

        android:layout_height="fill_parent"  

        android:padding="10dip">  

        <TextView  

            android:text="小可爱"   

            android:gravity="left"  

            />  

        <TextView  

            android:text="15810463139"  

            android:gravity="right"/>  

    </TableRow>  

  

    <TableRow  

        android:layout_width="wrap_content"  

        android:layout_height="fill_parent"  

        android:padding="10dip">  

        <TextView  

            android:text="好伙伴"   

            android:gravity="left"  

            />  

        <TextView  

            android:text="15810463139"  

            android:gravity="right"/>  

    </TableRow>  

  

    <TableRow  

        android:layout_width="wrap_content"  

        android:layout_height="fill_parent"  

        android:padding="10dip"  

        >  

        <TextView  

            android:text="姓名"   

            android:gravity="left"  

            />  

        <TextView  

            android:text="性别"  

            android:gravity="right"/>  

    </TableRow>  

     

    <View  

        android:layout_height="2dip"  

        android:background="#FFFFFF" />  

     

    <TableRow  

        android:layout_width="wrap_content"  

        android:layout_height="fill_parent"  

        android:padding="10dip"  

        >  

        <TextView  

            android:text="雨松MOMO"   

            android:gravity="left"  

            />  

        <TextView  

            android:text="男"  

            android:gravity="right"/>  

    </TableRow>  

    <TableRow  

        android:layout_width="wrap_content"  

        android:layout_height="fill_parent"  

        android:padding="10dip">  

        <TextView  

            android:text="小可爱"   

            android:gravity="left"  

            />  

        <TextView  

            android:text="女"  

            android:gravity="right"/>  

    </TableRow>  

    <TableRow  

        android:layout_width="wrap_content"  

        android:layout_height="fill_parent"  

        android:padding="10dip">  

        <TextView  

            android:text="好伙伴"   

            android:gravity="left"  

            />  

        <TextView  

            android:text="男"  

            android:gravity="right"/>  

    </TableRow>  

</TableLayout> 

Android五大布局的基本使用方法已经介绍完,最后笔者在这里强调一下在开发与学习中建议大家使用相对布局,首先它的方法属性是最强大的其次它基本可以实现其它4大布局的效果,当然这里说的不是全部 有时候还是须要使用其他布局, 所以笔者建议大家开发中以实际情况定夺,以上五种布局可以使用布局嵌套的方式可以做出更好看的更美观的布局。


相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
 
分享到
 
 
     


android人机界面指南
Android手机开发(一)
Android手机开发(二)
Android手机开发(三)
Android手机开发(四)
iPhone消息推送机制实现探讨
手机软件测试用例设计实践
手机客户端UI测试分析
手机软件自动化测试研究报告
更多...   


Android高级移动应用程序
Android应用开发
Android系统开发
手机软件测试
嵌入式软件测试
Android软、硬、云整合


领先IT公司 android开发平台最佳实践
北京 Android开发技术进阶
某新能源领域企业 Android开发技术
某航天公司 Android、IOS应用软件开发
阿尔卡特 Linux内核驱动
艾默生 嵌入式软件架构设计
西门子 嵌入式架构设计
更多...