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教程層次結構的事件