Android從零開始(二)----UI組件之頁面布局

View與ViewGroup

?在Android APP中,所有的用戶界面元素都是由View和ViewGroup的對象構成的。View是繪制在屏幕上的用戶與之交互的一個對象,而ViewGroup是一個用于存放其他的View或者是ViewGroup對象的一個布局容器。其實這一點有做過前端開發(fā)的朋友應該能夠直接看明白,就不再多做解釋了吱肌。

?以防萬一,這里用一張從別的地方扒來的圖片說明他們之間的層次關系仰禽。
圖2-1 UI布局層次

?Android App的UI就是以這種層次樹的結(jié)構所堆疊的氮墨,而創(chuàng)建一個UI布局一共有兩種方式,一種是自己在JAVA里寫代碼吐葵,另外一種是通過XML來定義布局规揪,XML文件更加接近人的思維,更加易于讀懂

折联,因此我們一般都會采用第二種方式來些Android APP的UI粒褒,下面舉一個XML的例子。

<?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="fill_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="I am a Button" />
</LinearLayout>

?可以用一些寫過其他界面的知識來嘗試著讀一個這個代碼诚镰,外面一個LinearLayout奕坟,里面又有兩個標簽,分別是TextView和Button清笨,沒錯這個界面就是這么簡單月杉,一共使用了三個標簽,其實不需要實際知道詳細信息也可以進行猜測抠艾,外面是一個線性布局苛萎,里面一共有兩個view,分別是textView大概是個謝文本的吧检号,另外一個則很明顯是一個button腌歉。差不多就是這樣,具體標簽怎么使用有些什么齐苛,我們接下來講翘盖。

Android布局

?說到布局,究竟什么才是布局呢凹蜂?我自己的理解是馍驯,首先阁危,布局是一個ViewGroup,也就是說他是去存放一些子層次的容器汰瘫,不同的布局狂打,就規(guī)定了一些不同的規(guī)則去使得其中的view甚至是ViewGroup以不同的方式去存放排列。
?網(wǎng)上去搜索Android布局混弥,大多數(shù)教程一般都是說趴乡,有六大布局,分別是: LinearLayout(線性布局)剑逃,RelativeLayout(相對布局)浙宜,TableLayout(表格布局), FrameLayout(幀布局)AbsoluteLayout(絕對布局)蛹磺,GridLayout(網(wǎng)格布局),但是我認為應該再加上一個ConstraintLayout(約束布局),這個也是后面更新之后同仆,使用很多的一個布局萤捆。

線性布局

圖2-2 線性布局.png

?線性布局特點:同一級別的軟件之間沒有位置關系的依賴,只是按照添加順序依次排列俗批,其中俗或,線性布局最重要的屬性是android:orientation,通過指定horizontal與vertical來指定這個布局中元素的排列方向是水平還是豎直排布的岁忘,前面舉的例子就是一個簡單的豎直排布的線性布局辛慰。

幀布局

圖2-3 幀布局.png

?幀布局感覺在日常使用中不多見,所以就不講的多詳細了干像,只講出它的特點吧帅腌。
?幀布局會按照添加順序?qū)盈B在一起,默認層疊在左上角位置麻汰,本例子因為設置了layout_gravity="center"速客,所以層疊在視圖中心位置。

相對布局

?布局中一個元素的位置使用相對于另一個元素的位置去表示五鲫,比如說溺职,一個元素相對于整個布局的來說處于他的左邊框的右邊,第二個元素又處在前一個元素的下方位喂,相對布局是之前使用最為靈活的布局浪耘,但是現(xiàn)在已經(jīng)被約束布局所代替

絕對布局

?Android手機陣營極其龐大,各個手機分辨率屏幕大小又有不同塑崖,因此以絕對的值去指定某個組件的大小的絕對布局七冲,早已被棄用。

表格布局

?顧名思義弃舒,就是以表格的形式去排列布局中的元素癞埠,通過指定tableRow去指定這個布局中一共有多少個行状原。

<TableLayout  
    android:id="@+id/TableLayout2"  
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content"  
    android:collapseColumns="0,2" >  

    <TableRow>  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="one" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="two" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="three" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="four" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="five" />  
    </TableRow>  
</TableLayout>

?重點:android:collapseColumns="0,2"的意思就是,隱藏號為0和2的苗踪,也就是隱藏第一列和第三列颠区,原本應當有五個button會顯示,但是現(xiàn)在只會顯示三個通铲。

圖2-4 表格布局隱藏列

?可以通過設置android:stretchColumns = "1"屬性為1毕莱,使得第二列變?yōu)榭衫斓牧校瑢⑵淅熘敝撂畛錆M整個行

圖2-4 表格布局拉伸列

?表格布局很適合比較規(guī)整排列的界面颅夺,但是當界面的自由度比較高時朋截,使用表格布局可能不夠方便

網(wǎng)格布局

?Android4.0之后才更新的一個布局,其實我之前很少使用吧黄,它應該屬于表格布局的一個升級部服,可以想象一些這個布局的使用方式,首先定義的時候拗慨,把整個屏幕按照網(wǎng)格的形式廓八,分成固定的多少行多少列,可以設置布局中元素的排布方式赵抢,有水平排布和豎直排布兩種方式剧蹂,通過指定某個元素占用多少個行格子多少個列格子,來對頁面進行時設計烦却。
設計一個計算器的界面來對網(wǎng)格布局進行說明:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="6" >

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="#FFCCCC"
        android:text="0"
        android:textSize="50sp" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="回退" />

    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="清空" />

    <Button android:text="+" />

    <Button android:text="1" />

    <Button android:text="2" />

    <Button android:text="3" />

    <Button android:text="-" />

    <Button android:text="4" />

    <Button android:text="5" />

    <Button android:text="6" />

    <Button android:text="*" />

    <Button android:text="7" />

    <Button android:text="8" />

    <Button android:text="9" />

    <Button android:text="/" />

    <Button
        android:layout_width="wrap_content"
        android:text="." />

    <Button android:text="0" />

    <Button android:text="=" />

</GridLayout> 

圖2-5 網(wǎng)格布局展示

?這是一個挺重要的點宠叼,看了之前的代碼,應該可以發(fā)現(xiàn)其爵,每一個需要占多個行或者列的元素冒冬,都需要設定一個 android:layout_gravity = "fill"

約束布局

?ConstraintLayout是2016年google i/o會議上提出的一個新布局,Android studio2.3之后新建moudle所使用的布局就是ConstraintLayout醋闭,假如沒有使用窄驹,那么先要在build.gradle中引入這個包

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.1'
}

?之前約束布局沒有出現(xiàn)的時候,是不推薦使用界面可視化工具去通過拖拽來建立整個界面布局的证逻,界面基本都是通過編寫XML文件來進行設計的乐埠,但是這個約束布局正好相反,它更適合使用界面可視化工具去設計整個頁面囚企,讓編輯器自動的給我們生成XML文件丈咐, 使用過dw軟件去編寫網(wǎng)頁的人應該深有體會,這樣能解放不知道多少的工作量龙宏,就算手動拖拽的頁面有一點邊界不吻合的這些小的問題棵逊,也可以通過代碼的簡單修改去實現(xiàn)。

layout_constraintTop_toTopOf       // 將所需視圖的頂部與另一個視圖的頂部對齊银酗。 

layout_constraintTop_toBottomOf    // 將所需視圖的頂部與另一個視圖的底部對齊辆影。 

layout_constraintBottom_toTopOf    // 將所需視圖的底部與另一個視圖的頂部對齊徒像。 

layout_constraintBottom_toBottomOf // 將所需視圖的底部與另一個視圖的底部對齊。 

layout_constraintLeft_toTopOf      // 將所需視圖的左側(cè)與另一個視圖的頂部對齊蛙讥。 

layout_constraintLeft_toBottomOf   // 將所需視圖的左側(cè)與另一個視圖的底部對齊锯蛀。 

layout_constraintLeft_toLeftOf     // 將所需視圖的左邊與另一個視圖的左邊對齊。 

layout_constraintLeft_toRightOf    // 將所需視圖的左邊與另一個視圖的右邊對齊次慢。 

layout_constraintRight_toTopOf     // 將所需視圖的右對齊到另一個視圖的頂部旁涤。

layout_constraintRight_toBottomOf  // 將所需視圖的右對齊到另一個的底部。

layout_constraintRight_toLeftOf    // 將所需視圖的右邊與另一個視圖的左邊對齊迫像。

layout_constraintRight_toRightOf   // 將所需視圖的右邊與另一個視圖的右邊對齊劈愚。

總結(jié):Android的頁面有很多布局,有些布局因為不適用已經(jīng)棄用闻妓,而剩下的布局中菌羽,能夠適應最復雜情況的布局為約束布局,當然約束布局也可以去實現(xiàn)一些簡單的頁面由缆,但是不是說什么地方都要用約束布局算凿,在簡單的情況下,去選擇合適的軟件犁功,才是最正確的做法。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末婚夫,一起剝皮案震驚了整個濱河市浸卦,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌案糙,老刑警劉巖限嫌,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異时捌,居然都是意外死亡怒医,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門奢讨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來稚叹,“玉大人,你說我怎么就攤上這事拿诸“切洌” “怎么了?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵亩码,是天一觀的道長季率。 經(jīng)常有香客問我,道長描沟,這世上最難降的妖魔是什么飒泻? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任鞭光,我火速辦了婚禮,結(jié)果婚禮上泞遗,老公的妹妹穿的比我還像新娘惰许。我一直安慰自己,他們只是感情好刹孔,可當我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布啡省。 她就那樣靜靜地躺著,像睡著了一般髓霞。 火紅的嫁衣襯著肌膚如雪卦睹。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天方库,我揣著相機與錄音宇植,去河邊找鬼。 笑死契邀,一個胖子當著我的面吹牛听绳,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播邀层,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼返敬,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了寥院?” 一聲冷哼從身側(cè)響起劲赠,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎秸谢,沒想到半個月后凛澎,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡估蹄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年塑煎,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片臭蚁。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡最铁,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出刊棕,到底是詐尸還是另有隱情炭晒,我是刑警寧澤,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布甥角,位于F島的核電站网严,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏嗤无。R本人自食惡果不足惜震束,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一怜庸、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧垢村,春花似錦割疾、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至侵佃,卻和暖如春麻昼,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背馋辈。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工抚芦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人迈螟。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓叉抡,卻偏偏與公主長得像,于是被迫代替她去往敵國和親答毫。 傳聞我的和親對象是個殘疾皇子褥民,可洞房花燭夜當晚...
    茶點故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內(nèi)容