前言
Lesson 1中包含三大部分內(nèi)容：
- 如何根據(jù)需求選擇對應(yīng)的View（展示圖片：ImageView 展示文本：TextView）
- 如何修改View的樣式（字體顏色金拒、圖片的縮放裁剪）
- 接下來就來講講這第三小節(jié)的內(nèi)容：如何將多個View按照需求在屏幕上進(jìn)行擺放
引入
市面上每個應(yīng)用的界面都是由許多的View組合而成的（QQ 微信 微博）那么這就涉及到整個布局中的View如何去進(jìn)行擺放兵拢？
ViewGroup
ViewGroup能夠把View擺放在特定的位置（上or下or中……）
通過例子說明：
上次課中的例子都是只對單獨(dú)的某個View作說明
嘗試著再拷貝一份TextView元素放到下面鲸阻，你會發(fā)現(xiàn)出現(xiàn)了錯誤
注意：根View有且僅有一個,想要放置多個View時根View必須為一個ViewGroup
ViewGroup也屬于View的一種，是屏幕上的一塊矩形服爷，ViewGroup包含于View药薯，View包含ViewGroup
圖中可以看到ViewGroup同樣有寬高、背景顏色等屬性 不難理解因?yàn)閂iewGroup屬于View
當(dāng)然ViewGroup通常都是透明的即用戶看不見的
可以把ViewGroup理解為View的容器
一個View包含著其他的View咪橙，前者為父View夕膀，后者叫子View，后者之間稱兄弟View
美侦？ 看圖提問 产舞？
答案在文章底部公布
到目前為止，我們已經(jīng)知道了 想要放置多個View在屏幕上就必須把它們放到ViewGroup里
ViewGroup的類型
ViewGroup有很多種菠剩，每種ViewGroup都有其包含視圖的規(guī)則,先介紹兩種最最最常用的ViewGroup
LinearLayout（線性布局）
LinearLayout就是一個ViewGroup
規(guī)則：子視圖稱線性排列故稱線性布局易猫，所謂線性即水平或豎直
理論結(jié)束，看代碼如何編寫
ViewGroup使用單獨(dú)的關(guān)閉標(biāo)簽具壮，子視圖書寫在ViewGroup的開始標(biāo)簽和結(jié)束標(biāo)簽之間
LinearLayout的方向通過其屬性: android:orientation 指定准颓，
其值有二： vertical豎直方向、horizontal水平方向
特別注意：如果你不知道orientation屬性是干嘛的棺妓，那你會怎么辦攘已？問別人？ 千萬別怜跑，你應(yīng)該直接去百度或谷歌一下样勃，肯定有你要的答案吠勘。 這里我想告訴大家的是要學(xué)會通過搜索引擎去解決問題。這種事以后還多著呢峡眶！
照著上圖給你的代碼去XMLV練習(xí)一下剧防，嘗試著增加一些子視圖和更改它們的排列方向。
命名空間：XML命名空間聲明辫樱，使用命名空間來指定所有的android屬性峭拘，為什么使用android:前綴就是這個原因，特指示android系統(tǒng)自帶的屬性狮暑，其實(shí)前面也說過我們是可以自定義屬性的鸡挠，自定義屬性時，前綴就是我們自定義的某個文本而非android了搬男。 android: 是用來區(qū)分這些都是Android系統(tǒng)自帶的屬性
所以務(wù)必在根視圖的開始標(biāo)簽中加上XML命名空間的聲明
LinearLayout的寬高
- xxdp（固定寬高 xx具體指某個數(shù)值）
- 當(dāng)內(nèi)容的大小大于視圖所設(shè)置的寬高時宵凌，會顯示不全（被切掉一部分）
- wrap_content （包裹內(nèi)容）
- 視圖大小 == 內(nèi)容大小
- match_parent（匹配父布局）
- 無論視圖寬高為多少，視圖與父布局均等寬/高
注意一種場景: 當(dāng)前線性布局方向?yàn)閔orizontal(豎直方向)止后，若有其中一個子視圖的高度為match_parent瞎惫，那么這個子視圖將把它下面的子視圖都頂出父布局之外（不可見）自己占據(jù)父布局剩下的高度，同理寬度亦然译株。
線性布局 - 屏幕適配
運(yùn)行Android系統(tǒng)的設(shè)備千千萬萬瓜喇，設(shè)備的屏幕大小、屏幕分辨率各式各樣歉糜。
由此就會產(chǎn)生一個問題： 應(yīng)用在不同設(shè)備上所顯示的效果千差萬別乘寒！
就如下圖所示，分別在縱向放置匪补、橫向放置伞辛、大屏設(shè)備上顯示的效果會不盡人意，三個TextView都擠到左上角了夯缺，這對于使用大屏設(shè)備的用戶來說是尤為不人性化 也就是所說的用戶體驗(yàn)極差蚤氏。
需求 如果想要讓這三個TextView無論在什么設(shè)備上都平均在屏幕的上中下的位置需要怎么做呢？
嘗試用我們學(xué)過的知識：
- 每個TextView使用固定的高度均分屏幕大杏欢怠竿滨？
- 只能針對某一個分辨率的屏幕，不能適配所有的屏幕大小
- 使用wrap_content捏境？
- 包裹內(nèi)容就如上圖所示
- 使用match_parent于游？
- 匹配父元素會將剩余的兄弟師傅擠出父布局之外（無法看見）
以上做法都不能實(shí)現(xiàn)適配所有的設(shè)備，腫么辦垫言？問人贰剥？ 不！ 問人之前先百度/谷歌？昶怠０龀伞柱告！
或者可以直接去安卓官方文檔查找LinearLayout的屬性 相信你能自己解決！
Layout Weight （布局權(quán)重）
布局權(quán)重：在線性布局中給各個子視圖按比例分配空間笑陈，注意：僅在LinearLayout中有權(quán)重的概念
權(quán)重的使用
步驟一：
- 當(dāng)父布局（線性布局）的方向?yàn)樗椒较颍╤orizontal）時
- android:layout_width="0dp" 把寬度設(shè)置為0dp
- 當(dāng)父布局（線性布局）的方向?yàn)樨Q直方向（vertical）時
- android:layout_height="0dp" 把高度設(shè)置為0dp
步驟二：
- android:layout_weight="xx" 給每個子視圖分配權(quán)重 xx為某個數(shù)值
權(quán)重越大，分配的空間越大
實(shí)現(xiàn)均分只需分配相等的權(quán)重即可
同理大家可以自己去實(shí)現(xiàn)水平方向的均分
來些應(yīng)用例子
線性布局的東西到此結(jié)束葵袭！
RelativeLayout（相對布局）
相對布局相對于線性布局而言涵妥，更加靈活，方便坡锡。
規(guī)則：子視圖與父布局（父視圖）相對排列蓬网，或 子視圖之間相對排列
代碼如何編寫？
子視圖與父布局（父視圖）相對排列
android:layout_alignParentTop="true" <!--與父布局的上邊對齊-->
android:layout_alignParentBottom="true" <!--與父布局的下邊對齊-->
android:layout_alignParentLeft="true" <!--與父布局的左邊對齊-->
android:layout_alignParentRight="true" <!--與父布局的右邊對齊-->
android:layout_centerInParent="true" <!--（水平豎直都）居中于父布局-->
android:layout_centerHorizontal="true" <!--水平居中于父布局-->
android:layout_centerVertical="true" <!--豎直居中于父布局-->
<!--上述屬性值默認(rèn)為false-->
示例
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--默認(rèn)在左上角-->
<TextView
android:text="左上"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge" />
<TextView
android:text="右上"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge" />
<TextView
android:text="左中"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge" />
<TextView
android:text="右中"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge" />
<TextView
android:text="左下"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge" />
<TextView
android:text="右下"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge" />
<TextView
android:text="上中"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge" />
<TextView
android:text="下中"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge" />
<TextView
android:text="正中"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge" />
</RelativeLayout>
子視圖之間相對排列
android:layout_toLeftOf="@id/xxx" <!--在id為xxx的視圖的左側(cè)-->
android:layout_toRightOf="@id/xxx" <!--在id為xxx的視圖的右側(cè)-->
android:layout_below="@id/xxx" <!--在id為xxx的視圖的下方-->
android:layout_above="@id/xxx" <!--在id為xxx的視圖的上方-->
android:layout_alignTop="xxx" <!--上邊緣與id為xxx的視圖對齊-->
android:layout_alignBottom="xxx" <!--下邊緣與id為xxx的視圖對齊-->
android:layout_alignLeft="@id/xxx" <!--左邊緣與id為xxx的視圖對齊-->
android:layout_alignRight="xxx" <!--右邊緣與id為xxx的視圖對齊-->
說明： 每個視圖都可以設(shè)置id屬性作為唯一標(biāo)識
android:id="@+id/xxx" <!--@+id 表示聲明一個id屬性-->
android:layout_toLeftOf="@id/xxx" <!--@id 引用某個已聲明的id屬性對應(yīng)的視圖帆锋，在id為xxx的視圖左邊-->
示例
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btn_up"
android:text="上"
android:layout_above="@id/btn_center"
android:layout_alignLeft="@id/btn_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge"/>
<Button
android:id="@+id/btn_center"
android:text="中"
android:layout_toRightOf="@id/btn_left"
android:layout_above="@id/btn_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge"/>
<Button
android:id="@+id/btn_down"
android:text="下"
android:layout_alignLeft="@id/btn_center"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge"/>
<Button
android:id="@+id/btn_left"
android:text="左"
android:layout_alignTop="@id/btn_center"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge"/>
<Button
android:id="@+id/btn_right"
android:text="右"
android:layout_toRightOf="@id/btn_center"
android:layout_alignTop="@id/btn_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge"/>
<Button
android:id="@+id/btn_hand"
android:text="拳"
android:layout_alignBottom="@id/btn_foot"
android:layout_toLeftOf="@id/btn_foot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge"/>
<Button
android:id="@+id/btn_foot"
android:text="腳"
android:layout_alignBottom="@id/btn_center"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:textAppearanceLarge"/>
</RelativeLayout>
代碼結(jié)合上面的屬性說明與效果圖對比學(xué)習(xí)。
再來看一個常見的例子禽额，QQ好友列表項(xiàng)的布局
動手寫一下布局吧锯厢，相信你可以的
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/iv_icon"
android:src="@mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tv_name"
android:text="樹懶"
android:layout_toRightOf="@id/iv_icon"
android:textAppearance="?android:textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tv_text"
android:text="[在線] 時間沖淡了我的咖啡"
android:textColor="@android:color/darker_gray"
android:layout_toRightOf="@id/iv_icon"
android:layout_below="@id/tv_name"
android:textAppearance="?android:textAppearanceMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tv_signal"
android:text="4G"
android:layout_alignParentRight="true"
android:textColor="@android:color/darker_gray"
android:textAppearance="?android:textAppearanceMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
代碼顯示效果如下圖
是不是感覺View都擠到一起了很難看 - -！
不足： 這些View都緊挨著父布局的邊緣脯倒，這樣顯示給用戶的感覺非常的不好实辑。
怎么樣給視圖周圍留出一些空白呢？
Padding & Margin （內(nèi)邊距 & 外邊距）
用圖說話
根據(jù)上圖可以清楚的看到Padding 和Margin之間的區(qū)別
- Padding 內(nèi)邊距：View與View的內(nèi)容之間的邊距
- Margin 外邊距 ： 整個View與父布局之間的邊距
在實(shí)際開發(fā)中由于視圖的背景一般都為透明藻丢，所以二者之間看起來并無差別
android:padding="xxdp" <!--上下左右的內(nèi)邊距為xxdp-->
android:paddingTop="xxdp" <!--上邊的內(nèi)邊距為xxdp-->
android:paddingBottom="xxdp" <!--下邊的內(nèi)邊距為xxdp-->
android:paddingLeft="xxdp" <!--左邊的內(nèi)邊距為xxdp-->
android:paddingRight="xxdp" <!--右邊的內(nèi)邊距為xxdp-->
android:layout_margin="xxdp" <!--上下左右的外邊距為xxdp-->
android:layout_marginTop="xxdp" <!--上邊的外邊距為xxdp-->
android:layout_marginBottom="xxdp" <!--下邊的外邊距為xxdp-->
android:layout_marginLeft="xxdp" <!--左邊的外邊距為xxdp-->
android:layout_marginRight="xxdp" <!--右邊的外邊距為xxdp-->
據(jù)此修改上面寫的QQ好友列表項(xiàng)的代碼如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"> <!-- 給整個布局添加內(nèi)邊距 -->
<ImageView
android:id="@+id/iv_icon"
android:src="@mipmap/ic_launcher"
android:layout_marginRight="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" /> <!-- 給圖片添加右邊的外邊距 -->
<TextView
android:id="@+id/tv_name"
android:text="樹懶"
android:layout_toRightOf="@id/iv_icon"
android:textAppearance="?android:textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tv_text"
android:text="[在線] 時間沖淡了我的咖啡"
android:textColor="@android:color/darker_gray"
android:layout_toRightOf="@id/iv_icon"
android:layout_below="@id/tv_name"
android:textAppearance="?android:textAppearanceMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tv_signal"
android:text="4G"
android:layout_alignParentRight="true"
android:textColor="@android:color/darker_gray"
android:textAppearance="?android:textAppearanceMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
至于邊距應(yīng)該設(shè)置為多少合適剪撬，參照Meterial Design 設(shè)計規(guī)范:
http://wiki.jikexueyuan.com/project/material-design/
規(guī)范中推薦為8dp的倍數(shù)。
