iOS開發技巧系列---ViewChaos我的UI調試之道（效果篇）
首先因為工作較忙，我有快一個月沒有更新文章了，現在事情不多了，就給大家獻上最重量級的文章。
本來我是打算寫詳解KVO這篇文章的，但是我突然看到網絡上出現了很多關于KVO的文章，心想于是就算了，就先寫這個吧。
UI調試是每一個APP開發者或者前端開發者必備的技術。相對來說，iOS開發者調試UI是最苦逼的。
無論是用Storyboard&XIB或者是純手寫代碼實現UI，都要經過修改代碼->編譯生成->啟動APP，進入指定頁面后才能看到效果。整個過程需要等待一定的時間。而且反復修改編譯后才能達到自己想要的效果，浪費時間。同時如果你是用代碼生成UI的話，想要在復雜的頁面里找到每個視圖控件對應的代碼也比較麻煩(目前我的所有項目都是用純代碼寫的)。有一天無意中發現了一個叫RunTrace的開源項目RunTrace，它是一個IOS動態調試UI的開源項目，做得非常的有新意。并且也能夠解決一些用純代碼寫UI的疼點。我對這個項目非常有興趣，我就用Swift重寫一次，并且加入了自己的一些功能，使用iOS的UI調試更加方便了。正如標題，它叫ViewChaos，請大家賞臉給個Star,我將繼續寫更好的文章和開源項目。
各平臺的UI開發概況
在這里我簡單給大家分析一下各平臺的UI開發技術，目前最主要有：HTML&CSS，Winform&WPF,Universal Windows APP, Android,iOS這幾個平臺和開發技術，
Web界面的開發HTML&CSS
- Web界面是以HTML標簽的形式構建UI，它是HTML語言的最基本的單位。
- 用尖括號包圍的關鍵詞如<div>來表示UI元素，通常是成對出現。
- 如果需要在容器標簽里放其他HTML單位，需要放在標簽對里面。
- 一些HTML元素屬性，放在第一個HTML標簽里。以鍵值對的形式存在，比如type = 'text'。
- 使用Form來提交表單，Http(HTTPS)協議和服務器通訊。
- 通常通過CSS來控制HTML元素的外觀。
- 通常通過Javescript來控制HTML元素。采用Ajax技術異步通信，實現局部刷新等。
這里就不給示例了，總是來說前端Web開發博大精深，新的技術框架層出不窮，當一個前端工程師也不容易。
Windows桌面應用程序開發Winform&WPF
- Winform是XP時代的Windows 桌面程序開發技術。
- 采用C#語言開發UI和邏輯，沒有使用標簽語言寫UI。
- 采用事件驅動方法。
- Winform現在基本被淘汰了。
Winform是上一代的主流桌面應用程序開發開發技術，這個我從來沒有用過，現在也基本不再使用了。 - WPF是新一代微軟圖形界面開發技術。它是隨著Windows Vista推出的。.NET Framework 3.0的一部分。它提供了統一的編程模型、語言和框架，真正做到了分離界面設計人員與開發人員的工作；同時它提供了全新的多媒體交互用戶圖形界面。
- 采用XAML標簽式語言開發UI，可以在Expression Blend可視化設計開發。美工也可以輕易上手。XAML支持DataBind, Data(Item)Template, Style, Storyboard, Rescoure,自定義控件等技術，開發速度快。
- 支持事件驅動(Code behind)或者數據驅動(MVVM)開發模式
- 使用GC回收垃圾，XMAL和C#將編譯成CLR中間運行語言，效率比較低，占用內存大
WPF的技術理念非常先進，開發過程也非常友好，也可以做出極為絢麗的界面，可是開發出來的應用體積較大，運行效率比較低，占用內存大，所以沒有普及開來。(大部分我們常見的桌面應用都是C&C++開發)但是因為開發效率高，所以很多企業內部經常使用該技術。
Windows 10上的通用應用Universal WIndows APP(UWP)
- Universal Windows App（UWP）也就是通用Window App 是微軟最新的圖形應用開發技術，它是基于WPF技術演進而來的。
- UWP繼承了所有WPF的優點，還可以使用C++和HTML&Javascript來開發，和WPF編譯成中間代碼不同，UWP直接將代碼編譯成機器碼直接運行，極大的提高了效率。一次開發編譯，可以同時在Windows 10,Windows 10 Mobile, XBOX，物聯網IoT設備等其他Windows平臺上運行
- 采用和iOS APP一樣的沙盒機制，一樣也有電話本，傳感器，地圖，推送等API。
- 采用響應式布局，可以適配任何分辨率等。
- 大量使用異步API，保證界面響應為最高級別。
我開發UWP并不多，但是我接觸WPF的時間夠長，所以UWP上手毫無壓力。相比WPF運行在.NET運行時里，UWP是可以編譯成Native Code運行，所以UWP運行效率更高，UI更為流暢。它是目前微軟最為主推的開以技術。Android
- 略，我不會開發Android
iOS
- iOS應用是基于Cocoa框架上的，早期的Cocoa是用來開發Mac 應用的，后來加入了Cocoa touch層API用于iOS。
- 采用XIB或者Storyboard可視化搭建UI，也可以使用手寫純代碼來開發UI。
- 采用Objective C 或者 Swift語言開發邏輯。
- 在Iphone5 加入多種分辨率后，蘋果引入了Autolayout自動布局，它是一種基于約束的，描述性的布局系統。
- 默認嚴格遵守MVC設計模式，現以也可以使用MVVM開發框架。
- 采用ARC實現了自動內存管理。
iOS開發技術還有許多要點，這里就省略了，相信看到這篇文章的人都比較熟悉。
各平臺UI開發小結
- 從上面可以看出，對于UI構建，都是采用類HTML語言。一個HTML標簽表示一個View元素。它即可以當其他View的容器，也可以當內容或者數據的容器。可以用獨立的Style文件來表示樣式，也可以直接放在標簽的屬性里面。每個標簽都可以有Name或者id屬性來讓js或者其他語言直接操作。
- iOS其實也和上面的UI開發范式差不多，Storyboard內部其實也是一個XML文件，只不過我們不能直接編輯，只能可視化設計和通過代碼操作。
手寫代碼和Stortboard的優劣
現在iOS UI最主流的UI開發主要分兩種，一是用Stroyboard(Xib也可以用，但是已經被Stroyboard取代)，二是用純代碼手寫UI，可以對目前最主流的APP包進行分析，參考xib 使用調研情況，可見目前這兩種開發方式都很主流。總的來說，兩者有如下優劣勢。
StoryBoard優勢
+ 開發界面所見即所得，可以快速通過拖拽構造界面。也可以明確地知道各個ViewController之間的轉換關系
+ 代碼量少，開發周期短
+ 關鍵是已經成為新建項目時候的默認配置，代表著蘋果以后的方向和重心
遺憾
+ 很難多人協作
+ ViewController的重用和自定義的view的處理
+ 需要很大的顯示器
手寫代碼UI優勢
+ 適合大型項目大規模使用，利于版本管理、追蹤改動以及代碼合并
+ 最好的代碼重用性
遺憾
+ 慢，開發周期長，維護代碼復雜
+ 自動布局AutoLayout困難
手寫代碼和Stortboard選擇建議
實際開發過程中，完全不需要全程使用一種開發方式，可以具體情況來選擇性的使用 storyboard或者手寫代碼，下面是建議：
- 對于復雜的、動態生成的界面，建議使用手工編寫界面。
- 對于需要統一風格的按鈕或UI控件，建議使用手工用代碼來構造。方便之后的修改和復用。
- 對于需要有繼承或組合關系的 UIView 類或 UIViewController 類，建議用代碼手工編寫界面。
- 對于那些簡單的、靜態的、非核心功能界面，可以考慮使用 xib 或 storyboard 來完成。
ViewChaos解決了什么問題
上面籠統地講了這么多關于UI開發的情況，下面回到正題。ViewChaos是怎么解決部分用純代碼開發iOS UI的不便的。目前我在用代碼寫uI中存在以下問題
- 效率低，速度慢，手寫代碼生成UI比拖控件要慢很多。
- 不能所見即所得，寫好后需要編譯-> 運行-> 進入當前頁面 才能看到效果，而經常需要反復調試才能過到所要的效果,極為浪費時間。
- 機器里面的UI控件定位到自己寫的代碼不夠方便，如果頁面復雜的話非常難找
- 在Storyboard里使用Autolayout是大勢所趨，但手寫代碼實現Autolayout非常麻煩。
VIewChaos主要在一定程度上解決了第二點和第三點問題，第四個問題無解，不過可以實現可視化查看各View的約束
ViewChaos有以下特點
- 集成方便，不用寫一行代碼，把文件挺進你的項目就行了，而且只有在Debug模式有效，Release模式將自動禁用。
- 給View添加了Name屬性，這樣就能知道哪個View是由哪些代碼生成的，解決第三個問題。
- 添加了搖一搖功能，可以選擇放大鏡模式，可以放大頁面的元素，還可以顯示每個點的顏色。
- 搖一搖還可以選擇邊框模式，現在實時顯示所有UI空間的邊框，并且可以截圖，透明模式可以顯示所有UI空間的透明度。
- 可以獲取View的基本信息，以及它的所有的父View和子View，同時還可以選擇。
- 可視化顯示Autolayout。
- 可以實時追蹤View的狀態。
- 監測內存泄露。
- 可以實時修改View的Frame, Font,border,tintColor,background,等屬性，這個一定程度上解決了第二個問題。
- 可以生成代碼，這個用處不大，但是也是可以參考的。
ViewChaos的安裝和使用
ViewChaos的安裝極為方便，有兩種安裝方式，如果你不想用Cocoapods，只想拖文件，按照以下步驟就行：
- 第一步：將這五個文件(ViewChaos.swift,ViewChaosInfo.swift,ViewNeat.swift，ZoomView.swift,DrawView.swift)拷貝到你的項目里。
- 第二步：選擇 target-> 你的項目 -> Build Setting-> 搜索 'swift compile'-> 選擇 'Other Swift Flags' -> 選擇 DeBug option -> 添加 -DDEBUG command (這個能讓此工具僅工Debug模式有效)
- 第三步:如果你找不到Other Swift Flags選項，說明你的項目是純objective-c，那么你需要手動添加一個swift文件到你的項目，這時XCode會讓你添加一個header bridge文件，這時侯選擇是，再做第二步操作.】
- 第四步：開始使用。
如果你想用Cocoapods，就更簡單了：
- 第一步：pod 'ViewChaos'，再安裝就行。
- 第二步：選擇Pods項目->選擇 target-> ViewChaos -> Build Setting-> 搜索 'swift compile'-> 選擇 'Other Swift Flags' -> 選擇 DeBug option -> 添加 -DDEBUG command (這個能讓此工具僅工Debug模式有效).
- 第三步：開始使用。
加上-DDEBUG
添加-DDEBUG就OK了，啟動你的項目，你就可以看到你的APP里面多了一個V的綠色小圓，同時你的APP也有了搖一搖功能。下面我用圖片和文字來給讀者展示ViewChaos的各種功能，建議讀者下載Demo用真機或者模擬器親自試試。
搖一搖呼喚出菜單
搖一搖功能里面一共有三個小功能，分別是放大鏡，顯示邊框和顯示透明度。下面一個一個講解
放大鏡模式
放大鏡模式比較簡單，當啟用后，用手指觸摸屏幕，它會放大你手指下的點（只支持單點），上面綠色區域可以顯示該點的坐標和顏色值。
邊框模式
邊框模式
邊框模式也比較簡單，進入該模式后，所有UI控件的邊框都會用紅色的線顯示出來，你可以在上面畫畫，當啟用截圖時，你可以畫個框然后再把該頁面保存到相框里(目前用處不大)，
透明模式
透明模式更簡單了，可以直接現實頁面里的UI控件的透明情況，越透明越紅。
上面就是搖一搖的全部功能了，注意這個可能和你的項目的搖一搖功能相沖突，目前還沒有提供關閉功能，以后版本會提供的
下面就是ViewChaos的打功能了，幫你定位View并獲取View的信息
移動小球
用手指觸摸小球后，小球會跟隨手指在屏幕上移動，同時小球會抓去位于小球下的View的信息，并的屏幕頂部顯示出來
View信息
View信息
點擊頂部的綠色區域后，會出現一個表格，里面從下到下的菜單分別是基本信息，SuperView,SubView,約束和View追蹤功能。SuperView可以展示該View層級上所有的View，而SubView可以展示該View下的一層的所有的子View，也可以點開它。
View約束
該功能可以顯示View的約束(如果存在的話，也就是說，你是用AutoLayout來布局的)。
View約束
該功能可以追蹤View的狀態，比如frame，tag，center，等，當你點開始，ViewChaos就會監視該View的各種屬性，如果該View的屬性發生的改變，ViewChaos會記錄下來并保存,然后在下面顯示出來。
后面的功能就是屬于改變View的各種屬性，它可以讓你調整View，直到符合你的要求為止，然后你可以生成代碼，從里面選擇出你需要的代碼。
從表里面點Control，就會出來一個控制器，這個控制器可以改變View和一些屬性，從左到右依次是位置 大小 字體 邊框 顏色 代碼
下面一個一個講解
View位置
View位置
第一個功能就是改變View的位置，比較簡單
View大小
第二功能就是改變View的大小，上面有兩個按鈕，一個是控制左上，一個是控制右下。
View字體
第三個功能就是改變View里面字體的大小，目前只對Button,Lable,TextFiled和TextView有用。其他的無效
View邊框
View邊框
第四個功能就是改變View的邊框，搖桿上面有三個子菜單，分別是顏色，邊框和弧度，選擇哪種就能控制哪種。
View顏色
View顏色
第五個功能就是改變View的顏色屬性，如果存在的話。分別是前景色，背影色和主題色。
View顏色
最后一個功能就是生成代碼啦，將所有的屬性調整好之后，點一下code就能生成下面的代碼。你可以從里面選擇出有用的部分。
- 里面部分功能說明，在調整VIew位置和大小時，如果想讓View的變化更慢一些，那么可以修改scale的值，5是最快的，1是最慢的。
- 如果你想做特別微笑的調整，那么可以點Precise按鈕啟動精確模式，想退出再點一下就行.
- Reset(重設)按鈕會將View回復成原來的狀態.
- Close(關閉)按鈕會關閉控制面板.
以上差不多就是VIewChaos的全部功能，要這里還是建議讀者親自去下載Demo試用一下。ViewChaos基本上能夠滿足大部分UI的調試，但是也有的屬性還不能看到和修改，另外還希望讀者給出建議，這些都是以后的改進方向。
其實最理想的UI開發方式就是把大部分UI交給美工來設計，程序員只要寫邏輯就行了。很遺憾的是，目前我還沒有發現有任何一項技術可以過到這個要求，但最為接近的應該是基于WPF的MVVM開發框架，MVVM可以最大限度的實現UI和邏輯的分離，美工用Expression Blend來設計UI，程序員則同時開發邏輯，再后合并即可。有興趣的讀者可以去找找基于WPF的MVVM資料看看。
文／黑暗中的孤影（簡書作者）