Android進階(二十七)Android原生擾人煩的布局

標籤：

Android原生擾人煩的布局

      在開發Android應用時，UI布局是一件令人煩惱的事情。下面主要講解一下Android中的介面布局。

一、線性布局（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>  

      執行個體效果：

 

      android:gravity="center" 書面解釋是權重比。其時就是讓它置中顯示。

      android:stretchColumns="1,2,3,4" 它的意思就是自動展開1,2,3,4列。

注

      若需實現組件置中顯示，布局應如下：

          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_vertical|center_horizontal"

      TableRow平分列

      每一列的寬度設定為android:layout_width="0.0dip"，在設定每一列的android:layout_weight=“1”

      因為ayout_weight是將剩餘空間按權重分配，而不是將全部空間按權重分配。

      代碼如下：

<TableRow     android:paddingTop="15px">    <Button        android:id="@+id/Register"        android:text="@string/register"        android:layout_width="0.0dip"        android:layout_weight="1"        android:onClick="register"/>    <Button        android:id="@+id/cancel"        android:layout_width="0.0dip"        android:layout_weight="1"        android:text="@string/button_cancel" />    </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);          //設定當前顯示哪一個標籤,預設下標從0開始        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();              }                      });      }  

      執行個體效果：

 

參考文獻

1.http://blog.csdn.net/fancylovejava/article/details/45787729/

美文美圖

 

Android進階(二十七)Android原生擾人煩的布局