Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android學習系列(5)--App布局初探之簡單模型

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

編輯:Android開發實例

人類科技的進步源自探索,探索來自於發現本原,當然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的布局其實在手機上的實現是很難的。
      希望看了文章的人,能支持一下,有什麼好的經典的布局,給我留言,一起探討,一起分享。
      最後公布一個大概布局的三字文:

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

線性局,緊湊排,無方向,可居中。

幀布局,定位准,相關弱,代碼少。

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