android布局

雨松MOMO原创文章如转载,请注明:转载至我的独立域名博客雨松MOMO程序研究院,原文地址:http://www.xuanyusong.com/archives/133







1.线性布局(LinearLayout)

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







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

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

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


[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:layout_width="fill_parent"   
  5.     android:layout_height="fill_parent"  
  6.     android:orientation="vertical"  
  7.     >  
  8. <LinearLayout   
  9.     android:layout_width="fill_parent"   
  10.     android:layout_height="fill_parent"  
  11.     android:orientation="horizontal"  
  12.     android:gravity="center_horizontal"  
  13.     android:layout_weight="2"  
  14.     >  
  15.     <ImageView  
  16.         android:layout_width="wrap_content"   
  17.         android:layout_height="wrap_content"  
  18.         android:src="@drawable/jay"  
  19.     />  
  20.       
  21.     <TextView  
  22.         android:layout_width="wrap_content"   
  23.         android:layout_height="wrap_content"  
  24.         android:text="雨松MOMO"  
  25.         android:background="#FF0000"  
  26.         android:textColor="#000000"    
  27.         android:textSize="18dip"    
  28.     />  
  29.     <EditText  
  30.         android:layout_width="wrap_content"   
  31.         android:layout_height="wrap_content"  
  32.         android:text="水平方向"  
  33.     />  
  34. </LinearLayout>  
  35.   
  36. <LinearLayout   
  37.     android:layout_width="fill_parent"   
  38.     android:layout_height="fill_parent"  
  39.     android:orientation="vertical"  
  40.     android:layout_weight="1"  
  41.     >  
  42.       
  43.     <TextView  
  44.         android:layout_width="wrap_content"   
  45.         android:layout_height="wrap_content"  
  46.         android:text="雨松MOMO"  
  47.         android:background="#FF0000"  
  48.         android:textColor="#000000"    
  49.         android:textSize="18dip"    
  50.     />  
  51.     <EditText  
  52.         android:layout_width="wrap_content"   
  53.         android:layout_height="wrap_content"  
  54.         android:text="垂直方向"  
  55.     />  
  56.     <Button  
  57.         android:layout_width="wrap_content"   
  58.         android:layout_height="wrap_content"  
  59.         android:text="雨松MOMO"  
  60.     />  
  61.     <ImageView  
  62.         android:layout_width="wrap_content"   
  63.         android:layout_height="wrap_content"  
  64.         android:src="@drawable/image"  
  65.     />  
  66. </LinearLayout>  
  67. </LinearLayout>  
<?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"



[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:layout_width="fill_parent"   
  5.     android:layout_height="fill_parent"  
  6.     >  
  7.     <EditText  
  8.         android:id="@+id/re_edit_0"  
  9.         android:layout_width="wrap_content"   
  10.         android:layout_height="wrap_content"  
  11.         android:text="雨松MOMO"  
  12.         android:layout_alignParentRight="true"  
  13.     />  
  14.     <ImageView  
  15.         android:id="@+id/re_iamge_0"  
  16.         android:layout_width="wrap_content"   
  17.         android:layout_height="wrap_content"  
  18.         android:src="@drawable/jay"  
  19.         android:layout_below="@id/re_edit_0"  
  20.         android:layout_alignParentRight="true"  
  21.     />  
  22.     <TextView  
  23.         android:layout_width="wrap_content"   
  24.         android:layout_height="wrap_content"  
  25.         android:background="#FF0000"  
  26.         android:text="努力学习"  
  27.         android:textColor="#000000"    
  28.         android:textSize="18dip"    
  29.         android:layout_toLeftOf="@id/re_iamge_0"  
  30.     />  
  31.     <EditText  
  32.         android:id="@+id/re_edit_1"  
  33.         android:layout_width="wrap_content"   
  34.         android:layout_height="wrap_content"  
  35.         android:text="雨松MOMO"  
  36.         android:layout_alignParentBottom="true"  
  37.     />  
  38.     <ImageView  
  39.         android:id="@+id/re_iamge_1"  
  40.         android:layout_width="wrap_content"   
  41.         android:layout_height="wrap_content"  
  42.         android:src="@drawable/image"  
  43.         android:layout_above="@id/re_edit_1"  
  44.     />  
  45.     <TextView  
  46.         android:layout_width="wrap_content"   
  47.         android:layout_height="wrap_content"  
  48.         android:background="#FF0000"  
  49.         android:text="努力工作"  
  50.         android:textColor="#000000"    
  51.         android:textSize="18dip"    
  52.         android:layout_toRightOf="@id/re_iamge_1"  
  53.         android:layout_above="@id/re_edit_1"  
  54.     />  
  55. </RelativeLayout>  
<?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 所以后者就覆盖在了前者上面。










[html] view plain copy print ?
  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>  
<?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的手机分辨率五花八门所以使用绝对布局的话在其它分辨率的手机上就无法正常的显示了。









设置控件的显示坐标点
[html] view plain copy print ?
  1. android:layout_x="50dip"  
  2.  android:layout_y="30dip"  
android:layout_x="50dip" android:layout_y="30dip"


[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <AbsoluteLayout 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/f"  
  10.         android:layout_x="100dip"  
  11.         android:layout_y="50dip"  
  12.     />  
  13.     <TextView  
  14.         android:layout_width="wrap_content"   
  15.         android:layout_height="wrap_content"  
  16.         android:text="当前坐标点 x = 100dip y = 50 dip"  
  17.         android:background="#FFFFFF"  
  18.         android:textColor="#FF0000"    
  19.         android:textSize="18dip"    
  20.         android:layout_x="50dip"  
  21.         android:layout_y="30dip"  
  22.     />  
  23.       
  24.     <ImageView  
  25.         android:layout_width="wrap_content"   
  26.         android:layout_height="wrap_content"  
  27.         android:src="@drawable/h"  
  28.         android:layout_x="50dip"  
  29.         android:layout_y="300dip"  
  30.     />  
  31.     <TextView  
  32.         android:layout_width="wrap_content"   
  33.         android:layout_height="wrap_content"  
  34.         android:text="当前坐标点 x = 50dip y = 300 dip"  
  35.         android:background="#FFFFFF"  
  36.         android:textColor="#FF0000"    
  37.         android:textSize="18dip"    
  38.         android:layout_x="30dip"  
  39.         android:layout_y="280dip"  
  40.     />  
  41. </AbsoluteLayout>  
<?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 可以设置 表格中每一行显示的内容 以及位置 ,可以设置显示的缩进,对齐的方式。










[html] view plain copy print ?
  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.   
  55.     <TableRow  
  56.         android:layout_width="wrap_content"  
  57.         android:layout_height="fill_parent"  
  58.         android:padding="10dip">  
  59.         <TextView  
  60.             android:text="好伙伴"   
  61.             android:gravity="left"  
  62.             />  
  63.         <TextView  
  64.             android:text="15810463139"  
  65.             android:gravity="right"/>  
  66.     </TableRow>  
  67.   
  68.     <TableRow  
  69.         android:layout_width="wrap_content"  
  70.         android:layout_height="fill_parent"  
  71.         android:padding="10dip"  
  72.         >  
  73.         <TextView  
  74.             android:text="姓名"   
  75.             android:gravity="left"  
  76.             />  
  77.         <TextView  
  78.             android:text="性别"  
  79.             android:gravity="right"/>  
  80.     </TableRow>  
  81.      
  82.     <View  
  83.         android:layout_height="2dip"  
  84.         android:background="#FFFFFF" />  
  85.      
  86.     <TableRow  
  87.         android:layout_width="wrap_content"  
  88.         android:layout_height="fill_parent"  
  89.         android:padding="10dip"  
  90.         >  
  91.         <TextView  
  92.             android:text="雨松MOMO"   
  93.             android:gravity="left"  
  94.             />  
  95.         <TextView  
  96.             android:text="男"  
  97.             android:gravity="right"/>  
  98.     </TableRow>  
  99.       
  100.     <TableRow  
  101.         android:layout_width="wrap_content"  
  102.         android:layout_height="fill_parent"  
  103.         android:padding="10dip">  
  104.         <TextView  
  105.             android:text="小可爱"   
  106.             android:gravity="left"  
  107.             />  
  108.         <TextView  
  109.             android:text="女"  
  110.             android:gravity="right"/>  
  111.     </TableRow>  
  112.   
  113.     <TableRow  
  114.         android:layout_width="wrap_content"  
  115.         android:layout_height="fill_parent"  
  116.         android:padding="10dip">  
  117.         <TextView  
  118.             android:text="好伙伴"   
  119.             android:gravity="left"  
  120.             />  
  121.         <TextView  
  122.             android:text="男"  
  123.             android:gravity="right"/>  
  124.     </TableRow>  
  125.   
  126. </TableLayout>  
<?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大布局的效果,当然这里说的不是全部 有时候还是须要使用其他布局, 所以笔者建议大家开发中以实际情况定夺,以上五种布局可以使用布局嵌套的方式可以做出更好看的更美观的布局。



你可能感兴趣的:(html,android,生活,layout,手机,encoding)