您好,登錄后才能下訂單哦!
很多開發(fā)者一聽說Android終端的屏幕尺寸五花八門,屏幕分辨率千奇百怪,就覺得Android開發(fā)在屏幕適配方面是必定是一件頭疼的事情。因?yàn)樵贏ndroid問世之前,廣大開發(fā)者知道的UI解決方案大致分為兩類:
在Web開發(fā)中的CSS,一層一層的去層疊樣式。
在iOS開發(fā)中去計(jì)算每一個(gè)UIView的尺寸。
上面兩種方案,無論哪種方案面對(duì)碎片化嚴(yán)重的Android終端,那都是一場(chǎng)噩夢(mèng)。好在Android提供了另一套解決方案來應(yīng)對(duì)嚴(yán)重的終端碎片化,這就是布局和9-patch。
這里想來說說布局,在Android SDK剛剛問世的時(shí)候,Android提供了AbsoluteLayout,F(xiàn)rameLayout,LinearLayout,RelativeLayout和Tablelayout五大布局來應(yīng)對(duì)終端碎片化問題。
但很快Android發(fā)現(xiàn)AbsoluteLayout是一個(gè)愚蠢的方案,在Android 1.5系統(tǒng)中就不再支持此布局,剩下的四個(gè)布局中,Tablelayout雖然依然被支持,但是由于Fragment以及新的TabLayout的出現(xiàn),博主在此斷言,Tablelayout也命不久矣,被移除支持只是遲早的事兒。
所以,Android的五大基本布局現(xiàn)在只剩下三個(gè)(這里說的是基本布局,在Android support包里引入的新的布局不計(jì)入內(nèi)),下面分別介紹一下這三個(gè)基本布局。
FrameLayout應(yīng)該是Android系統(tǒng)中最簡(jiǎn)單的布局了,在FrameLayout中的元素,默認(rèn)都是以FrameLayout控件的坐上頂點(diǎn)作為基準(zhǔn)點(diǎn),一層一層的重疊起來,后加進(jìn)來的元素覆蓋前面的元素。
下面先來一個(gè)演示,代碼如下:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:layout_width="200dp" android:layout_height="200dp" android:background="#ff0000"/> <View android:layout_width="200dp" android:layout_height="200dp" android:background="#000000"/> <View android:layout_width="200dp" android:layout_height="200dp" android:layout_margin="100dp" android:background="#00ff00"/></FrameLayout>
運(yùn)行結(jié)果如下:
在代碼里,有三個(gè)View,而在運(yùn)行結(jié)果上只能看到兩個(gè)View,一個(gè)黑色和一個(gè)綠色。這是因?yàn)榧t色的View被黑色的View蓋住了。
在FrameLayout中,通過android:layout_gravity屬性去指定子元素的位置,下面調(diào)整一下上訴例子中的黑色View的位置,讓紅色的View顯示出來,調(diào)整后的代碼如下:
<View android:layout_width="200dp" android:layout_height="200dp" android:layout_gravity="bottom|right" android:background="#000000"/>
可以看到上面代碼里添加了android:layout_gravity屬性,并且指定了兩個(gè)值,一個(gè)為bottom,一個(gè)為right,表示這個(gè)View將被放到FrameLayout的右下角。運(yùn)行結(jié)果如下圖所示:
LinearLayout是線性布局,它可以讓它內(nèi)部的元素按照指定方向依次排開。LinearLayout的方向是通過android:orientation屬性指定,并且可以通過android:gravity屬性指定對(duì)其方式。
還是直接上段代碼看看效果,代碼如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center"> <View android:layout_width="100dp" android:layout_height="100dp" android:background="#ff0000"/> <View android:layout_width="100dp" android:layout_height="100dp" android:background="#000000"/> <View android:layout_width="100dp" android:layout_height="100dp" android:background="#00ff00"/></LinearLayout>
在代碼中,設(shè)置了LinearLayout的方向?yàn)榭v向,并且對(duì)其方式居中對(duì)齊,于是運(yùn)行結(jié)果如下圖所示:
除了android:orientation將設(shè)為vertical外,也可以設(shè)為horizontal。讓LinearLayout內(nèi)部的元素橫向排列,將上面例子中的android:orientation屬性值改為horizontal后的運(yùn)行結(jié)果,如下圖所示:
RelativeLayout是基本布局里面最靈活,也是最復(fù)雜的布局,它內(nèi)部的元素可以通過設(shè)定彼此之間的相對(duì)關(guān)系來決定布局,使用RelativeLayout時(shí),推薦為其內(nèi)部每個(gè)元素都設(shè)定id,下面依然通過一個(gè)列子來演示此布局的使用方法。代碼如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/red" android:layout_width="100dp" android:layout_height="100dp" android:background="#ff0000"/> <View android:id="@+id/black" android:layout_width="100dp" android:layout_height="100dp" android:layout_toRightOf="@id/red" android:layout_below="@id/red" android:background="#000000"/> <View android:id="@+id/green" android:layout_width="100dp" android:layout_height="100dp" android:layout_below="@id/black" android:layout_alignParentRight="true" android:background="#00ff00"/> <View android:id="@+id/gray" android:layout_width="100dp" android:layout_height="100dp" android:layout_centerInParent="true" android:background="#888888"/> <View android:id="@+id/orange" android:layout_width="100dp" android:layout_height="100dp" android:layout_toRightOf="@id/green" android:layout_below="@id/gray" android:background="#ff8800"/></RelativeLayout>
先分析代碼,可以看到每一個(gè)View都被設(shè)置了一個(gè)id值,分別為red,black,green,gray和orange。然后通過代碼,可以看出black位于red的右邊和下面,green位于black的下面并且右對(duì)齊其父元素(即RelativeLayout),gray居中對(duì)齊父元素(即RelativeLayout), orange位于green的右邊同時(shí)位于gray的下面,運(yùn)行結(jié)果如圖所示:
在此在歸納一下RelativeLayout中,與布局相關(guān)的屬性:
android:layout_below:位于指定元素的下方
android:layout_above:位于指定元素的上方
android:layout_toLeftOf:位于指定元素的左側(cè)
android:layout_toRightOf:位于指定元素的右側(cè)
android:layout_centerVertical:垂直居中對(duì)齊父元素
android:layout_centerHorizontal:水平居中對(duì)齊父元素
android:layout_centerInParent:居中對(duì)齊父元素
android:layout_alignParentRight:與父元素右對(duì)齊
android:layout_alignParentLeft:與父元素左對(duì)齊
android:layout_alignParentTop:與父元素上對(duì)齊
android:layout_alignParentBottom:與父元素下對(duì)齊
android:layout_alignRight:與指定元素右對(duì)齊
android:layout_alignLeft:與指定元素左對(duì)齊
android:layout_alignTop:與指定元素上對(duì)齊
android:layout_alignBottom:與指定元素下對(duì)齊
從Android 4.2開始,也就是從API Level 17開始,Android增強(qiáng)了RelativeLayout,使其能夠更好的應(yīng)對(duì)并本地化這一需求,比如在有的國(guó)家,文字是從右往左閱讀,這也就是所說的RTL。為了應(yīng)對(duì)RTL,RelativeLayout又增加了以下屬性:
android:layout_alignStart:與指定元素的開始位置對(duì)齊
android:layout_toStartOf:位于指定元素的開始側(cè)
android:layout_alignParentStart:與父元素與開始側(cè)對(duì)齊
android:layout_alignEnd:與指定元素的結(jié)束始位置對(duì)齊
android:layout_toEndOf:位于指定元素的結(jié)束側(cè)
android:layout_alignParentEnd:與指定元素的結(jié)束位置對(duì)齊
這里的開始和結(jié)束我們可以做如下理解:
開始:在從左到右閱讀習(xí)慣的國(guó)家,開始側(cè)等于左側(cè),toStartOf的顯示效果就等于toLeftOf。但是在從右往左閱讀習(xí)慣的國(guó)家,那么開始側(cè)就變成了右側(cè),toStartOf的顯示效果就等于了toRightOf。
結(jié)束:同上面對(duì)開始的理解一樣,結(jié)束側(cè)在從左到右閱讀習(xí)慣的國(guó)家就是右側(cè),反之則在左側(cè)。
歡迎轉(zhuǎn)載,轉(zhuǎn)載同時(shí)請(qǐng)尊重版權(quán),附上本文原文鏈接:點(diǎn)擊這里
==============================================
更多內(nèi)容,歡迎查看本人博客:林彥君的博客
================================================
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。