Android UI 控件之六大布局

??Android里的圖形界面都是由View和ViewGroup以及他們的子類構成的: View:所有可視化控件的父類,提供組件描繪和時間處理方法 ViewGroup: View類的子類,可以擁有子控件,可以看作是容器 Android UI中的控件都是按照這種層次樹的結構堆疊得,而創建UI布局的方式有兩種, 自己在Java里寫代碼或者通過XML定義布局,后者顯得更加方便和容易理解! 也是我們最常用的手段!另外我們一般很少直接用View和ViewGroup來寫布局,更多的 時候使用它們的子類控件或容器來構建布局!

1)fill_parent

設置一個構件的布局為fill_parent將強制性地使構件擴展,以填充布局單元內盡可能多的空間。這跟Windows控件的dockstyle屬性大體一致。設置一個頂部布局或控件為fill_parent將強制性讓它布滿整個屏幕。

2) wrap_content

設置一個視圖的尺寸為wrap_content將強制性地使視圖擴展以顯示全部內容。以TextView和ImageView控件為例,設置為wrap_content將完整顯示其內部的文本和圖像。布局元素將根據內容更改大小。設置一個視圖的尺寸為wrap_content大體等同于設置Windows控件的Autosize屬性為True。

3)match_parent

Android2.2中match_parent和fill_parent是一個意思 .兩個參數意思一樣,match_parent更貼切,于是從2.2開始兩個詞都可以用。那么如果考慮低版本的使用情況你就需要用fill_parent了

一、LinearLayout(線性布局)

LinearLayout

關于weight的詳細用法參考菜鳥教程LinearLayout詳解

  • 默認情況下,LinearLayout的布局為水平布局,使用orientation來改變布局方式,有vertical(豎直布局)和horizontal (水平布局)兩種方式。

divider分割線

  1. android:divider設置作為分割線的圖片
  2. android:showDividers設置分割線的位置,none(無),beginning(開始),end(結束),middle(每兩個組件間)
  3. dividerPadding設置分割線的Padding
   android:orientation="vertical"
    android:divider="@drawable/parting_line"
    android:showDividers="middle"
    android:dividerPadding="10dp"
LinearLayout的簡單例子:
image.png
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="請輸入要保存的美文:"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="right">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="保存"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="清空"/>
    </LinearLayout>

二、RelativeLayout(相對布局)

核心屬性圖

RelativeLayout
  • 其中,關于兄弟組件的小demo梅花布局
    梅花布局

- margin與padding的區別

?&esnp;初學者對于這兩個屬性可能會有一點混淆,這里區分下: 首先margin代表的是偏移,比如marginleft = "5dp"表示組件離容器左邊緣偏移5dp; 而padding代表的則是填充,而填充的對象針對的是組件中的元素,比如TextView中的文字 比如為TextView設置paddingleft = "5dp",則是在組件里的元素的左邊填充5dp的空間! margin針對的是容器中的組件,而padding針對的是組件中的元素,要區分開來!

  • margin可以設置為負數

三、TableLayout(表格布局)

介紹:

相信學過HTML的朋友都知道,我們可以通過< table >< tr >< td >就可以生成一個HTML的表格, 而Android中也允許我們使用表格的方式來排列組件,就是行與列的方式,就說我們這節的TableLayout!

①如果我們直接往TableLayout中添加組件的話,那么這個組件將占滿一行!!!
②如果我們想一行上有多個組件的話,就要添加一個TableRow的容器,把組件都丟到里面!
③tablerow中的組件個數就決定了該行有多少列,而列的寬度由該列中最寬的單元格決定
④tablerow的layout_width屬性,默認是fill_parent的,我們自己設置成其他的值也不會生效!!! 但是layout_height默認是wrapten——content的,我們卻可以自己設置大小!
⑤整個表格布局的寬度取決于父容器的寬度(占滿父容器本身)
⑥有多少行就要自己數啦,一個tablerow一行,一個單獨的組件也一行!多少列則是看tableRow中 的組件個數,組件最多的就是TableLayout的列數

android:collapseColumns:設置需要被隱藏的列的序號
android:shrinkColumns:設置允許被收縮的列的列序號
android:stretchColumns:設置運行被拉伸的列的列序號
以上這三個屬性的列號都是從0開始算的,

四、FrameLayout(幀布局)

  • 前景圖像:永遠處于幀布局最上面,直接面對用戶的圖像,就是不會被覆蓋的圖片。
    • android:foreground:*設置改幀布局容器的前景圖像
    • android:foregroundGravity:設置前景圖像顯示的位置

ps:get兩個有意思的小項目

  • 隨手指移動的萌妹子
  • 跑動的萌妹子

五、GridLayout(網格布局)

網格布局

例子:計算機布局的實現


image.png
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    android:columnCount="4"
    android:rowCount="6">

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="@color/colorPrimary"
        android:text="0"
        android:textSize="50dp"/>

    <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>

六、AbsoluteLayout(絕對布局)

前面已經介紹了,Android中的五大布局,在本節中會講解第六個布局AbsoluteLayout(絕對布局), 之所以把這個放到最后,是因為絕對布局,我們基本上都是不會使用的,當然你也可以直接跳過這一 篇博文,不過作為一個喜歡增長姿勢的程序員,我們還是可以了解這個AbsoluteLayout布局的, 相信大部分學過Java的都知道,我們在Java swing(不是spring哦)都用過這個絕對布局,但是Android 中我們用這個少的原因,就是因為我們開發的應用需要在很多的機型上面進行一個適配,如果你 使用了這個絕對布局的話,可能你在4寸的手機上是顯示正常的,而換成5寸的手機,就可能出現偏移 和變形,所以的話,這個還是不建議使用了,當然,如果你不會寫代碼的話,又想玩玩android,那么寫 布局的時候就可以通過ADT把需要的組件,拖拉到界面上!這個AbsoluteLayout是直接通過X,Y坐標來 控制組件在Activity中的位置的!另外這個但單位是dp!

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,885評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,312評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,993評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,667評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,410評論 6 411
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,778評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,775評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,955評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,521評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,266評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,468評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,998評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,696評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,095評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,385評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,193評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,431評論 2 378

推薦閱讀更多精彩內容