【android基礎學習之八】——頁面配置

聲明：學習的書籍《Android應用開發揭秘》，這裡記錄學習該書籍的日誌，引用的相關代碼與總結描述，沒有商業的用途，完全是自我學習的一個記錄，剛剛學習不可避免會出現很多問題，若是有錯誤還請大家多多批評。

2011-10-31晚，完成最後一篇Android的基礎學習，關於介面一些常用布局；

一、    介面布局之線性布局（LinearLayout）

之前的例子的學習已經多次使用到了LinearLayout這個布局控制項，線性布局分為：

（1）、垂直線性布局；

（2）、水平線性布局；

針對這兩種區別，只是一個屬性的區別

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"></LinearLayout>

水平線性布局的話，android:orientation="horizontal" 即可。

二、    介面布局之相對布局（RelativeLayout）

         一般線性布局滿足不了們實際項目中的需要，就是一般做Web介面的UI設計一樣，也是存在相對元素的一些CSS樣式的布局。RelativeLayout參數有：Width，Height，Below，AlignTop，ToLeft，Padding，和MerginLeft。

關鍵源碼：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <TextView        android:id="@+id/label"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="請輸入:"/>    <EditText        android:id="@+id/entry"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="@android:drawable/editbox_background"        android:layout_below="@id/label"/>    <Button        android:id="@+id/ok"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/entry"        android:layout_alignParentRight="true"        android:layout_marginLeft="10dip"        android:text="確定" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_toLeftOf="@id/ok"        android:layout_alignTop="@id/ok"        android:text="取消" /></RelativeLayout>

其中，android:layout_below=”@id/label”設定了EditText處於TextView下方；在Button中android:layout_below=”@id/entry”設定該Button位於EditText下。

執行個體效果：

三、    介面布局之表單布局（TableLayout）

         TableLayout由許多TableRow組成，每個TableRow都會定義一個Row。TableLayout容器不會顯示Row,Column或Cell的邊框線，每個Row擁有0個或多個Cell，每個Cell擁有一個View對象。表格由行和列組成許多單元個，允許儲存格為空白。但是儲存格不能跨列，這與Html不同。

     <View        android:layout_height="2dip"        android:background="#FF909090" />    <TableRow>        <TextView            android:text="*"            android:padding="3dip" />        <TextView            android:text="匯入..."            android:padding="3dip" />    </TableRow>    <TableRow>        <TextView            android:text="*"            android:padding="3dip" />        <TextView            android:text="匯出..."            android:padding="3dip" />        <TextView            android:text="Ctrl-E"            android:gravity="right"            android:padding="3dip" />    </TableRow>

執行個體效果：

四、   介面布局之 切換卡（TabWidget）

         切換卡經常用在一下選項上，類似於電話簿介面，通過多個標籤切換顯示不同內容。而其中，TabHost是一個用來存放Tab標籤的容器，通過getTabHost方法來擷取TabHost的對象，通過addTab方法向容器裡添加Tab。Tab在切換時都會產生一個事件，可以通過TabActivity的事件監聽setOnTabChangedListener.

【擴充點】TabHost

類概述

提供選項卡（Tab頁）的視窗視圖容器。此對象包含兩個子物件：一組是使用者可以選擇指定Tab頁的標籤；另一組是FrameLayout用來顯示該Tab頁的內容。個別元素通常控制使用這個容器物件，而不是設定在子項目本身的值。

（譯者madgoat註：即使使用的是單個元素，也最好把它放到容器物件ViewGroup裡）

內部類

interface TabHost.OnTabChangeListener    

介面定義了當選項卡更改時被調用的回呼函數

interface TabHost.TabContentFactory  

當某一選項卡被選中時產生選項卡的內容

class TabHost.TabSpec     

單獨的選項卡，每個選項卡都有一個選項卡指示符,內容和tag標籤,以便於記錄.。

 

關鍵源碼：

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/tabhost"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <LinearLayout        android:orientation="vertical"        android:layout_width="fill_parent"        android:layout_height="fill_parent">        <TabWidget            android:id="@android:id/tabs"            android:layout_width="fill_parent"            android:layout_height="wrap_content" />        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="fill_parent"            android:layout_height="fill_parent">            <TextView                 android:id="@+id/textview1"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                 android:text="this is a tab" />            <TextView                 android:id="@+id/textview2"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                 android:text="this is another tab" />            <TextView                 android:id="@+id/textview3"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                 android:text="this is a third tab" />    </FrameLayout>    </LinearLayout></TabHost>

處理類：

//聲明TabHost對象TabHost mTabHost;public void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);//取得TabHost對象mTabHost = getTabHost();    /* 為TabHost添加標籤 *///建立一個newTabSpec(newTabSpec)//設定其標籤和表徵圖(setIndicator)//設定內容(setContent)    mTabHost.addTab(mTabHost.newTabSpec("tab_test1")    .setIndicator("TAB 1",getResources().getDrawable(R.drawable.img1))    .setContent(R.id.textview1));    mTabHost.addTab(mTabHost.newTabSpec("tab_test2")    .setIndicator("TAB 2",getResources().getDrawable(R.drawable.img2))    .setContent(R.id.textview2));    mTabHost.addTab(mTabHost.newTabSpec("tab_test3")    .setIndicator("TAB 3",getResources().getDrawable(R.drawable.img3))    .setContent(R.id.textview3));        //設定TabHost的背景顏色    mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));    //設定TabHost的背景圖片資源    //mTabHost.setBackgroundResource(R.drawable.bg0);        //設定當前顯示哪一個標籤    mTabHost.setCurrentTab(0);        //標籤切換事件處理，setOnTabChangedListener     mTabHost.setOnTabChangedListener(new OnTabChangeListener(){            public void onTabChanged(String tabId) {        Dialog dialog = new AlertDialog.Builder(Examples_04_29Activity.this)        .setTitle("提示")        .setMessage("當前選中："+tabId+"標籤")        .setPositiveButton("確定",        new DialogInterface.OnClickListener() {        public void onClick(DialogInterface dialog, int whichButton){        dialog.cancel();        }        }).create();//建立按鈕              dialog.show();            }                    });}

執行個體效果：

  

好吧，基礎的控制項與布局學完，下面開始新的學習。到學習P120頁