承 Flash Builder 4 教學其之六的教學,你應該可以完成如下圖畫面,若有困難通常是沒有弄清楚如何正確的選取你要進行排版的元件所致.



承上例,你會發現這張圖好像有點不那麼正規,若我們把中間這兩個按鍵移到右邊去,再把下面那個標籤移到右下角去是不是會美觀些?
好吧. 那麼動手作吧. 若你實在不知道怎麼讓這樣做出這樣的版面,那麼你參考底下的圖把程式輸入進去就可以了.

你可能會發現你把程式輸入進去後,也完成了執行是沒有問題的但是版面就是歪的. 沒錯! 本來我給的範例就是歪的.
這樣吧. 你先試著進入視計視圖(忽然我覺的翻譯成視圖有點怪怪的,以後我會統稱設計視野)好好的把玩一下試著把那兩個按鍵
拉到右邊去,而且要跟最左邊的按鍵一樣高度. 底下留一點空間看起來較美觀, 中間的標籤拉到右下角去.

在你把玩一番後,可能拖曳按鍵到定會是比較容易的事,可是那個標籤怎麼拖也拖不動簡直不動如山,那麼請仔細看一下底下的圖

仔細觀察這張圖的右邊,你明明如上圖所示滑鼠游標是停在要點選的標籤上面,可是右邊的屬性面版卻顯示你選中的元件是s:Group 容器.當然你會無法拖曳因為這就是之前提到的難以選取某些元件的問題.

其實這樣問題在爾後使用設計視野會經常碰到,解決的方法就是有效的利用大綱視野,請參考下圖



在大綱視野這張圖片,應該可以很清楚的看出各個容器,按鍵,標籤等的排列方式. 在設計視野時搭配左下角的OUTLINE(大綱視野)
你就能正確點選到你要修改或是拖曳的元件,這一點很重要你也會常常利用到此功能在設設UI排版時.

接下來我們回頭看那兩個不太上相的按鍵,如何利用條件限制式使其對齊.既然我們要仿效左邊的按鍵,那麼我們先來觀察一下左側的按鍵是怎麼設定的,那麼先點選左上的按鍵. 再把右側的功能視窗拉到最底下(因為條件限制式就在最底下) 參考一下下圖


注意看到這部份:


在屬性面版的右下角就是Constraints (這個就是條件限制式),先把它晾在一邊不理它,往上看是Size and Position 這是用來調整你所選取的元件的寬度及高度還有水平位置x 及 y 垂直位置. 你看到的左側這個按鍵Flex 是X:5 Y:5 ,你可以在設計視野試著單獨改變
其中一項的值來觀察它們的變化來了解這些設定值的作用,但是X 跟 Y 以外的值暫時讓它保持預設值(什麼數值都保留空白即是預設值)

那麼,你已經知道Y 是垂直位置,那麼也把其它兩個按鍵改為Y=5 看看, 看到執行結果了吧. 三個按鍵都是同一垂直位置了,美觀多了.
接下來解說條件限制式. 看到下圖的條件限制式應該有注意到在那個方框外有六個可以核選的方框吧.


你先選取Flex 這個按鍵,然後直接勾選上面那一排的最左則的勾選框,跟左側那一排的最上面的勾選框. 這作法就是把按鍵以左上的限制條件式來對齊. 你會發現這個設置跟之前的x:5 y:5 根本一樣嘛. 是沒錯, 只是一個是你用手動拖曳或透過程式視野來改動數值, 而這個卻是利用條件限制式來對齊



有一點要提醒你,你在條件限制式輸入的數值,記得要按一下ENTER,這樣它才會如實反映在設計視野中. 有一個重要的觀念要提示你那就是限制條件式的對齊方式並不是以水平位置或垂直位置中的其它元件來對齊.而是以父元素作為對齊的對象. 以這個例子來說這三個按鍵的父元素是誰? 看一下大網視野自然不言可喻

Copyright 2010 Yita電腦調校日誌
Lunax Free Premium Blogger™ template by Introblogger