我的Android學習之旅[6]——以示例程序來展示Android的幾種布局方式

      通常我們開發的應用程序都是需要具有友好的用戶界面，那麼Android中提供了哪些布局方式呢?當我們構思好了所需要的各種控件的時候，怎樣才能將它們放到Android設備屏幕上正確的位置呢?在Android中，Layout是負責管理控件在屏幕的位置的類，並且提供了幾個簡單的布局模型，開發人員通過將這幾種布局模型的組合可以構建出我們想要的復雜的用戶界面。本文中，將會對其一一做簡單的介紹，筆者主要寫了一個簡單的程序，以一個ListView顯示五種布局，讀者可以點擊相應的布局選項查看布局效果。（注：由於內容比較多，加上筆者最近復習考試，所以內容不全，後面慢慢補上）

       

       （主界面程序列出五種基本的布局方式，選擇各種布局可以查看效果）

        

    1、 線性布局

    線性布局方式是我們應用程序中最常用的布局方式，主要提供控件水平或者垂直排列的模型，在主界面中點擊LinearLayout選項，將會進入線性布局效果顯示界面，如下圖：

      

     

     查看該布局界面文件，如下所示：      

線性界面布局內容 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"  
  android:layout_height="wrap_content" 
  android:orientation="vertical" 
  android:layout_width="fill_parent">
  <TextView android:text="Admin Login"
            android:paddingTop="20dip" 
            android:paddingBottom="20dip"
            android:textColor="@color/blue"
            android:id="@+id/TextView01" 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" 
            android:gravity="center"
            android:soundEffectsEnabled="true" android:password="false"
            android:textStyle="bold">
   </TextView>
   
   <LinearLayout
       android:id="@+id/layout1"
       android:gravity="center"
       android:paddingBottom="20dip"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content">      
     <TextView
       android:id="@+id/txtName"
       android:text="Name"
       android:minWidth="80dip"
       android:gravity="center"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">   
     </TextView>
     <EditText         
       android:id="@+id/edtName"       
       android:minWidth="120dip"      
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
     >
     </EditText>
   </LinearLayout>
   
    <LinearLayout
       android:id="@+id/layout2"
       android:gravity="center"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content">      
     <TextView
       android:id="@+id/txtPsw"
       android:minWidth="80dip"
       android:gravity="center"
       android:text="password"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">   
     </TextView>
     <EditText         
       android:id="@+id/edtPassword"       
       android:minWidth="120dip"      
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
     >
     </EditText>
   </LinearLayout>
   
   <LinearLayout
      android:id="@+id/layout3"
      android:gravity="right"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
   >
      
      <Button android:id="@+id/btnOk"
        android:minWidth="70dip"
        android:text="O K"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
      >
      </Button>
      
      <Button android:id="@+id/btnCancel"
        android:minWidth="70dip"
        android:text="Cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
      >
      </Button>
   </LinearLayout>
</LinearLayout>

      從上述我們可以看出，通過靈活的組合LinearLayout布局方式，可以很容易的設計出復雜的一些界面。如下圖所示：

     

     

     2、 坐標布局

     坐標布局對於有過.Net Winform開發經驗的人員來說應該比較熟悉了，即控件的在父容器上所處的位置主要是有其橫縱坐標決定的~在坐標布局中，坐標系如下所示：

    

       對於該布局的示例效果，筆者主要是通過按左右鍵來控制小人左右移動來講解的，如下圖：

              

    

                      

       

       界面布局內容如下： 

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   android:id="@+id/AbsoluteLayout01" 
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent" 
   >
   <TextView android:id="@+id/txtIntro"
     android:text="按左右鍵控制小人運動"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_x="20dip"
     android:layout_y="20dip">
   </TextView>
   <ImageView android:id="@+id/imgMan"            
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_x="100dip"
      android:layout_y="100dip">
   </ImageView>     
</AbsoluteLayout>

    

      實現控制小人左右走動的動畫代碼在AbsoluteLayoutActivity.java文件中，內容如下： 

控制人物運動代碼 package cnblogs.com.layout;

import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.KeyEvent;
import android.widget.ImageView;
import cnblogs.com.R;

public class AbsoluteLayoutActivity extends Activity{    
    
    //人物的View
    private ImageView man;
        
    //人狀態的枚舉
    public enum ManState{
        Stand,
        LeftRun,
        LeftStop,
        RightRun,
        RightStop        
    };

    //人當前的狀態
    private ManState curState=ManState.Stand;    

    private int dx;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {        
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.absolute);
        man=(ImageView)this.findViewById(R.id.imgMan);
        man.setBackgroundResource(R.drawable.manstand);        
    }
    

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        boolean ret=super.onKeyDown(keyCode, event);
        
        switch(keyCode){
        case KeyEvent.KEYCODE_DPAD_LEFT:    
            
            if(curState==ManState.LeftRun){
                curState=ManState.LeftStop;                
                man.setBackgroundResource(R.drawable.manleftstop);
            }
            else if(curState==ManState.LeftStop){
                curState=ManState.LeftRun;                
                man.setBackgroundResource(R.drawable.manleftrun);
            }
            else{
                curState=ManState.LeftRun;                
                man.setBackgroundResource(R.drawable.manleftrun);
            }        
            
            //碰撞檢測
            dx=man.getLeft()-1>0?man.getLeft()-1:0;
            
            man.layout(dx,
                    man.getTop(),
                    dx+Math.abs(man.getWidth()),
                    man.getTop()+Math.abs(man.getHeight()));            
            break;
            
        case KeyEvent.KEYCODE_DPAD_RIGHT:            
            
            if(curState==ManState.RightRun){
                curState=ManState.RightStop;
                man.setBackgroundResource(R.drawable.manrightstop);                
            }
            else if(curState==ManState.RightStop){
                curState=ManState.RightRun;
                man.setBackgroundResource(R.drawable.manrightrun);                
            }
            else{
                curState=ManState.RightRun;
                man.setBackgroundResource(R.drawable.manrightrun);
            }
            
            //碰撞檢測
            dx=man.getLeft()+1<360-man.getWidth()?man.getLeft()+1:new DisplayMetrics().widthPixels-man.getWidth();
            
            man.layout(dx,
                    man.getTop(),
                    dx+Math.abs(man.getWidth()),
                    man.getTop()+Math.abs(man.getHeight()));            

            break;
        default:
            break;
        }
        return ret;
    }
    
    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        boolean ret=super.onKeyUp(keyCode, event);        
        return ret;
    }

}

      從這個例子可以看出，實現幀動畫的一種方式就是通過不斷的改變ImageView控件的橫縱坐標，同時更換背景圖片即可。     

 

   3、 表格布局        

        表格布局主要以行列的形式來管理子控件，其中每一行即一個TableRow對象，每個TableRow對象可以添加子控件，並且每加入一個空間即相當於添加了一列。本文中的示例效果如下所示： 

        

        表格界面布局文件內容如下：    

表格布局內容 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content">
  <!-- 隱藏第2,3,4列 -->
  <TableLayout 
      android:id="@+id/table1"      
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:collapseColumns="1,2,3"
  >
  <TextView
      android:id="@+id/txt1"
      android:gravity="center"
      android:text="Table1"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
  />
  <TableRow>
     <TextView android:text="col0"></TextView>
     <TextView android:text="col1"></TextView>
     <TextView android:text="col2"></TextView>
     <TextView android:text="col3"></TextView>
  </TableRow>   
  </TableLayout>
  
  <!-- 設置第二列可伸展,過長可將後面的列擠出可使區 -->
  <TableLayout
      android:id="@+id/table2"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:stretchColumns="1"
  >
  <TextView
      android:id="@+id/txt2"
      android:gravity="center"
      android:text="Table2"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
  >
  </TextView>
  <TableRow>
     <TextView android:text="col0"></TextView>
     <TextView android:text="col1"></TextView>
     <TextView android:text="col2"></TextView>
     <TextView android:text="col3"></TextView>
  </TableRow>
  </TableLayout>
  
   <!-- 設置第一列可以收縮 -->
  <TableLayout
      android:id="@+id/table3"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:shrinkColumns="0"
  >
  <TextView
      android:id="@+id/txt3"
      android:gravity="center"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Table3"
  >
  </TextView>
  <TableRow>
     <TextView android:text="welcome to world of android"></TextView>
     <TextView android:text="col1"></TextView>
     <TextView android:text="col2"></TextView>
     <TextView android:text="col3"></TextView>
  </TableRow>
  </TableLayout>
  
  <!-- 對各列未作設置,即不可伸縮 -->
  <TableLayout
      android:id="@+id/table4"
      android:gravity="center"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
  >
   <TextView
      android:id="@+id/txt3"
      android:gravity="center"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Table4"
  >
  </TextView>
  <TableRow>
     <TextView android:text="col0"></TextView>
     <TextView android:text="this column will be very long"></TextView>
     <TextView android:text="col2"></TextView>
     <TextView android:text="col3"></TextView>
  </TableRow>
  </TableLayout> 
</LinearLayout>

        展開上述布局內容，最外層是一個垂直布局的LinearLayout的，在其中有四個TableLayout布局，分別展示了四種不同類型的TableLayout布局方式。

         

       4、 相對布局

             

       5、 幀布局

           點擊FrameLayout選項，將會進入幀布局效果顯示界面，如下圖：

           

           上圖看上去是不是有點不自然，這是因為上圖是通過兩個ImageView圖片顯示控件將兩張圖片疊在一起顯示的。先看下布局界面是怎麼編寫的：            

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/FrameLayout01" 
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent" 
   >   
   <ImageView
     android:id="@+id/img1"
     android:src="@drawable/shirt"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content">
   </ImageView>
     
   <ImageView 
     android:id="@+id/img2"
     android:paddingLeft="100dip"
     android:paddingTop="18dip"
     android:src="@drawable/head1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content">   
   </ImageView> 
</FrameLayout>

 

       可見第一個ImageView控件顯示的是T-shirt圖片，而第二個ImageView控件則是顯示我愛羅的頭像。需要注意的是，在幀布局中，先添加的圖片會被後添加的圖片覆蓋。

轉自：http://www.cnblogs.com/royenhome/archive/2010/05/06/1729297.html