iOS10 UI設計基礎教程

iOS10 UI設計基礎教程

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

試讀下載：http://pan.baidu.com/s/1jHRFrFo

目  錄

第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