Android Studio安卓學習筆記(三)Android用戶界面的設計布局與組件(一)用戶界面布局設計(1)


當我們創建了一個安卓項目后,我們會發現真正建立一個完善的安卓項目並不是想象的那么容易。其實和設計GUI可視化界面一樣,開發安卓也需要考慮很多方面,主要考慮的還是界面布局和需要的組件。

 

一:Android用戶界面布局管理

        Android系統按照MVC(模型(model)-視圖(view)-控制器(controller))設計模式將應用程序的界面設計與功能控制設計分離,類似於前后端分離,可以單獨哦修改用戶界面和后面的控制代碼,而在AS中,前端的界面布局文件是在生成的應用程序框架項目的res資源目錄的layout子目錄中,文件名為activity_main.xml(創建新項目時可以改名字),可以用界面化的和XML文件共同管理。如果要調用資源文件,就使用R.java的R類,把res目錄中的資源與id編號進行映射,用id號進行資源管理。

 

1.布局文件的規范

(1)布局文件作為項目的資源存放在res\layout目錄下,是一個xml文件,默認文件名為activity_main.xml。

(2)布局文件的根節點通常是一個布局方式,在根節點內可以添加組件作為結點。

(3)布局文件的根節點必須包含一個命名空間,為了與其他項目進行分離。

如下:

xmlns:android="http://schemas.android.com/apk/res/android"

(4)如果要實現Java程序中控制界面的組件,則必須為界面文件的組件定義一個id,也就是通過id把資源文件以及組件引用過來進行控制。

組件定義格式如下:

android:id="@+id/<組件id>"

 

2.布局文件常用的重要屬性值

(1)設置組件大小的屬性值

wrap_contont:強制性地使視圖擴展以顯示全部內容,完整顯示其內部的文本和圖像,根據組件內容的大小來決定組件的大小。

match_parent:Android2.2以上和fill_parent通用,填充在容器的所有空間。

fill_parent:強制性地使構件擴展,以填充布局單元內盡可能多的空間,就是強制性讓它布滿整個屏幕。

(2)設置組件大小的單位

px(pixels):像素,即屏幕上的發光點。

dp(或dip,全稱為device independent pixels):設備獨立像素,一種支持多分辨率設備的抽象單位,和硬件相關。

sp(scaled pixels):比例像素,設置字體大小。

(3)設置組件的對齊方式

在組件中由"android:gravity"屬性控制組件的對齊方式,其屬性有上(top),下(bottom),坐(left),右(right),水平方向居中(center_horizontal),垂直方向居中(center_vertical)等。

 

3.常見的布局

有關用戶界面的布局有下面常見的七種布局。

線性布局(LinearLayout),幀布局(FrameLayout),表格布局(TableLayout),相對布局(RelativeLayout),絕對布局(AbsolateLayout),網格布局(GridLayout),約束布(ConstraintLayout)。而相對布局已使用約束布局替代,絕對布局難以實現多分辨率適配,不建議使用。

(1)線性布局(LinearLayout)

特點:將組件按照水平或垂直方向排列。

特殊屬性:由"android:orientation"屬性控制排列方式,其屬性值有水平(horizontal)和垂直(vertical)兩種。

實例:按水平和垂直方向線性布局顯示幾個按鈕。

水平:

 結果如下:

 

 

豎直方向的結果如下:

 

(2)幀布局(FrameLayout)

特點:將組件放置在左上角位置,當添加多個組件時后面的組件將遮蓋前面的組件。幀布局會按照添加順序層疊在一起,默認層疊在左上角位置。

特殊屬性:用"layout_gravity"可以設置層疊的位置。

實例:將不同大小的圖片進行層疊,這里引用圖片的方法可以在用戶界面,也可以在源程序控制文件中。

運行結果如下:

(3)表格布局(TableLayout)

特點:將頁面分為由行,列構成的單元格。

特殊屬性:表格的列數由android:shrinkColumns定義,例如android:shrikColumns = "0,1,2"表示表格為三列,編號為1,2,3。

  • android:collapseColumns:設置需要被隱藏的列的序號

  • android:shrinkColumns:設置允許被收縮的列的列序號

  • android:stretchColumns:設置運行被拉伸的列的列序號

實例:實現類似手機待機界面的六行四列的表格。

首先,將所要顯示的圖片添加到res資源目錄文件drawable-hdpi下,具體過程如下:

選擇Project視圖,app—>src—>res—>右鍵new resource directory—>選擇resource type (drawable)->density,根據需要,選擇合適的分辨率,這里選擇high density確認后

會生成一個資源文件夾drawable-hdpi—>將圖片文件復制到文件夾里。

 

 然后代碼如下:

運行結果如下:

 (4)相對布局(RelativeLayout)

特點:相對其他組件位置進行布局,通過相對定位的方式讓控件出現在布局任意位置 。在相對布局中,通過指定id關聯其他組件與之右對齊,上下對齊或以屏幕中央方式來排列組件。

特殊常見屬性:

    相對於父元素給控件布局(屬性值為true或false)
    android:layout_centerHrizontal  水平居中 
    android:layout_centerVertical 垂直居中 
    android:layout_centerInparent    相對於父元素完全居中 
    android:layout_alignParentBottom 位於父元素的下邊緣 
    android:layout_alignParentLeft   位於父元素的左邊緣 
    android:layout_alignParentRight  位於父元素的右邊緣 
    android:layout_alignParentTop    位於父元素的上邊緣 
    android:layout_alignWithParentIfMissing  如果對應的兄弟元素找不到的話就以父元素做參照物 

    屬性值必須為id的引用名“@id/id-name” 
    android:layout_below      位於元素的下方 
    android:layout_above      位於元素的的上方 
    android:layout_toLeftOf   位於元素的左邊 
    android:layout_toRightOf  位於元素的右邊 

    android:layout_alignTop   該元素的上邊緣和某元素的的上邊緣對齊 
    android:layout_alignLeft  該元素的左邊緣和某元素的的左邊緣對齊 
    android:layout_alignBottom 該元素的下邊緣和某元素的的下邊緣對齊 
    android:layout_alignRight  該元素的右邊緣和某元素的的右邊緣對齊 

    給屬性賦予像素值
    android:layout_marginBottom      底邊緣的距離 
    android:layout_marginLeft           左邊緣的距離 
    android:layout_marginRight         右邊緣的距離 
    android:layout_marginTop           上邊緣的距離

實例:生成一個組件排列的應用程序。

 

運行結果如下:



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM