iOS10 UI教程視圖調試

iOS10 UI教程視圖調試

iOS10 UI教程視圖調試，當視圖很複雜的時候，層次結構就不會很簡單了。Xcode能夠經過視圖（View）調試幫助開發者解決層次結構複雜的問題。視圖調試是在Xcode 6中引入的。經過視圖調試，開發者能夠看到當前的視圖層次結構變爲了一個可交互的三維原型視圖，如圖1.21所示。該三維視圖除了展現app的視圖層次外，還展現每一個視圖的位置、順序和視圖尺寸，以及視圖間的交互方式。

圖1.21  三維原型視圖

【示例1-10：ViewHierarchy】如下將實現視圖調試。具體的操做步驟以下：

（1）添加image.png圖像到建立的項目中。

（2）打開Main.storyboard文件，對主視圖進行設計，效果如圖1.22所示。

圖1.22  主視圖的效果

須要添加的視圖以及對它們的設置如表1-4所示。

表1-4  對視圖對象的設置

視圖	設置
Image View	Image：image.png 位置和大小：(0, 0, 375, 667)
Text View	Text：        蒲公英的種子靠風來傳播，只是藉助那麼小小的力量就得以繁衍生息，它大概也是惟一可以飛翔的花了吧。 Background：透明色 位置和大小：(31, 108, 312, 68)
Switch	位置和大小：(294, 217, 51, 31)

（3）運行程序後，啓動視圖調試，啓動視圖調試的方式有兩種：一種是從菜單中選擇Debug|View Debugging|Capture View Hierarchy來啓動視圖調試；另外一種方式是在運行app過程當中，按下底部的Debug View Hierarchy 按鈕，如圖1.23所示。

圖1.23  啓動視圖調試

（4）啓動視圖調試後，Xcode會對應用程序的視圖層次結構拍一個快照並展現三維原型視圖來探究用戶界面的層級，如圖1.24所示。

圖1.24  視圖調試

注意：在Xcode的調試區有9個視圖調試過程當中要用到的按鈕和滑塊兒，如圖1.25所示。

圖1.25  9個視圖調試過程當中要用到的按鈕和滑塊兒

這9個按鈕和滑塊兒從左到右排序的介紹以下：

• 調整視圖間距：調整不一樣視圖間的間距。
•  展現被剪切的內容：當前展現視圖中被剪切的部分。
•  展現約束：展現選中視圖的約束。
• 調整查看模式：選擇性地展現3D渲染透視圖，好比僅展現內容，僅展現框架以及同時展現內容和框架。
• 重置查看區域：將3D渲染透視圖恢復至默認狀態。
• 縮小：縮小3D渲染透視圖。
• 恢復：將3D渲染透視圖恢復至默認尺寸。
• 放大：放大3D渲染透視圖
• 調整可視視圖範圍：隱藏視圖或展現視圖，一步步解析3D渲染視圖，向左或者向右滑動滑塊兒有相反的效果。

（5）使用重置查看區域按鈕，重置查看區，此時會看到如圖1.26所示。

圖1.26  重置查看區

（6）使用調整視圖間距滑塊控件將視圖間距調整爲最大，此時會看到如圖1.27所示的效果。

圖1.27  調整視圖視圖間距

此時會看到三維原型視圖，而且三維視圖除了展現app的視圖層次外，還展現每一個視圖的位置、順序和視圖尺寸，以及視圖間的交互方式。當開發者拖拽這個三維視圖時，能夠看到這個三維視圖的各個方面。

 

相關閱讀：iOS10 UI教程層次結構的事件