View與ViewGroup
?在Android APP中,所有的用戶界面元素都是由View和ViewGroup的對象構成的。View是繪制在屏幕上的用戶與之交互的一個對象,而ViewGroup是一個用于存放其他的View或者是ViewGroup對象的一個布局容器。其實這一點有做過前端開發(fā)的朋友應該能夠直接看明白,就不再多做解釋了吱肌。
?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(約束布局),這個也是后面更新之后同仆,使用很多的一個布局萤捆。
線性布局
?線性布局特點:同一級別的軟件之間沒有位置關系的依賴,只是按照添加順序依次排列俗批,其中俗或,線性布局最重要的屬性是android:orientation,通過指定horizontal與vertical來指定這個布局中元素的排列方向是水平還是豎直排布的岁忘,前面舉的例子就是一個簡單的豎直排布的線性布局辛慰。
幀布局
?幀布局感覺在日常使用中不多見,所以就不講的多詳細了干像,只講出它的特點吧帅腌。
?幀布局會按照添加順序?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)在只會顯示三個通铲。
?可以通過設置android:stretchColumns = "1"屬性為1毕莱,使得第二列變?yōu)榭衫斓牧校瑢⑵淅熘敝撂畛錆M整個行
?表格布局很適合比較規(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>
?這是一個挺重要的點宠叼,看了之前的代碼,應該可以發(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 // 將所需視圖的右邊與另一個視圖的右邊對齊劈愚。