iOS10 UI設計基礎教程

大學霸發表於2016-11-10
iOSUI

iOS10 UI設計基礎教程

介紹：本教程針對iOS初級開發人員，基於iOS 10系統，使用Swift 3.0語言講解如何進行UI設計。本教程內容涵蓋UI基礎構成、UI元素、自動佈局、自適應UI、UI動畫、UI互動和定製空控制元件等內容。

試讀下載：
目  錄
第1章  UI基礎 1
1.1  視窗 1
1.1.1  視窗的內容 1
1.1.2  設定起始視窗 1
1.1.3  視窗的工作方式 3
1.2  檢視 4
1.2.1  改變檢視的外觀 4
1.2.2  檢視的可見性 4
1.2.3  禁用檢視與使用者的互動 5
1.2.4  檢視的幾何形狀 6
1.2.5  檢視的邊界 7
1.2.6  檢視的框架 7
1.2.7  檢視的中心位置 9
1.3  UI層次結構和Views繼承 11
1.3.1  子檢視和父檢視 11
1.3.2  管理層次結構 12
1.3.3  檢視和子檢視的可見性 15
1.3.4  層次結構的事件 17
1.3.5  檢視除錯 18
1.3.6  檢視的繪製 22
1.3.7  檢視控制器和檢視 23
1.3.8  檢視的生命週期 23
第2章  UI元件概述——UIKit 27
2.1  文字元素 27
2.1.1  顯示文字——普通文字/格式化文字 27
2.1.2  改變文字的外貌 29
2.1.3  單行截斷 30
2.1.4  多行文字 31
2.1.5  文字的固定寬度 32
2.1.6  修改文字字型 33
2.1.7  接收使用者輸入的響應流程 35
2.1.8  使用者手動設定輸入的文字的格式 35
2.1.9  提示 36
2.1.10  邊框樣式 40
2.1.11  監聽輸入 41
2.2  大量文字顯示 43
2.2.1  禁用選擇 43
2.2.2  自動識別 43
2.2.3  識別型別 44
2.2.4  圖文混排 45
2.3  鍵盤 47
2.3.1  鍵盤通知 47
2.3.2  鍵盤輸入型別 47
2.4  按鈕與選擇 52
2.4.1  按鈕與使用者互動 52
2.4.2  開關選擇 54
2.4.3  非精準值的選擇 55
2.4.4  多選一 56
2.4.5  精確選擇值 60
2.4.6  步進控制 61
2.5  進度條和狀態提示 64
2.5.1  進度條 64
2.5.2  狀態提示 65
2.6  影像 66
2.6.1  影像檢視支援的影像格式 66
2.6.2  讓影像適用於多個螢幕 66
2.6.3  影像渲染 68
2.6.4  影像的拉伸 70
2.7  滾動顯示 72
2.7.1  滾動檢視的組成 73
2.7.2  滾動檢視的功能 73
2.7.3  對滾動檢視的設定 73
2.7.4  攔截與使用者互動時的資訊 73
2.7.5  手勢縮放 74
2.8  管理和顯示結構化資料 75
2.8.1  單列資料 75
2.8.2  多列資料 77
2.9  介面批次定製 82
第3章  自動佈局 84
3.1  自動佈局的實現方式 84
3.2  構建約束 84
3.2.1  建立一個約束——Ctrl + Drag 84
3.2.2  建立一個約束——Auto Layout Menu自動佈局功能按鈕 86
3.2.3  檢視約束 89
3.2.4  驗證約束的正確性 90
3.3  重置約束 91
3.4  內建內容尺寸 93
3.5  螢幕大小自適應 97
3.5.1  考慮因素 97
3.5.2  位置約束 99
3.5.3  大小約束 104
3.6  透過程式碼更新約束 105
3.7  使用VFL實現自動佈局 108
3.7.1  VFL介紹 108
3.7.2  初始化檢視 110
3.7.3  新增約束陣列 111
3.7.4  設定多個檢視 113
3.7.5  檢視之間的關係 114
第4章  自適應UI 117
4.1  Size Classes介紹 117
4.2  UI Trait 120
4.2.1  Trait集合和環境 120
4.2.2  使用Trait集合 120
4.3  使用Size Classes構建佈局 121
4.3.1  構建佈局 121
4.3.2  顯示效果 125
4.3.3  使用Image Assets 126
4.4  iOS動態字型 129
4.4.1  配置文字尺寸 129
4.4.2  文字樣式 131
4.5  使用UIStackView 133
4.5.1  建立UIStackView 133
4.5.2  UIStackView相關屬性 134
4.5.3  實現自適應佈局 136
第5章  圖層和核心動畫 138
5.1  圖層 138
5.1.1  圖層和檢視 138
5.1.2  建立圖層 138
5.1.3  圖層的幾何外觀 143
5.1.4  圖層的層次結構 145
5.1.5  圖層的外觀 148
5.2  使用核心動畫 151
5.2.1  圖層和動畫 152
5.2.2  隱式動畫 152
5.2.3  基本動畫 155
5.2.4  組合動畫 158
5.2.5  關鍵幀動畫 160
5.2.6  轉場動畫 161
5.2.7  移除動畫 162
5.2.8  檢視動畫 163
第6章  UI互動——觸控與手勢 164
6.1  事件和觸控 164
6.1.1  觸控階段 165
6.1.2  UITouch類 165
6.1.3  事件傳遞 166
6.2  響應者鏈 166
6.2.1  Hit-testing 167
6.2.2  響應觸控事件 168
6.3  手勢和手勢識別器 168
6.3.1  使用手勢識別器 169
6.3.2  手勢識別器狀態 170
第7章  構建自定義控制元件 172
7.1  為什麼要設計自定義控制元件 172
7.2  UIControl類 172
7.3  使用UIControl類製作一個溫度控制器 173
7.3.1  初始化控制元件 174
7.3.2  繪製控制元件 175
7.3.3  更新控制元件的值 176
7.3.4  觸控跟蹤 178
7.3.5  將控制元件顯示在介面中 180
7.4  傳送發作 180
7.5  使用UIAppearance自定義控制元件 181

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/29597077/viewspace-2128225/，如需轉載，請註明出處，否則將追究法律責任。

相關文章