界面布局 界面布局(Layout)是用戶界面結(jié)構(gòu)的描述,定義了界面中所有的元素、結(jié)構(gòu)和相互關(guān)系 聲明Android程序的界面布局有兩種方法 使用XML文件描述界面布局 在程序運行時動態(tài)添加或修改界面布局 用戶既可以獨立使用任何一種聲明界面布局的方式,也可以同時使用兩種方式 使用XML文件聲明界面布局的特點 將程序的表現(xiàn)層和控制層分離 在后期修改用戶界面時,無需更改程序的源代碼 用戶還能夠通過可視化工具直接看到所設(shè)計的用戶界面,有利于加快界面設(shè)計的過程,并且為界面設(shè)計與開發(fā)帶來極大的便利性 線性布局 線性布局(LinearLayout)是一種重要的界面布局中,也是經(jīng)常使用到的一種界面布局 在線性布局中,所有的子元素都按照垂直或水平的順序在界面上排列 如果垂直排列,則每行僅包含一個界面元素 如果水平排列,則每列僅包含一個界面元素 創(chuàng)建Android工程 工程名稱是LinearLayout 包名稱是edu.hrbeu.LinearLayout Activity名稱為LinearLayout 為了能夠完整體驗創(chuàng)建線性布局的過程,首先刪除Eclipse自動建立的/res/layout/main.xml文件,然后建立用于顯示垂直排列線性布局的XML文件 右擊/res/layout文件夾 選擇New → File打開新文件建立向?qū)?/p> 文件名為main_vertical.xml 保存位置為LinearLayout/res/layout 雙擊新建立的/res/layout/main_vertical.xml文件,Eclipse將打開界面布局的可視化編輯器 可視化編輯器頂部是資源配置清單,可以根據(jù)手機的配置不同選擇不同的資源,主要用來實現(xiàn)應(yīng)用軟件的本地化 下部左側(cè)是界面布局和界面控件,用戶可以將需要的布局和控件拖拽到右面的可視化界面中,并修改布局和控件的屬性 右側(cè)是可視化的用戶界面,能夠?qū)崟r的呈現(xiàn)用戶界面,但對無法正確顯示中文。左下角的“Layout”和“main_vertical.xml”能夠在可視化編輯器和XML文件編輯器之間切換 在Eclipse右邊的Outline中,雙擊LinearLayout,打開線性布局的屬性編輯器 線性布局的排列方法主要由Orientation屬性進行控制,vertical表示垂直排列,horizontal表示水平排列 選擇Orientation的值為vertical,表示該線性布局為垂直排列 缺省情況下,Layout height的值為wrap_content,表示線性布局高度等于所有子控件的高度總和,也就是線性布局的高度會剛好將所有子控件包含其中 將Layout width屬性的值改為fill_parent,表示線性布局寬度等于父控件的寬度,就是將線性布局在橫向上占據(jù)父控件的所有空間 打開XML文件編輯器,main_vertical.xml文件的代碼如下 第2行代碼是聲明XML文件的根元素為線性布局 第4、5、6行代碼是在屬性編輯器中修改過的寬度、高度和排列方式的屬性 用戶在可視化編輯器和屬性編輯器中的任何修改,都會同步的反映在XML文件中;反之,也是如此 將四個界面控件TextView、EditText、Button、Button先后拖拽到可視化編輯器中 所有控件都自動獲取控件名稱,并把該名稱顯示在控件上,如TextView01、EditText01、Button01和Button02 修改界面控件的屬性 所有界面控件都有一個共同的屬性ID ID是一個字符串,編譯時被轉(zhuǎn)換為整數(shù),可以用來在代碼中引用界面元素,一般僅在代碼中需要動態(tài)修改的界面元素時才為界面元素設(shè)置ID,反之則不需要設(shè)置ID 從可視化編輯器中發(fā)現(xiàn),界面控件的中文字符都顯示為“□”,因為可視化編輯器還不能很好的支持中文字符 打開XML文件編輯器查看main_vertical.xml文件代碼,發(fā)現(xiàn)在屬性編輯器內(nèi)填入的文字已經(jīng)正常寫入到XML文件中,例如第11、20、25行代碼 將LinearLayout.java文件中的setContentView(R.layout.main),更改為setContentView(R.layout.main_vertical)。運行后的結(jié)果如圖 建立橫向線性布局與縱向線性布局相似,只需注意以下幾點 建立main_ horizontal.xml文件 線性布局的Orientation屬性的值設(shè)置為horizontal 將EditText的Layout width 屬性的值設(shè)置為 wrap_content 將LinearLayout.java文件中的 setContentView(R.layout.main_vertical) 修改為setContentView(R.layout.main_ horizontal) |
|