Android學習系列(5)–App布局初探之簡單模型

人類科技的進步源自探索，探索來自於發現本原，當然App布局沒這麼先進，本文也只是一個歸類總結。
這篇文章是android開發人員的必備知識，是我特別為大家整理和總結的，不求完美，但是有用。

Android介面開發多多少少會有很多雷同或者相似的布局，不僅如此，縱觀Android應用的介面，總也逃不出那些熟悉的結構。
今天，我根據經驗，把我認為的常見的布局做一個分析，歸納出幾種簡單的模型，這些模型一般是我認為解決其對應布局問題的最佳布局，具體要看情況。
因為工作的限制，我無法專門研究天馬行空，萬羅天象的布局，只能根據我工作中碰到的布局，略加斟酌。
還有一點我要強調，這些布局的原則就是：簡單，靈活。 

模型一： 水平三列坐擁式
      ：
      
      說明：水平三列，兩邊分別是"返回"，"提交"的按鈕，中間是必須置中的幾個字，一般都是標題名稱。
              彷彿標題內容的背景坐擁左右兩位美女般的按鈕。
      方法：主要使用FrameLayout布局
      素材：
              、
      layout代碼：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="@drawable/layout01_bg"    android:paddingLeft="10dip"    android:paddingRight="10dip"    >    <Button android:layout_gravity="left|center_vertical"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/layout01_tool"        android:text="返回"        android:padding="8dip"    />        <TextView android:layout_gravity="center"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="標題內容"        android:textSize="18dip"        android:textColor="#000000" />            <Button android:layout_gravity="right|center_vertical"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/layout01_tool"        android:text="前進"        android:padding="8dip"    /></FrameLayout>

模型二：水平三列雙耳式
      ：
 
      說明： 水平三列，兩邊分別是"返回"，"提交"的按鈕，中間是幾個字，這幾個字可以居左，置中，居右，而不與兩邊的按鈕重疊。
               此模型和坐擁式模型相似，但是中間的部分不是把左右按鈕坐擁入懷，而是單獨佔據，且也只佔據中間部分。
               這種模型能夠實現坐擁式模型的效果，而且能偏左偏右而不和兩邊按鈕重疊。
               但是因為這種情況使用RelativeLayout布局比較好，需要定義ID，稍微麻煩了一點點。 
      方法：主要是RelativeLayout布局
      素材：同上
      layout代碼：

<!--這種布局：缺點是代碼還算簡潔，但是比坐擁式要稍微複雜一點有點是比坐擁式更強大，更靈活--><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="@drawable/layout01_bg"    android:paddingLeft="10dip"    android:paddingRight="10dip"    >    <Button android:id="@+id/left_button"        android:layout_alignParentLeft="true"        android:layout_centerVertical="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/layout01_tool"        android:text="返回列表"        android:padding="8dip"    />    <Button android:id="@+id/right_button"        android:layout_alignParentRight="true"        android:layout_centerVertical="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/layout01_tool"        android:text="評論"        android:padding="8dip"    />    <!--設定LeftOf和RightOf，可填充中間空餘部分-->    <TextView android:layout_toRightOf="@id/left_button"        android:layout_toLeftOf="@id/right_button"        android:layout_centerVertical="true"        android:gravity="left"        android:paddingLeft="5dip"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="資訊>>本文"        android:textSize="18dip"        android:textColor="#000000" />        </RelativeLayout>

      關於這個模型，我補充一點，很多人認為這個用LinearLayout布局，設定兩邊的控制項居左居右，中間的設定layout_gravity想偏左就偏左，想偏右就偏右。
      但是，LinearLayout布局方向為"horizontal" ,layout_gravity是無效的。

模型三： 水平四列雙耳互補式
      ：
 
 
      說明： 兩邊是按鈕，中間部分被兩個控制項互補式分割，主要是左邊的會隨內容填充，但是必須兩者內容寬度之和不能大於中間部分。
               這個和雙耳式差不多，也說明了，雙耳式在保證有空餘空間的基礎上，可以擴充到4列，5列等多列。
      方法：主要是RelativeLayout布局
      素材：同上
      layout代碼：

<!--雙耳式在多列情況下的擴充式--><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="@drawable/layout01_bg"    android:paddingLeft="10dip"    android:paddingRight="10dip"    >    <Button android:id="@+id/left_button"        android:layout_alignParentLeft="true"        android:layout_centerVertical="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/layout01_tool"        android:text="返回列表"        android:padding="8dip"    />    <Button android:id="@+id/right_button"        android:layout_alignParentRight="true"        android:layout_centerVertical="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/layout01_tool"        android:text="評論"        android:padding="8dip"    />    <!-- 下面這個寬度是wrap_content,在左邊按鈕的右邊，能夠隨內容加寬 -->    <TextView android:id="@+id/center_text_01"        android:layout_toRightOf="@id/left_button"        android:layout_centerVertical="true"        android:gravity="left"        android:paddingLeft="5dip"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#aabbcc"        android:text="夫婦+小三"        android:textSize="18dip"        android:textColor="#000000" />    <!-- 下面這個寬度是fill_parent,自動填滿中間部分的空餘空間，分別定義了左右依賴的控制項，所以放在最後 -->    <TextView android:id="@+id/center_text_02"        android:layout_toRightOf="@id/center_text_01"        android:layout_toLeftOf="@id/right_button"        android:layout_centerVertical="true"        android:gravity="right"        android:paddingLeft="5dip"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:background="#ccaabb"        android:text="何求"        android:textSize="18dip"        android:textColor="#000000" /></RelativeLayout>

 模型四：水平多列分攤式(增強版)
      ：
 
      說明：幾大模組均占所有地區，之間以小小的分割線隔離。
              因為分割線只佔很小的部分，所有模組和分割線並不是分攤的，但是模組標題本身佔據大頭，他們之間是分攤的。
      素材：
 
      方法： 直接用LinearLayout布局，模組均攤，都設定layout_weight="1"，分割線不分攤，不設定layout_weight,預設自包裹，不延伸。
      layout代碼：

<!--此代碼採用動態產生，只要稍加判斷，效果一樣--><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="25dip"    android:background="#ffffff"    >    <TextView android:text="首頁"        android:layout_weight="1"        android:gravity="center"        android:layout_gravity="center_vertical"        android:layout_width="wrap_content"        android:layout_height="wrap_content"    />    <ImageView android:gravity="center"        android:layout_gravity="center_vertical"        android:layout_width="10dip"        android:layout_height="wrap_content"        android:src="@drawable/layout04_split"    />    <TextView android:text="資訊"        android:layout_weight="1"        android:gravity="center"        android:layout_gravity="center_vertical"        android:layout_width="wrap_content"        android:layout_height="wrap_content"    />    <ImageView android:gravity="center"        android:layout_gravity="center_vertical"        android:layout_width="10dip"        android:layout_height="wrap_content"        android:src="@drawable/layout04_split"/>    <TextView android:text="部落格"        android:layout_weight="1"        android:gravity="center"        android:layout_gravity="center_vertical"        android:layout_width="wrap_content"        android:layout_height="wrap_content"    />    <ImageView android:gravity="center"        android:layout_gravity="center_vertical"        android:layout_width="10dip"        android:layout_height="wrap_content"        android:src="@drawable/layout04_split"/>    <TextView android:text="圖片"        android:layout_weight="1"        android:gravity="center"        android:layout_gravity="center_vertical"        android:layout_width="wrap_content"        android:layout_height="wrap_content"    />    <ImageView android:gravity="center"        android:layout_gravity="center_vertical"        android:layout_width="10dip"        android:layout_height="wrap_content"        android:src="@drawable/layout04_split"/>    <TextView android:text="論壇"        android:layout_weight="1"        android:gravity="center"        android:layout_gravity="center_vertical"        android:layout_width="wrap_content"        android:layout_height="wrap_content"    /></LinearLayout>

模型五：垂直三行天地式
      ：

      說明：類似於水平三列雙耳式，上下固定，中間自適應（自填充），不多說。
      方法：同水平三列雙耳式，使用RelativeLayout布局
      layout代碼：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <TextView android:id="@+id/top_text"    android:layout_alignParentTop="true"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:gravity="center"         android:text="上海車展"        android:textColor="#ffffff"/>    <LinearLayout android:id="@+id/bottom_linear"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:gravity="center"    android:layout_alignParentBottom="true"        android:background="#123456"         android:orientation="horizontal">        <Button  android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="上一張"/>        <Button  android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:text="下一張"/>    </LinearLayout>    <!-- 下面部分是中間主體部分，我特意用LinearLayout包裹起來，表示這裡面可以填充其他任何組合的控制項 -->    <LinearLayout android:id="@+id/center_linear"    android:layout_below="@id/top_text"    android:layout_above="@id/bottom_linear"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#ffffff"        android:gravity="center">        <ImageView android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:src="@drawable/shanhai" />    </LinearLayout></RelativeLayout>

模型六：垂直三行彈簧式
      ：

      說明：這種模型很簡單，類似於彈簧，最下面的一行能伸能屈，中間部分隨內容固定。
      方法：類似於模式五。
      layout代碼：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <!-- 頂部 -->    <TextView android:id="@+id/top_text"    android:layout_alignParentTop="true"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:gravity="center"         android:text="上海車展"        android:textColor="#ffffff"/>    <!-- 頂部的下面是中間導航部分 -->    <LinearLayout android:id="@+id/center_linear"        android:layout_below="@id/top_text"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:background="#123456"         android:orientation="horizontal">        <Button  android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="上一張"/>        <Button  android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:text="下一張"/>    </LinearLayout>    <!-- 最後部分填充剩下的地區 -->    <LinearLayout android:id="@+id/bottom_linear"        android:layout_below="@id/center_linear"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#ffffff"        android:gravity="center"        android:layout_alignParentBottom="true">        <ImageView android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:src="@drawable/shanhai" />    </LinearLayout></RelativeLayout>

      初探之下，列舉了簡單的6中模型，除此之外，本人發現受限於手機螢幕大小的限制和高寬的固定，有很多web的布局其實在手機上的實現是很難的。
      希望看了文章的人，能支援一下，有什麼好的經典的布局，給我留言，一起探討，一起分享。
      最後公布一個大概布局的三字文：

上中下，左中右，多行列，用相對。

線性局，緊湊排，無方向，可置中。

幀布局，定位準，相關弱，代碼少。