1. 程式人生 > >學習筆記| AS入門(三) 佈局篇

學習筆記| AS入門(三) 佈局篇

在我們之前的學習過程中,總是需要和.xml佈局檔案接觸,那佈局到底是什麼呢?佈局是指頁面內容該如何排布,比如控制元件和父容器的位置關係以及控制元件與控制元件之間的位置關係是怎樣的。其實除了最常見的LinearLayout 線性佈局、RelativeLayout 絕對佈局,AS還給我們提供了其他幾種,在Android 4.0之後,AS現在有七種佈局,本篇將依次介紹,最後簡單介紹安卓佈局幾點原則。目錄見下:

  • LinearLayout 線性佈局
  • RelativeLayout 相對佈局
  • FrameLayout 幀佈局
  • AbsoluteLayout絕對佈局
  • TableLayout 表格佈局
  • GridLayout 網格佈局
  • ConstraintLayout 約束佈局
  • 幾點佈局原則

在介紹之前,先要知道佈局檔案是如何建立的:

1

2

注意命名都要小寫~

1.LinearLayout線性佈局
線性佈局是指子控制元件以水平或垂直方式排列。先看這樣的一個線性佈局:

從圖中可以直觀的看出,這個線性佈局中的三個button是垂直排列的的,決定子控制元件的排布方向的屬性就是android:orientation,它有兩個選項,vertical表示垂直排列,horizontal表示水平排列,注意這個屬性是在這整個LinearLayout標籤之下的,是全域性屬性。
另外,佈局和佈局之間是可以巢狀的,比如下圖中展示的線性佈局中又巢狀一個線性佈局,外線性佈局的orientation使得內線性佈局和三個button以vertical方式排布,內線性佈局的orientation使得它自己的三個button以horizonal方式排布。

再介紹一組很重要的屬性:
android:gravity(表示這個容器裡所有子類控制元件的統一排布方式,有以下幾個常用個選值,center水平和垂直方向均居中、center_vertical垂直居中、center_horizontal水平居中、right最右、left最左、bottom最下,可用符號|實現多級連用,如android:gravity=“bottom|right”)
android:layout_gravity(表示這個子控制元件相對於父容器的位置。可選值和gravity相同,也可多級聯用。當然這些選值使得子控制元件是在它父容器裡可獲得的空間裡進行的,如果這個控制元件周圍還有別的控制元件可能會影響子控制元件的位置)
這兩個屬性很容易混淆,直觀來看它們的差別是針對的物件不同。gravity是對它所有直接的子類

的一個統一排布,子類的子類位置需要子類去統一排布,比如一個學校要上課間操,學校要求所有的學生以班級為單位都到操場的東南角活動,至於這個班級裡所有學生是不是在班級活動區域的東南角學校管不著,班級要求全班同學那才可以。那如果這個班某個同學是體委,不和大家都去東南角活動,而是在西南角管理班級呢?這時要對體委用layout_gravity屬性,layout_gravity針對的物件是使用這個屬性的控制元件,控制這個控制元件相對於直接父容器的位置。那麼下面這四行程式碼之後的button1位置是不是就很好理解了?

最後再介紹一個區域性屬性 android:layout_weight,是指子類控制元件佔當前父容器的比例,比如下圖顯示的button4佔兩份,button5和button6各佔一份,那麼它們的高之比就是2:1:1,但注意成立的條件是它們的高選值是wrap_content,如果是match_parent,那就成反比了。

2.RelativeLayout相對佈局
相對佈局是子控制元件以控制元件之間的相對位置或子類控制元件相對於父容器的位置排列。所以每個子控制元件可以通過兩種參考系來決定自己的位置。

一種是相對於父容器,相關的屬性有:
android:layout_alignParentBottom(在父容器最下,true或false)、
android:layout_alignParentTop(在父容器最上) 、
android:layout_alignParentLeft(在父容器最左) 、
android:layout_alignParentRight(在父容器最右)、
android:layout_marginTop(和父容器上端的距離,單位dp)、
android:layout_marginBottom(和父容器下端的距離)、
android:layout_marginLeft(和父容器左端的距離)、
android:layout_marginRight(和父容器右端的距離)、
android:layout_margin(和父容器四周的距離)、
android:layout_centerVertical(在父類的垂直居中,true或false)、
android:layout_centerHorizontal(在父類的水平居中)、
android:layout_centerInParent(在父類的水平垂直居中)。

一種是相對於其他控制元件,相關的屬性有:
android:layout_below(位於某控制元件下方,以id標記)、
android:layout_above(位於某控制元件上方)、
android:layout_toLeftOf(位於某控制元件左方)、
android:layout_toRightOf(位於某控制元件右方)、
android:layout_alignBottom(與某控制元件底部對齊,以id標記)、
android:layout_alignTop(與某控制元件頂部對齊) 、
android:layout_alignLeft(與某控制元件左邊緣對齊) 、
android:layout_alignRight(與某控制元件右邊緣對齊)、
android:layout_alignBaseline(與某控制元件的文字內容在一條直線上)

注意相對佈局裡沒有layout_weight屬性,上面展示的第一種相對於父容器的屬性就就足夠。

現在考考自己,有沒有理解了下面這兩個button的位置關係了呢?

3.FrameLayout幀佈局
幀佈局是所有子控制元件均放在左上角且後面元素直接覆蓋在前面元素之上。兩個常用屬性:android:foreground(設定改幀佈局容器的前景影象,前景影象是永遠處於幀佈局最上面的影象,就是不會被覆蓋的圖片)
android:foregroundGravity(設定前景影象顯示的位置)。為更直觀,下圖裡展示的TextView都填充了顏色,可以看出textView4在最上面。

但是幀佈局的這個性質有什麼特別的用處呢?當給每個TextView都設定layout_gravity=”center”之後,設想用一些方法使它們閃現不同顏色,是不是像個霓虹燈呢?感興趣的可以好好研究幀佈局具體內容~

4.AbsoluteLayout絕對佈局
絕對佈局是子控制元件通過它x,y位置來決定其位置。即android:layout_xandroid:layout_y屬性。但是絕對佈局不常見,用x和y決定的控制元件在不同大小的適配螢幕上的位置直觀上會變化,在一個螢幕上的右下角並不代表在另一個螢幕上也是右下角,適應能力差,所以AS也告訴我們不建議使用。

5.TableLayout表格佈局
表格佈局是以行列的形式管理子控制元件,每一行是一個TableRow物件或者View物件。注意列是從0計數,第一列記為0。
先來看看幾個常用的全域性屬性:
android:stretchColumns(讓第幾列填補一行中多餘的空白,如果多列一起填補,用逗號分開,如android:stretchColumns=“2,3”表示地三列和第四列一起填補空白,如果是全部列均分空白,值為*)
android:shrinkColumns(如果一行中列太多或者某列文字內容太長,會導致某列被擠出螢幕,這個屬性幫助某列收縮防止被擠)
android:collapseColumns(隱藏某列)
常用的區域性屬性有:
android:layout_column(讓該子類控制元件顯示在第幾列)
android:layout_span(讓該子類控制元件佔據幾列)

下圖是一個簡易計算器的佈局,第一行是以TextView物件為一行,後面三行是以TableRow物件為一行,然後用android:stretchColumns=”*”就能很方便實現每行button都均勻的填補空白,使介面更美觀,如果用線性佈局實現這一點就要麻煩一點了。

6.GridLayout網格佈局
網格佈局是在Android 4.0以後引入的一個新的佈局,和表格佈局有點類似,但比表格佈局功能更強大一些。這有一篇 網格佈局GridLayout的那些事兒 對網格佈局有較詳細的講解,還有對錶格佈局的補充,可以當作擴充套件閱讀。

7.ConstraintLayout 約束佈局

AS2.2之後新增的約束佈局,和之前出現的集中佈局不同的是,它非常適合使用視覺化的方式來編寫介面,但並不太適合使用XML的方式來進行編寫。同樣的,這一部分推薦大家閱讀最全面的ConstraintLayout教程

8.佈局原則:
(1)儘量多使用線性佈局和相對佈局,不用絕對佈局。
(2)在佈局層次一樣下,線性佈局比相對佈局的效能要高。
(3)使用include標籤增加UI的複用效率:可把重複使用的控制元件抽取出來放在一個xml檔案裡,並在需要它的xml檔案裡通過include標籤引用。這樣做也保證了UI佈局的規整和易維護性。下圖是一個簡單的示例。

將常用的title抽取出來自立門戶
當別的佈局需要這個title只需要include標籤,並設定layout屬性把對應的佈局引入即可

(4)使用ViewStub標籤減少佈局的巢狀層次,它和include一樣可以用來引入一個外部佈局,但不同的是,ViewStub引入的佈局不佔用位置,在解析layout佈局是節省了CPU和記憶體。可用inflate方法使之在佈局中顯示出來。下圖是一個簡單的示例。

在需要的佈局檔案裡使用ViewStub標籤,並設定android:layout屬性把對應的佈局引入
註冊點選事件,按下按鈕後顯示隱藏的內容
點選前後效果

(5)使用merge標籤降低UI佈局的巢狀層次:適用於佈局根節點是FrameLayout且不設定background和padding等額外屬性;當某個佈局作為子佈局被其他佈局include的時候可用merge當作該佈局的頂節點。

佈局篇就到這裡,感謝大家的觀看~

>下篇預告:元件篇之Activity

相關推薦

學習筆記| AS入門 佈局

在我們之前的學習過程中,總是需要和.xml佈局檔案接觸,那佈局到底是什麼呢?佈局是指頁面內容該如何排布,比如控制元件和父容器的位置關係以及控制元件與控制元件之間的位置關係是怎樣的。其實除了最常見的LinearLayout 線性佈局、RelativeLayout

學習筆記|AS入門番外 技能

在學習過程中總會有些零碎的知識點不好在別的篇章裡完整展開,但很重要需要記住,為了更好的彙總這些零散的知識點,特此寫一篇番外以作補充。本篇將介紹AS一些常用的功能以及學習AS必需的技能,根據學習的程序會不斷更新。清單如下: AS專案結構介紹 module的管理

python程式設計:從入門到實踐學習筆記-Django入門

建立其他網頁 我們接下來擴充“學習筆記”專案,建立兩個顯示資料的網頁,其中一個列出所有的主題,另一個顯示特定主題的所有條目。 模板繼承 編寫一個包含通用元素的父模板,並讓每個網頁都繼承這個模板,而不必在每個網頁中重複定義這些通用元素。這樣我們可以專注於開發每個網頁的獨特部分。1.父模板

python程式設計:從入門到實踐學習筆記-Django入門

建立網頁:學習筆記主頁 使用django建立網頁通常分三個階段:定義URL、編寫檢視和編寫模板。 首先必須定義URL模式,其描述了URL是如何設計的,讓django知道如何將瀏覽器請求與網站URL匹配,以確定返回哪個網頁。每個URL都被對映到特定的檢視——檢視函式獲取並處理網頁所需的資料。檢視函

python程式設計:從入門到實踐學習筆記Django入門

  建立應用程式 django專案由一系列應用程式組成,他們協同工作,讓專案稱謂一個整體。首先我們執行命令python manage.py startapp learning_logs。     定義模型 開啟剛剛我們建立的資料夾,並修改mod

Go語言學習筆記-函式部分

函式部分 函式基本組成:關鍵字func、函式名、引數列表、返回值、函式體、返回語句 例子: func Add(int a, int b) (return int, err error){ ....函式體... } 如果相鄰引數型別相同,可以簡寫,eg: a,b int //a、b引數型別相同 函式

Android學習筆記——View入門

1:什麼是View? (1)螢幕方塊內所顯示的內容,都可以稱為View或View的子類。(例如:TextView,Button等) 2:Activity怎麼獲取View的物件 (1)通過findById()方法獲取。(例如:TextView textView =  (Te

C#學習筆記—.NET Framework

CLI(Common Language  Infrastructure):   公共語言基礎結構 CIL(Common  Intermediate  Language):   公共中間語言 CLR(Common Language  Runtime):         公共

Golang學習筆記--log模組

Golang的log模組可謂是語言層面上非常基礎的一層庫,反應的是語言本身的特徵而不是一個服務應該怎樣怎樣。為了方便自己寫應用,我按照自己的需求提出一些log的API並重新實現。和Golang的log模組形成互補。 自己的log模組設計 對於我自己的log模組,暫時不需要

JavaFX學習筆記——重要理念

邏輯與樣式分離 這是我從網頁前端設計的HTML、JavaScript、CSS借鑑而來的概念,適用於所有團隊開發。 定義各元件的時候,往往會有下面這種想法 我Circle circle = new Circle(centerX,centerY,radius),順便就在

spring原始碼學習筆記-初始化-BeanFactory

轉自http://www.sandzhang.com/blog/2011/04/05/spring-study-notes-initialization-3/ refresh()方法中在上篇obtainFreshBeanFactory()方法建立了beanfactory物

【day 12】python程式設計:從入門到實踐學習筆記-基於Django框架的Web開發-Django入門

學習筆記目錄 第十八章 Django入門(三) 建立網頁:學習筆記主頁 使用django建立網頁通常分三個階段:定義URL、編寫檢視和編寫模板。 首先必須定義URL模式,其描述了URL是

hadoop入門筆記MapReduce簡介

today 信息 編程模型 cut 大型 狀態 參數 dfs 好處 . MapReduce基本編程模型和框架 1.1 MapReduce抽象模型 大數據計算的核心思想是:分而治之。如下圖1所示。把大量的數據劃分開來,分配給各個子任務來完成。再將結果合並到一起輸出。 註:如果

03-Linux基礎入門-系統的基礎優化[對於使用虛擬機學習的學習者]

技術分享 ifcfg-eth 特殊 ... selinux 排查 運行 版本 get 1、關閉SELinux功能①SELinux配置文件路徑 /etc/selinux/config ②查看SELinux狀態 getenforce ③關閉SELinux 方法一:常規方法→修

此文獻給正打算入門大資料的朋友:大資料學習筆記1000條1

1、Zookeeper用於叢集主備切換。 2、YARN讓叢集具備更好的擴充套件性。 3、Spark沒有儲存能力。 4、Spark的Master負責叢集的資源管理,Slave用於執行計算任務。 5、Hadoop從2.x開始,把儲存和計算分離開來,形成兩個相對獨立的子叢集:HDF

此文獻給正打算入門大資料的朋友:大資料學習筆記1000條2

501、MapReduce計算框架中的輸入和輸出的基本資料結構是鍵-值對。 502、Hadoop神奇的一部分在於sort和shuffle過程。 503、Hive驅動計算的“語言”是一XML形式編碼的。 504、Hive通過和Jobtracker通訊來初始化MapReduce任務(Job)。 505、M

人工智慧入門:機器學習問題的基本型別

1:concept learning:version space,decision tree等; 2:rule learning:If-then rules, association rules, genetic programming等; 3. instance-based learning(

林軒田機器學習基石入門

上一節我們主要向大家介紹我們身邊機器學習的例子,這一節我們將探討機器學習由什麼元素組成(機器學習的模型結構)。 首先我們先看個信用卡的例子。 假設我們想用機器學習來判斷“是否同意貸款給這個客戶?”,我們會將使用者的資訊資料輸給模型(比如年齡,性別,職業,工

Docker入門實踐筆記文章搞懂Docker下安裝Redis,以及Redis與SpringBoot整合

@Configuration public class RedisConfig { ​ /** * 注入 RedisConnectionFactory */ @Autowired RedisConnectionFactory redisConnectionFacto

學習之路-RabbitMQ:RabbitMQ的入門程式

1.建立maven工程 2.分別在兩個工程中匯入依賴 <dependency> <groupId>com.rabbitmq</groupId> <artifactId>amqp‐client</artifactId>