1.4 使用UIWebView載入HTML和Gif動畫 [iOS開發中的神兵利器]
阿新 • • 發佈:2019-02-16
1. 本節課將為您演示,如何使用網頁檢視載入網頁程式碼和Gif動畫。此時我們已經在專案中匯入了一張Gif圖片。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-8bdcec63baef4395.png)
2. 然後在左側的專案導航區,開啟檢視控制器的程式碼檔案。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-06d2b56f2c1e5edc.png)
3. 現在開始編寫程式碼,首先實現使用網頁檢視載入網頁程式碼的功能。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-66a4bc4459c71abf.png)
4. 新增一個網頁檢視物件,作為當前類的屬性。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-d761cd9af43768df.png)
5. 獲得當前裝置的螢幕尺寸資訊。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-f1e889261c92e74e.png)
6. 然後建立一個矩形的顯示區域。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-7db8ac1818d3ec3c.png)
7. 初始化一個網頁檢視物件,並以矩形區域作為其顯示區域。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-ec124630eee5204b.png)
8. 設定網頁檢視的背景顏色為無色。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-ae84496d96801810.png)
9. 將網頁檢視新增到當前檢視控制器的根檢視。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-3718f36ca3972c7b.png)
10. 初始化一個按鈕控制元件,並設定其顯示區域。當用戶點選該按鈕時,將載入並渲染一段網頁程式碼。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-c2caa6662ed51566.png)
11. 設定按鈕在正常狀態下的標題文字。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-06e9404a598ef688.png)
12. 設定按鈕的背景顏色為棕色。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-d54cb2e8ceff3d44.png)
13. 給按鈕繫結點選事件。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-39c4a239d3890dc5.png)
14. 接著建立另一個按鈕,當用戶點選該按鈕時,將載入專案中的Gif動畫。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-1b6ed7761b3a4e77.png)
15. 設定按鈕在正常狀態下的標題文字。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-0d787d5a8c1226cb.png)
16. 設定按鈕的背景顏色為棕色。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-ee5836a5d765e44b.png)
17. 給按鈕繫結點選事件。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-0a9af336b95114d9.png)
18. 然後將兩個按鈕,依次新增到檢視控制器的根檢視。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-0997f0e1eb314594.png)
19. 新增一個方法,用來響應第一個按鈕的點選事件。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-c3ae26c7b9db6490.png)
20. 初始化一個字串常量,用來表示一段網頁程式碼。該網頁程式碼用來顯示一行文字,並設定文字的顏色為紅色,尺寸為20畫素。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-36c6fa3689d8e580.png)
21. 初始化另一個字串常量 ,用來表示一段網頁程式碼。該網頁程式碼用來顯示一行文字,並設定文字中電話號碼的顏色為紅色。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-c5dd8d8bf31b0c5b.png)
22. 初始化第三個字串常量 ,該網頁程式碼用來顯示一行文字,並設定文字加粗的視覺樣式。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-ca3a7a079b3212e2.png)
23. 將三個字串拼接為一個字串,該字串將作為網頁檢視的內容。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-dac4898a0a9d6320.png)
24. 設定網頁檢視的檢測型別,網頁檢視將會突出顯示符合該型別的內容。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-1145a014ed4d77a3.png)
25. 呼叫網頁檢視的載入網頁程式碼字串的方法,載入剛剛拼接的字串常量。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-3453fa7aed78ff77.png)
26. 新增第二個方法,用來響應第二個按鈕的點選事件。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-26d083866736ac0f.png)
27. 獲得專案束的主目錄,使網頁檢視可以載入專案主目錄下的資源。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-476151972b08d7ec.png)
28. 使用相同的方式,通過呼叫網頁檢視的載入網頁字串的方法,載入主目錄中的動畫檔案。接著點選[編譯並執行]按鈕,啟動模擬器預覽專案。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-e48447c95dec873e.png)
29. 在彈出的模擬器中,首先點選第一個按鈕,網頁檢視將載入並渲染您之前設定的網頁程式碼,同時觀察網頁中的文字的視覺樣式。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-962ea94bc6296937.png)
30. 接著點選載入動畫按鈕,網頁檢視將載入並播放專案中的Gif動畫。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-549a7c92229ae4f3.png)
31. 觀察動畫的播放效果,然後點選左上角的[停止]按鈕,關閉模擬器並結束本節課程。
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-cb3fe070db960143.png)
![iOS開發中的神兵利器](http://upload-images.jianshu.io/upload_images/5981183-bf644eaff2db98cb.png)
本文整理自:《app開發中的神兵利器》,真正的[手把手]教學模式,用最快的速度上手iOS開發,蘋果商店App Store免費下載:https://itunes.apple.com/cn/app/id1209739676,或掃描本頁底部的二維碼。課程配套素材下載地址:資料下載