Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> Android應用開發教程之九:應用程序界面五大布局

Android應用開發教程之九:應用程序界面五大布局

日期:2016/3/16 10:43:06      編輯:關於android開發

  1. 線性布局(LinearLayout)

  線性布局的形式可以分為兩種,第一種橫向線性布局 第二種縱向線性布局,總而言之都是以線性的形式 一個個排列出來的,純線性布局的缺點是很不方便修改控件的顯示位置,所以開發中經常會 以 線性布局與相對布局嵌套的形式設置布局。

 Android應用開發教程之九:應用程序界面五大布局

  如圖所示 使用了線性布局的水平方向與垂直方向,從圖中可以清晰的看出來所有控件都是按照線性的排列方式顯示出來的,這就是線性布局的特點。設置線性布局為水平方向

  android:orientation=”horizontal”

  設置線性布局為垂直方向

  android:orientation=”vertical”

  設置正比例分配控件范圍

  android:layout_weight=”1″

  設置控件顯示位置,這裡為水平居中

  android:gravity=”center_horizontal”在xml中我使用了LinearLayout 嵌套的方式 配置了2個線性布局 一個水平顯示 一個垂直顯示。

XML/HTML代碼
  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應用開發教程之九:應用程序界面五大布局

  設置距父元素右對齊

  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/HTML代碼
  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>  

  3. 幀布局(FrameLayout)

  原理是在控件中繪制任何一個控件都可以被後繪制的控件覆蓋,最後繪制的控件會蓋住之前的控件。如圖所示界面中先繪制的ImageView 然後在繪制的TextView和EditView 所以後者就覆蓋在了前者上面。

 Android應用開發教程之九:應用程序界面五大布局

XML/HTML代碼
  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的手機分辨率五花八門所以使用絕對布局的話在其它分辨率的手機上就無法正常的顯示了。

 Android應用開發教程之九:應用程序界面五大布局

  設置控件的坐標

XML/HTML代碼
  1. android:layout_x="50dip"  
  2. android:layout_y="30dip"  
XML/HTML代碼
  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>  

  5. 表格布局(TableLayout)

  在表格布局中可以設置TableRow 可以設置 表格中每一行顯示的內容 以及位置 ,可以設置顯示的縮進,對齊的方式。

 Android應用開發教程之九:應用程序界面五大布局

XML/HTML代碼
  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>  

  Android五大布局的基本使用方法已經介紹完,最後筆者在這裡強調一下在開發與學習中建議大家使用相對布局,首先它的方法屬性是最強大的其次它基本可以實現其它4大布局的效果,當然這裡說的不是全部 有時候還是須要使用其他布局, 所以筆者建議大家開發中以實際情況定奪,以上五種布局可以使用布局嵌套的方式可以做出更好看的更美觀的布局。

  源碼下載地址:http://vdisk.weibo.com/s/aa2C2

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved