1. 開啟Eclipse 之後點選res裡面layout, 滑鼠左鍵雙擊activity_main.xml

然後點選右邊下方Graphical Layout, 就可以看到圖型化的Layout

而Palette下方的圖形按鈕則是一些常用的物件, 可以藉由拖曳的方式放到layout上

而整個layout可以想像成是整個版面的配置容器

01.png  

 

2. 在滑鼠左鍵點選activity_main.xml, 就可以切換到xml的模式,

它與圖形介面兩者是一體兩面的關係, xml為主, 圖形介面是個輔助工具

xml的語法基本上是以<名稱> 內容 </名稱> or <名稱 內容 />來代表一個東西

在此就先不詳細敘述

02.png  

 

3. 再切回圖形介面, 可以看到小綠人右方有個數字, 這個數字就是以哪個版本的版面功能來使用

而右上方可以修改你看到的視窗比例, 接著滑鼠左鍵雙擊預設Hello world字樣

03.png  

 

4. 就會切換到xml模式, 其中反白的部分就是當初雙擊左鍵對應的xml碼

04.png  

 

5. 再回到圖形介面, 這時用滑鼠左鍵點選Button的圖形後,

左鍵按住拖曳拉到右邊圖形上適當位置放開

05.png  

 

6. 你會發現板面上多出了一個Button, 然後右上角的layout也可以看到多了一個button1

這時用滑鼠左鍵點選剛出現的Button圖形, 可以看到右下方的Properties出現對應的值

其中Properties代表的是屬性, 右邊的功能bar可以自行點選試看看

而屬性下方的Id是該物件的識別碼, Text則是顯示的內容

當然還有其他的屬性可以做調整

06.png  

 

7. 此時試著修改Text的內容為Test, 按下Enter鍵後會發現左邊Button的字樣改變了

然後滑鼠左鍵雙擊Test的圖樣

07.png  

 

8. 就會切換到xml模式, 其中id是之後再code裡面要呼叫到該物件所需要的識別碼

layout_width, layout_height代表的是該物件的寬高

layout_marginLeft, layout_marginTop是外間距

text是代表文字內容

基本上大部分的屬性值都是選用的, 也就是刪掉也是可以運作,但可能配置會改變

 細節可以去學Html5 和CSS相信會有更深的了解

08.png  

 

9. 按下左方的儲存, 接著按下Run

09.png  

 

10. 就可以虛擬機器上上看到剛剛的成果了

10.png  

arrow
arrow
    全站熱搜

    RX1226 發表在 痞客邦 留言(0) 人氣()