Android基本佈局解析

佈局,可以理解爲Android應用程序的桌面,在佈局上可以擺放各種控件,形成不同的程序界面。佈局上除了控件,也可以擺放佈局,在此佈局中再擺放控件。佈局和控件的關係如下圖1所示。佈局這樣的功能,讓界面的多樣化成爲了一件容易的事情。本節介紹3種基本的佈局,讓大家對Android的佈局有一個初步的瞭解。
這裏寫圖片描述
圖1

下面通過在一個佈局上,創建3個按鈕,並根據這3個按鈕在佈局上擺放的位置,來了解一下各個佈局的作用。

一、LinearLayout佈局

  • 創建一個Android程序,程序名爲FristLayout,創建程序的相關參數如下圖2~圖3所示。
    這裏寫圖片描述
    圖2

    這裏寫圖片描述
    圖3
    說明:如上面紅色標示所示,不要通過ADT來自動創建Activity,我們後續通過手工創建來體驗一下。

  • 創建好的程序,應該是沒有Activity,也沒有Layout的。我們首先在src/layout目錄下,創建一個layout,並命名爲activity_main,同時佈局類型請選擇LinearLayout,相關參數如下圖4中紅色標示所示。
    這裏寫圖片描述
    圖4

  • 創建好的佈局文件activit_main.xml代碼如下圖5所示。我們在該文件中,增加3個代碼的按鈕,並分別給3個按鈕定義id爲button_1、button_2、button_3,代碼如下圖6所示。
    這裏寫圖片描述
    圖5

    這裏寫圖片描述
    圖6

  • 定義好佈局文件activity_main.xml後,我們再在src目錄下,創建一個類包爲com.example.fristlayout,並在該類包下創建活動MainActivity.java文件,用於調用佈局activity_main,相關代碼如下圖7所示。
    這裏寫圖片描述
    圖7

  • 最後,我們修改AndroidManifest.xml文件,註冊創建的活動MainActivity,相關代碼如下圖8所示。
    這裏寫圖片描述
    圖8

  • 運行程序,界面展示效果如下圖9所示。我看到3個按鈕都是靠左對齊,並縱向排列的。這是因爲,LinearLayout佈局,是將控件按照縱向或者橫向來進行排列的。如圖6中所示的第5行代碼,android:orientataion=”vertical”,我們將該佈局文件定義爲將控件縱向排列,因此佈局中的3個按鈕被依次在縱向上進行排列。
    這裏寫圖片描述
    圖9

  • 我們更改一下佈局文件activit_main.xml,將佈局的縱向排列改爲橫向排列,如下圖10中,第5行代碼所示。
    這裏寫圖片描述
    圖10

  • 運行程序,顯示界面效果如下圖11所示。界面中的3個按鈕已經橫向排列在一排上了,這說明佈局橫向排列的參數已經生效。
    這裏寫圖片描述
    圖11

二、RelativeLayout佈局

  • RelativeLayout佈局,顧名思義是一個相對關係的佈局文件,該佈局中的控件位置,都是相對於父佈局,或相對於其它控件進行定位。我們將佈局文件activit_main.xml,更改爲RelativeLayout佈局,相關代碼如下圖12所示。
    這裏寫圖片描述
    圖12
    說明:
    1)第2行代碼、第30行代碼,將佈局文件更改爲RelativeLayout佈局。
    2)第10、11行代碼,聲明按鈕button_1對齊父佈局的左側和頂部。
    3)第18行代碼,聲明按鈕button_2對齊父佈局的中間。
    4)第25、26行代碼,聲明按鈕button_3對齊父佈局的右側和底部。

  • 運行程序,顯示界面效果如下圖13所示。3個按鈕均按照我們在佈局文件中聲明的對齊方式排列。
    這裏寫圖片描述
    圖13

  • 上面的對齊方式,是將按鈕相對於父佈局進行定位的。我們修改一下佈局文件的代碼,將按鈕相對於其它控件進行定位。相關代碼如下圖14所示。
    這裏寫圖片描述
    圖14
    說明:
    1)第10、11行代碼,按鈕button_1沿用之前的代碼,依舊相對於父佈局定位,不做更改。
    2)第18、19行代碼,將按鈕button_2相對於按鈕button_1的底部和右側進行對齊。
    3)第26、27行代碼,將按鈕button_3相對於按鈕button_2的底部和左側進行對齊。

  • 運行程序,界面顯示如下圖15所示。button_1仍然在原位置沒有變動,按鈕butotn_2、button_3已按照佈局文件中,分別相對於button_1和button_2進行了重新定位。
    這裏寫圖片描述
    圖15

三、TableLayout佈局

  • TableLayout佈局,看名稱就知道,這是按照表格方式進行定位的佈局。TableLayout佈局內按照行列的模式進行佈局,同一行中,一個控件佔據一列,下一行的控件和上一行同列控件對齊。我們將佈局文件activit_main.xml,更改爲TableLayout佈局,相關代碼如下圖16所示。
    這裏寫圖片描述
    圖16
    說明:
    1)第2、29行代碼,將佈局文件更改爲RelativeLayout佈局。
    2)第6、18行代碼,第20、26行代碼,在佈局中設置了2行。
    3)第7~17行代碼,在第一行中,放置了2個按鈕button_1和button_2。
    4)第21~25行代碼,在第二行中,方式了1個按鈕button_3。

  • 運行程序,界面顯示如下圖17所示。界面中3個按鈕分爲2行顯示,第一行2個按鈕,第二行1個按鈕。
    這裏寫圖片描述
    圖17

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章