Android软件开发之盘点界面五大布局(十六)

169
回复
839544
查看
  [复制链接]

249

主题

278

帖子

17

安币

初级码农

Rank: 1

发表于 2011-9-3 00:09:37 | 显示全部楼层 |阅读模式
Android软件开发之盘点界面五大布局

1.线性布局(LinearLayout)

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

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

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

在xml中我使用了LinearLayout 嵌套的方式 配置了2个线性布局 一个水平显示 一个垂直显示。
  1. <?xml version="1.0" encoding="utf-8"?>

  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.         android:layout_width="fill_parent"
  4.         android:layout_height="fill_parent"
  5.         android:orientation="vertical"
  6.         >
  7. <LinearLayout
  8.         android:layout_width="fill_parent"
  9.         android:layout_height="fill_parent"
  10.         android:orientation="horizontal"
  11.         android:gravity="center_horizontal"
  12.         android:layout_weight="2"
  13.         >
  14.         <ImageView
  15.                 android:layout_width="wrap_content"
  16.                 android:layout_height="wrap_content"
  17.                 android:src="@drawable/jay"
  18.         />
  19.        
  20.         <TextView
  21.                 android:layout_width="wrap_content"
  22.                 android:layout_height="wrap_content"
  23.                 android:text="雨松MOMO"
  24.                 android:background="#FF0000"
  25.                 android:textColor="#000000"  
  26.         android:textSize="18dip"  
  27.         />
  28.         <EditText
  29.                 android:layout_width="wrap_content"
  30.                 android:layout_height="wrap_content"
  31.                 android:text="水平方向"
  32.         />
  33. </LinearLayout>

  34. <LinearLayout
  35.         android:layout_width="fill_parent"
  36.         android:layout_height="fill_parent"
  37.         android:orientation="vertical"
  38.         android:layout_weight="1"
  39.         >
  40.        
  41.         <TextView
  42.                 android:layout_width="wrap_content"
  43.                 android:layout_height="wrap_content"
  44.                 android:text="雨松MOMO"
  45.                 android:background="#FF0000"
  46.                 android:textColor="#000000"  
  47.         android:textSize="18dip"  
  48.         />
  49.         <EditText
  50.                 android:layout_width="wrap_content"
  51.                 android:layout_height="wrap_content"
  52.                 android:text="垂直方向"
  53.         />
  54.         <Button
  55.                 android:layout_width="wrap_content"
  56.                 android:layout_height="wrap_content"
  57.                 android:text="雨松MOMO"
  58.         />
  59.         <ImageView
  60.                 android:layout_width="wrap_content"
  61.                 android:layout_height="wrap_content"
  62.                 android:src="@drawable/image"
  63.         />
  64. </LinearLayout>
  65. </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"
  1. <?xml version="1.0" encoding="utf-8"?>

  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.         android:layout_width="fill_parent"
  4.         android:layout_height="fill_parent"
  5.         >
  6.         <EditText
  7.                 android:id="@+id/re_edit_0"
  8.                 android:layout_width="wrap_content"
  9.                 android:layout_height="wrap_content"
  10.                 android:text="雨松MOMO"
  11.                 android:layout_alignParentRight="true"
  12.         />
  13.         <ImageView
  14.                 android:id="@+id/re_iamge_0"
  15.                 android:layout_width="wrap_content"
  16.                 android:layout_height="wrap_content"
  17.                 android:src="@drawable/jay"
  18.                 android:layout_below="@id/re_edit_0"
  19.                 android:layout_alignParentRight="true"
  20.         />
  21.         <TextView
  22.                 android:layout_width="wrap_content"
  23.                 android:layout_height="wrap_content"
  24.                 android:background="#FF0000"
  25.                 android:text="努力学习"
  26.                 android:textColor="#000000"  
  27.         android:textSize="18dip"  
  28.                 android:layout_toLeftOf="@id/re_iamge_0"
  29.         />
  30.         <EditText
  31.                 android:id="@+id/re_edit_1"
  32.                 android:layout_width="wrap_content"
  33.                 android:layout_height="wrap_content"
  34.                 android:text="雨松MOMO"
  35.                 android:layout_alignParentBottom="true"
  36.         />
  37.         <ImageView
  38.                 android:id="@+id/re_iamge_1"
  39.                 android:layout_width="wrap_content"
  40.                 android:layout_height="wrap_content"
  41.                 android:src="@drawable/image"
  42.                 android:layout_above="@id/re_edit_1"
  43.         />
  44.         <TextView
  45.                 android:layout_width="wrap_content"
  46.                 android:layout_height="wrap_content"
  47.                 android:background="#FF0000"
  48.                 android:text="努力工作"
  49.                 android:textColor="#000000"  
  50.         android:textSize="18dip"  
  51.                 android:layout_toRightOf="@id/re_iamge_1"
  52.                 android:layout_above="@id/re_edit_1"
  53.         />
  54. </RelativeLayout>
复制代码
3.帧布局(FrameLayout)

        原理是在控件中绘制任何一个控件都可以被后绘制的控件覆盖,最后绘制的控件会盖住之前的控件。如图所示界面中先绘制的ImageView 然后在绘制的TextView和EditView 所以后者就覆盖在了前者上面。
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         android:layout_width="fill_parent"
  5.         android:layout_height="fill_parent">
  6.         <ImageView
  7.                 android:layout_width="wrap_content"
  8.                 android:layout_height="wrap_content"
  9.                 android:src="@drawable/g"
  10.         />
  11.         <TextView
  12.                 android:layout_width="wrap_content"
  13.                 android:layout_height="wrap_content"
  14.                 android:text="雨松MOMO"
  15.                 android:background="#FF0000"
  16.                 android:textColor="#000000"  
  17.         android:textSize="18dip"  
  18.         />
  19.         <ImageView
  20.                 android:layout_width="wrap_content"
  21.                 android:layout_height="wrap_content"
  22.                 android:src="@drawable/image"
  23.                 android:layout_gravity="bottom"
  24.         />
  25.         <EditText
  26.                 android:layout_width="wrap_content"
  27.                 android:layout_height="wrap_content"
  28.                 android:text="快乐生活每一天喔"
  29.         android:layout_gravity="bottom"
  30.         />
  31. </FrameLayout>
复制代码
4.绝对布局(AbsoluteLayout)

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

设置控件的显示坐标点
  1.               android:layout_x="50dip"
  2.         android:layout_y="30dip"
复制代码
  1. <?xml version="1.0" encoding="utf-8"?>

  2. <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.         android:layout_width="fill_parent"
  4.         android:layout_height="fill_parent">
  5.         <ImageView
  6.                 android:layout_width="wrap_content"
  7.                 android:layout_height="wrap_content"
  8.                 android:src="@drawable/f"
  9.                 android:layout_x="100dip"
  10.         android:layout_y="50dip"
  11.         />
  12.         <TextView
  13.                 android:layout_width="wrap_content"
  14.                 android:layout_height="wrap_content"
  15.                 android:text="当前坐标点 x = 100dip y = 50 dip"
  16.                 android:background="#FFFFFF"
  17.                 android:textColor="#FF0000"  
  18.         android:textSize="18dip"  
  19.               android:layout_x="50dip"
  20.         android:layout_y="30dip"
  21.         />
  22.        
  23.         <ImageView
  24.                 android:layout_width="wrap_content"
  25.                 android:layout_height="wrap_content"
  26.                 android:src="@drawable/h"
  27.                 android:layout_x="50dip"
  28.         android:layout_y="300dip"
  29.         />
  30.         <TextView
  31.                 android:layout_width="wrap_content"
  32.                 android:layout_height="wrap_content"
  33.                 android:text="当前坐标点 x = 50dip y = 300 dip"
  34.                 android:background="#FFFFFF"
  35.                 android:textColor="#FF0000"  
  36.         android:textSize="18dip"  
  37.              android:layout_x="30dip"
  38.         android:layout_y="280dip"
  39.         />
  40. </AbsoluteLayout>
复制代码
5.表格布局(TableLayout)
      
       在表格布局中可以设置TableRow 可以设置 表格中每一行显示的内容 以及位置 ,可以设置显示的缩进,对齐的方式。
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent"
  5.     >
  6.         <ImageView
  7.                 android:layout_width="wrap_content"
  8.                 android:layout_height="wrap_content"
  9.                 android:src="@drawable/g"
  10.                 android:layout_gravity="center"
  11.         />
  12.     <TableRow
  13.         android:layout_width="wrap_content"
  14.         android:layout_height="fill_parent"
  15.         android:padding="10dip">
  16.         <TextView
  17.             android:text="姓名"
  18.             android:gravity="left"
  19.             />
  20.         <TextView
  21.             android:text="电话"
  22.             android:gravity="right"/>
  23.     </TableRow>
  24.    
  25.     <View
  26.         android:layout_height="2dip"
  27.         android:background="#FFFFFF" />
  28.    
  29.     <TableRow
  30.             android:layout_width="wrap_content"
  31.         android:layout_height="fill_parent"
  32.         android:padding="10dip">
  33.         <TextView
  34.             android:text="雨松"
  35.             android:gravity="left"
  36.             />
  37.         <TextView
  38.             android:text="15810463139"
  39.             android:gravity="right"/>
  40.     </TableRow>
  41.    
  42.     <TableRow
  43.             android:layout_width="wrap_content"
  44.         android:layout_height="fill_parent"
  45.         android:padding="10dip">
  46.         <TextView
  47.             android:text="小可爱"
  48.             android:gravity="left"
  49.             />
  50.         <TextView
  51.             android:text="15810463139"
  52.             android:gravity="right"/>
  53.     </TableRow>

  54.     <TableRow
  55.             android:layout_width="wrap_content"
  56.         android:layout_height="fill_parent"
  57.         android:padding="10dip">
  58.         <TextView
  59.             android:text="好伙伴"
  60.             android:gravity="left"
  61.             />
  62.         <TextView
  63.             android:text="15810463139"
  64.             android:gravity="right"/>
  65.     </TableRow>

  66.     <TableRow
  67.         android:layout_width="wrap_content"
  68.         android:layout_height="fill_parent"
  69.         android:padding="10dip"
  70.         >
  71.         <TextView
  72.             android:text="姓名"
  73.             android:gravity="left"
  74.             />
  75.         <TextView
  76.             android:text="性别"
  77.             android:gravity="right"/>
  78.     </TableRow>
  79.    
  80.     <View
  81.         android:layout_height="2dip"
  82.         android:background="#FFFFFF" />
  83.    
  84.     <TableRow
  85.             android:layout_width="wrap_content"
  86.         android:layout_height="fill_parent"
  87.         android:padding="10dip"
  88.         >
  89.         <TextView
  90.             android:text="雨松MOMO"
  91.             android:gravity="left"
  92.             />
  93.         <TextView
  94.             android:text="男"
  95.             android:gravity="right"/>
  96.     </TableRow>
  97.    
  98.     <TableRow
  99.             android:layout_width="wrap_content"
  100.         android:layout_height="fill_parent"
  101.         android:padding="10dip">
  102.         <TextView
  103.             android:text="小可爱"
  104.             android:gravity="left"
  105.             />
  106.         <TextView
  107.             android:text="女"
  108.             android:gravity="right"/>
  109.     </TableRow>

  110.     <TableRow
  111.             android:layout_width="wrap_content"
  112.         android:layout_height="fill_parent"
  113.         android:padding="10dip">
  114.         <TextView
  115.             android:text="好伙伴"
  116.             android:gravity="left"
  117.             />
  118.         <TextView
  119.             android:text="男"
  120.             android:gravity="right"/>
  121.     </TableRow>

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



最后如果你还是觉得我写的不够详细 看的不够爽 不要紧我把源代码的下载地址贴出来 欢迎大家一起讨论学习

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

点评

很好的文章  发表于 2013-2-27 10:00

0

主题

6

帖子

37

安币

初级码农

Rank: 1

发表于 2011-9-5 21:58:27 | 显示全部楼层
谢啦,下载来看一下

14

主题

361

帖子

204

安币

攻城狮

Rank: 3Rank: 3

发表于 2011-9-7 14:48:34 | 显示全部楼层
Android软件开发之盘点界面五大布局(十六)

14

主题

361

帖子

204

安币

攻城狮

Rank: 3Rank: 3

发表于 2011-9-7 14:48:46 | 显示全部楼层
Android软件开发之盘点界面五大布局(十六)

0

主题

74

帖子

144

安币

程序猿

Rank: 2

发表于 2011-9-12 16:20:20 | 显示全部楼层
Android软件开发之盘点界面五大布局(十六)

1

主题

25

帖子

12

安币

初级码农

Rank: 1

发表于 2011-9-13 13:30:34 | 显示全部楼层
这个很是好东西。。

0

主题

24

帖子

44

安币

初级码农

Rank: 1

发表于 2011-9-13 15:38:27 | 显示全部楼层
恩 学习了 感谢楼主

主题

帖子

安币

游客

发表于 2011-9-13 15:51:13 | 显示全部楼层
我要加入安卓这个大家族!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )