編輯: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>模型二:水平三列雙耳式
<!--這種布局: 缺點是代碼還算簡潔,但是比坐擁式要稍微復雜一點 有點是比坐擁式更強大,更靈活 --> <?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>
模型五:垂直三行天地式
<?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>
模型六:垂直三行彈簧式
<?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的布局其實在手機上的實現是很難的。
希望看了文章的人,能支持一下,有什麼好的經典的布局,給我留言,一起探討,一起分享。
最後公布一個大概布局的三字文:
上中下,左中右,多行列,用相對。
線性局,緊湊排,無方向,可居中。
幀布局,定位准,相關弱,代碼少。
JSON代表JavaScript對象符號。它是一個獨立的數據交換格式,是XML的最佳替代品。本章介紹了如何解析JSON文件,並從中提取所需的信息。Android提供了四個
在android項目中訪問網絡圖片是非常普遍性的事情,如果我們每次請求都要訪問網絡來獲取圖片,會非常耗費流量,而且圖片占用內存空間也比較大,圖片過多且不釋放的話很
登錄應用程序的屏幕,詢問憑據登錄到一些特定的應用。可能需要登錄到Facebook,微博等本章介紹了,如何創建一個登錄界面,以及如何管理安全問題和錯誤嘗試。首先,必須定義兩
我用的是cocos2d-2.0-x-2.0.3 之前弄了一天也沒成功 今天來了下載了最新的ndk8 更新了sdk 又重新是了一遍 居然成功了,不知道是工具的版本問