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.   
  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>  


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.   
  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>  
  • 1
  • 2
  • 3
  • 下一页

相关内容