UIKit Framework

UIKit http://MobileDev.TW
iOS APP Developer
UIKit Framework
Ryan@MobileDev.TW
1

iOS Framework
提供iOS應用程式的
使用者界面建構與
管理的類別，所有
觸控螢幕界面中的
物件、事件處理、
繪製模式、視窗、
可視元件與控制項
目。
2

常用的UI元件
1.  操作型元件
(1)  UIButton 按鈕
(2)  UIAlertController 上浮選單
(3)  UISwitch 開關
(4)  UISlider 滑動音量控制
(5)  UIStepper 計數器
(6)  UITextField 單行文字輸入
(7)  UITextView 多行文字輸入
(8)  UIDatePicker 日期時間
(9)  UIPickerView 滾軸選取
2.  指示型元件
(1)  UIActivityIndicatorView 等待
(2)  UIProgressView 進度顯示
(3)  UIAlertController 警示跳出
(4)  UIPageControl 分頁
3.  顯示型元件
(1)  UIImageView 圖片顯示
(2)  UIScrollView 捲動顯示
(3)  UITableView 條列顯示
4.  畫面與流程
3

1.操作型元件
你來我往的高互動
4

(1)UIButton
•  按鈕：使用者可以點擊，程式能做出回應
•  設定按鈕標題、圖片等屬性
•  按鈕狀態
5

Lab1.按按鈕顯示文字
按下按鈕之後，上方顯示區出現文字
界面
1. 一個文字顯示區
2. 一個按鈕
邏輯
當按鈕被按下時，
在文字顯示區顯示
文字
6

1.  File à New Project à 選擇 iOS à Application
àSingle View Application à Next…
7

2.  輸入名稱ClickToShow à Next
8

3.  點選storyboard，拖曳一個label和一個button至
目前唯一的view上
9

4.  按住Alt，再點選ViewController.h
10

5.  點選label--按住Ctrl--往右拉，設定為Outlet --
命名為labelArea
11

6.  點選button--按住Ctrl--往右拉，設定為Action
--命名為buttonToClick
12

7.  到ViewController.m --在buttonToClick方法中-
- _labelArea.text=@Hello!”;
13

8.  command+R執行測試

14

You are learning…
•  可視元件
•  UILabel
•  UIButton
•  如何在程式中改變可視元件的屬性
•  如何在可視元件的特定事件發生時，執行要做的動作
15

Lab2.顯示按了幾下
•  修改範例讓文字顯示區顯示目前按了幾下
•  運用NSString的stringWithFormat方法
16

Lab2.顯示按了幾下
•  在.h檔中增加一個iVar來記錄次數
•  每次進入程式後，初始值為0
•  按鈕按下後，增加次數一次，並顯示
17

Lab3.按鈕狀態
•  按按鈕，按鈕的圖片會變
18

Lab3.按鈕狀態
1.  在storyboard上加入一個button，並設定一張預
設的圖片
2.  建立程式關聯性
3.  設定button在不同的狀態時，顯示不同的圖片
19

(2)UIActionSheet Deprecated
20

Lab1.UIActionSheet
1.  做一個按鈕，當按鈕被按下時，執行：
21

Lab1.UIActionSheet
2.  遵循UIActionSheetDelegate
3.  實作UIActionSheetDelegate裡的這個方法，取得
使用者按下哪一顆按鈕
22

Lab2.去除紅色按鈕
•  不要有紅色的按鈕
23

(2-1)UIAlertController - ActionSheet iOS8
24

Lab1.UIAlertController - ActionSheet iOS8
1.做一個按鈕，當按鈕被按下時，執行：
25

2.用UIAlertAction設定按鈕的文字、樣式以及處理器
26

ActionStyle有三種：取消、一般預設、破壞性
27

3.加入UIAlertAction，然後秀出上浮選單
28
PS.除了Cancel以外，加入順序等於排列順序
PS2.Cancel只能有一顆

(3)UISwitch
29

Lab1.按按鈕切換開關
1.  在storyboard中加入switch、button
3.  按下按鈕時，判斷switch的狀態，切換成另一種
30

Lab
Lab2.當使用者直接觸控開關切換狀態時，如何得知？

Lab3.如何區分畫面上多個開關被切換？
31

(4)UISlider
32

Lab1.UISlider
1.  在storyboard中加入slider、label
2.  加入程式關聯性
3.  當slider的值改變時，就更新label所顯示的數值
33

Lab2.轉向
1.  將slider轉向成斜的
34

Lab3.顯示增值
•  加一顆按鈕，每按一次，slider的值就增加

35

(5)UIStepper
36

Lab1.UIStepper
1.  在storyboard中加入Stepper、Label
2.  設定Stepper的行為Autorepeat、Continuous
4.  當Stepper改變時，設定Label的顯示文字
37

Lab2
•  利用UIStepper來控制UISlider，同時顯示數值
38

(6)UITextField
39

Lab1.UITextField
1.  佈置storyboard如下圖
UITextField
UIButton
UILabel
Bar Button
Navigation Bar
UITextField
40

Lab1.UITextField
2.  第一個textfield設定Keyboard Type為E-mail
3.  第二個textfield勾選Secure Text Entry
4.  兩個畫面連接(不是用button連，從ViewController
拉出)，設定如下
5.  第一個畫面程式關聯性如下
41

Lab1.UITextField
6.  第二個畫面程式關聯性
7.  判斷使用者輸入的資訊，確定正確才跳至下一畫面
42

Lab1.UITextField
8.  當使用者打完姓名按下Enter時，則拿出打密碼的
鍵盤，密碼打完，則收掉鍵盤。
43

Lab1.UITextField
9.  傳遞資料到下一個畫面(要先匯入第二個畫面控制器)
10. 第二個畫面將資料顯示到label中
44

Lab1.UITextField
11. 按下Done可以回到上一個畫面
45

You are learning…
•  畫面連結的另一種方法(可加入判斷式)
•  如何將數值從第一個畫面傳到第二個畫面
•  虛擬鍵盤如何收起來
46

Lab2.只顯示名字
•  讓第二頁的歡迎畫面的姓名，只出現email的@前面
•  並且變成首字大寫
47

Lab2.只顯示名字
•  讓第二頁的歡迎畫面的姓名，只出現email的@前面
•  並且變成首字大寫
48

(7)UITextView
49

Lab1.UITextView
1.  佈置storyboard如圖
50

Lab1.UITextView
2.  程式關聯性
51

Lab1.UITextView
3.  一開始，兩顆按鈕先停止作用
4.  使用者開始修改文字時，先將既有的內容存一份
52

Lab1.UITextView
5.  使用者在修改文字時，允許使用上面兩顆按鈕，編
輯完畢，就停止使用按鈕
53

Lab1.UITextView
6.  若使用者按下undo，就用舊的內容取代目前的內容
7.  使用者按下完成，則收起鍵盤
54

(8)UIDatePicker
55

Lab1.UIDatePicker
1.  在storyboard上，加入label、button、datePicker
2.  與程式連結產生關係
56

Lab1.UIDatePicker
3.  datePicker預設為隱藏、date Mode
4.  加入兩個Action，一個從按鈕，一個從datePicker
57

Lab2.顯示年紀
58

(9)UIPickerView
59

Lab1.UIPickerView
1.  在storyboard中加入label、button、pickerView
2.  與程式產生關聯性如下：
60

Lab1.UIPickerView
3.  程式一開始先設定資料
4.  加入pickerView相關的Delegate方法
61

Lab1.UIPickerView
5.  按鈕按下後，就顯示目前所選擇的項目
ComponentRow
62

You are learning…
•  UIPickerView的運用
•  遵循Protocol、實作方法
•  用NSArray儲存資料、取出資料、回傳數量
63

NSArray Tasks
64

Lab2.三個子滾軸
•  改寫成3個子滾軸，讓使用者可以選擇
65

1.  增加兩個Label來放文字，並建立程式關聯性
66

2.  增加兩個陣列來儲存資料
3.  給陣列資料
67

4.  設定為3個子滾軸(component)
5.  每一個子滾軸要有幾個列，由對應的陣列資料筆數
決定
68

6.  每一個列上的標題文字，則由對應的資料陣列中的
對應順序來決定
7.  透過使用者目前的選擇狀態，來決定要撈哪一筆資料
出來
69

Lab3.主分類與子項目
•  子滾軸彼此有關聯
•  NSDictionary
•  主分類會影響
子項目的內容
70

1.  建立一個Dictionary與一個Array
2.  資料初始化
71

3.  決定滾軸上的文字
Key
Value
中式
西式
牛肉麵
滷肉飯
水餃
漢堡
牛排
披薩
Data
Keys
72

4.  決定有幾個滾軸以及各滾軸有幾個項目
73

5.  當使用者在第一個滾軸選了項目時，要更新第二個滾軸
而當第二個滾軸選了項目時，可以直接秀出來
74

You are learning…
•  NSMutableDictionary的初始化、存值、取值
•  Array與Dictionary的混用
75

NSMutableDictionary Tasks
76

Lab4.使用圖片
•  項目用圖片來顯示
•  - (UIView *)pickerView:(UIPickerView
*)pickerView viewForRow:(NSInteger)row
forComponent:(NSInteger)component
reusingView:(UIView *)view
77

1.  增加10張100x100的圖片(png, 無背景)
2.  設定有3個子滾軸、每個滾軸有100個列
Lab4.使用圖片
78

3.  建立三個陣列來儲存對應的資料
Lab4.使用圖片
79

4.  陣列初始化，並且將陣列內的值設定為亂數0~9
Lab4.使用圖片
80

5.  每一個列在每一個子滾軸中要顯示的圖片，由對應
的項目在對應的陣列中內的數值來決定
Lab4.使用圖片
81

6.  建立一個函數來處理每次拉霸要做的事情
7.  將亂數選取列數鎖定在3~96，目的是為了避免畫
面出現空的項目
Lab4.使用圖片
82

8.  一開始就執行
Lab4.使用圖片
83

9.  使用者按下特定按鍵也可以觸發這個函數
Lab4.使用圖片
84

調整Component的寬高
85

You are learning…
•  亂數的使用
•  NSMutableArray的使用
•  UIPickerView跳到特定Row
•  自訂方法、呼叫自訂方法
86

2.指示型元件
別讓你的使用者不知所措
87

(1)UIActivityIndicatorView
88

Lab1.UIActivityIndicatorView
1.  在storyboard中加入IndicatorView、button
2.  可以設定Indicator的樣式、顏色、初始狀態、停止
時隱藏
3.  產生程式聯結
89

Lab1.UIActivityIndicatorView
4.  設定按鈕按下後的行為
90

(2)UIProgressView
91

Lab1.UIProgressView
1.  在storyboard中加入progressView、button
2.  progressView設為隱藏、初始值0
3.  產生程式關聯性
92

Lab1.UIProgressView
4.  按下按鈕後，顯示progress，每隔1秒去執
行changeValue方法
93

Lab1.UIProgressView
5.  changeValue方法不斷增加progress的值，直至
到1，關掉Timer、藏起progress並跳出Alert
94

You are learning…
•  UIProgressView的使用
•  NSTimer如何取消
95

(3)UIAlertView Deprecated
96

Lab1.UIAlertView
1.  做一個按鈕，當按鈕被按下時，執行：
97

Lab1.UIAlertView
1.  遵循UIAlertViewDelegate
2.  實作UIAlertViewDelegate裡的這個方法，取得使
用者按下哪一顆按鈕
98

You are learning…
•  UIAlertView的運用
•  實作Protocol
•  遵循UIAlertViewDelegate
•  實作Protocol中的方法
99

Lab2.利用AlertView驗證使用者帳號密碼
100

1.  建立一個按鈕，按下後觸發toShow方法
2.  在toShow方法中，建立AlertView，並且設定樣式
為UIAlertViewStyleLoginAndPasswordInput
101

3.  加入UIAlertViewDelegate
4.  加入協定中的clickedButtonAtIndex方法
5.  如果使用者按的是確定，並且密碼正確，跳往下一頁
，否則顯示登入失敗，並且停留在此頁
102

6.  在storyboard中加入一個View Controller，並且從第
一個畫面連線到第二個畫面，設定為Present Modall
y樣式，並且Identifier命名為loginSuccess
103

(3-1)UIAlertController – Alert iOS8
104

Lab1. UIAlertController – Alert
1.做一個按鈕，當按鈕被按下時，執行：
105

2.利用UIAlertAction來設定按鈕文字、樣式以及處理器
106

3.利用addAction加入按鈕，並將Alert秀在畫面上
107

Lab2.利用AlertController驗證使用者帳號密碼
108

1.建立一個按鈕，按下後觸發showLoginAlert方法
2.在方法中，建立UIAlertController的實體，選擇Alert
樣式，然後加入兩個TextField與其設定處理器
109

3.加入取消的按鈕
110

4.加入登入的按鈕,判斷帳號密碼後決定是否進入下一畫面
111

5.在storyboard中加入一個View Controller，並且從第
一個畫面連線到第二個畫面，設定為Present Modally
樣式，並且Identifier命名為loginSuccess
112

(4)UIPageControl
113

Lab1.UIPageControl
1.  在storyboard中加入imageview、pageControl
2.  imageView設定一張圖片
4.  當pageControl的值被修改時，就去換imageView
顯示的圖片
114

Lab2.結合手勢
•  運用手勢來進行換頁
115

Lab2.結合手勢
1.  使用Swipe Gesture Recognizer來控制圖片顯示
2.  在Storyboard中加入兩個Swipe Gesture
Recognizer，一個設定向左、一個設定向右
3.  與程式產生關連性、Action，都連向同一個方
法swipeAction
116

Lab2.結合手勢
117

You are learning…
•  如何加入手勢辨識
•  如何運用轉場動畫
118

3.顯示型元件
如何呈現出最好的一面
119

(1)UIImageView
120

Lab1.使用imageView來作動畫
121

Lab1.使用imageView來作動畫
•  運用UIImageView本身的動畫功能，播放多張圖片
122

You are learning…
•  如何使用UIImageView
•  UIImageView如何製作動畫
•  如何從一張大圖剪下部分拿來運用
123

Lab2.兩張圖片切換
•  改寫範例，變成兩張獨立的圖片進行切換
124

(2)UIScrollView
•  使用iPhone瀏覽超過畫面大小的圖片
•  使用者可以縮小、放大圖片
•  使用者可以上下左右移動畫面
125

Lab1.UIScrollView
1.  使用storyboard，加入一個UIScrollView
2.  建立程式關聯性以及iVar
126

Lab1.UIScrollView
3.  在viewDidLoad中，設定ImageView，加
入ScrollView
127

Lab1.UIScrollView
4.  在viewDidLoad中，設定ScrollView的相關參數
5.  在viewDidLoad中，設定一個Label來顯示目前的
縮放倍數
128

Lab1.UIScrollView
6.  實作viewForZoomingInScrollView:來讓圖片可以
縮放
129

Lab1.UIScrollView
7.  縮放動作完成時，顯示Label來呈現縮放倍數
130

Lab2.ScrollView + Page Control
可左右捲動電影海報，並且有指示為第幾張海報
131

1.  在畫面上佈局Scroll View與Page Control
132

2.  在專案中加入數張圖片(320x120)後，在viewDidLoad中
設定ScrollView
133

3.  繼續在viewDidLoad中，把ScrollView的基本設定完成
134

4.  只讓水平方向可以捲動
135

5.  當第i個圖片停留在x為0的位置時，也對應地
將UIPageControl的currentPage設定為i
136

(3)TableView
條列式清單 -- 各項目詳細內容
137

Lab1.TableView
1.  使用Master-Detail樣板
2.  在MasterViewController.m中，加入兩個陣列來
存放水果名稱與水果圖片檔案名稱
138

Lab1.TableView
3.  在viewDidLoad中指派兩個陣列的內容
4.  修改TableView的項目數為水果名稱陣列的物件數
139

Lab1.TableView
5.  修改TableView的項目文字為水果名稱陣列的對應物件
6.  在storyboard中，第二個畫面加入一個ImageView，
並建立程式關聯性
140

Lab1.TableView
7.  回到第一個畫面的.m檔，告知第二個畫面，使用者點
了哪一個項目，並使用這個項目編號來查找水果名稱
，指派給第二個畫面的變數
8.  第二個畫面的.m檔的viewDidLoad，設定imageView
要載入的圖片
141

Lab2.標題與Label文字
•  修正第二個畫面的標題與Label文字
142

1.  在第二個畫面的.h增加一個變數儲存水果名稱
2.  在第一個畫面的.m檔的prepareForSegue中，將
水果名稱傳遞過去
143

3.  在第二個畫面的.m的viewDidLoad中，用拿到的
水果名稱來設定title與label
144

Lab3.加入註解與圖片
145

1.  加入三張40x40的水果小圖至專案
2.  在第一個畫面的.m檔中，加入fruitEnglishNames
、fruitSmallImages陣列
146

3.  在viewDidLoad中，加入這兩個陣列的初始設定
147

4.  在cellForRowAtIndexPath中，設定表格列的副標
題文字以及縮圖
148

Lab4.客製化cell
149

Lab4.客製化cell
1.  在storyboard中，將tableViewCell的style選
成Custom，然後自行拉入想要的元件以及排列方式
150

Lab4.客製化cell
2.  選取各個你所加入的UI元件，設定tag編號
151

Lab4.客製化cell
3.  在第一個畫面的.m檔中的cellForRowAtIndexPath，
透過tag編號來建立程式關聯性，並且將對應所需的
內容指派進去
152

4.畫面與流程
掌握畫面，控制流程
153

(1)Subview
154

Lab1.增加Subview在畫面上
1.  利用storyboard加入一顆按鈕，設定為action，名
稱為toChange
2.  在viewDidLoad的方法中，進行設定
155

Lab1.增加Subview在畫面上
3.  toChange方法裡面加入：
156

You are learning…
•  看得到的東西不一定要用Storyboard，也可以by code
•  了解在圖學中常用的指定位置、大小的表達方式
•  了解在畫面上有圖層的概念
157

Lab2.加上Label
•  分別在兩個subView加上UILabel，顯示文字Label
1與Label2
•  注意UILabel的背景顏色
158

(2)View的切換
159

Lab1.View的切換
1.  使用storyboard增加一個ViewController
2.  在原先的ViewController上增加一個按鈕
3.  從按鈕連線到新的ViewController，選擇Modal
4.  在專案中新增檔案 -- iOS -- Cocoa Touch --
Objective-C class -- Next
5.  選擇Subclass of UIViewController -- 命名
為SecondViewController
6.  在Storyboard中，將第二個ViewController
的Custom Class設定為SecondViewController
160

Lab1.View的切換
7.  將兩個ViewController中間的Segue的Identifier
，設定為SecondViewController
8.  在第二個View上加入一顆按鈕，拉線
至SecondViewController.h
9.  選擇Action，命名為goBack
10. 在SecondViewController.m中的goBack()中加入：

161

Lab2.畫面切換的另一種方式(old)
1.  在第一個畫面的viewController.m中加一個方法：
2.  Storyboard，在第二個畫面加一個按鈕，選取後按
右鍵，選擇Action，連線至綠色的Exit，點
選backToMain:
162

Lab2.畫面切換的另一種方式(new)
1.  在第一個畫面的viewController.m中加一個方法：
2.  Storyboard，在第二個畫面加一個按鈕，選取橘色
的Exit，拉線連結至Back按鈕，出現action點選
163

You are learning…
•  Storyboard中的View與程式ViewController的對應
•  如何在Storyboard中從一畫面到另一畫面
•  如何用程式離開目前畫面
164

Lab3.多頁流程
•  修改範例，加入另外一個View Controller，在第一
頁有兩個按鈕，可以選擇要去第二頁或是第三頁，
而第二頁或第三頁上面，都有一顆按鈕可以回第一頁
165

(3)Touch事件
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
一或多根手指，正在該可視元件上移動
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
一或多根手指，碰觸到該可視元件
-(void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
觸控事件遭遇系統事件強迫取消(如記憶體不足等)
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
一或多根手指，離開該可視元件

166

Lab1.移動畫面上的物體
167

1.  在View上加一個UIImageView，並設定預設顯示
圖片
2.  新增檔案 -- subClass of UIImageView --命名
為MyShape
3.  將storyboard裡面的UIImageView的Class設定
為MyShape
4.  在MyShape.m中，加入下頁觸控方法
168

169

Lab2.顯示觸控座標
•  請用相同的概念，修改成：畫面上有一個Label，
會顯示目前手指碰到的位置之X,Y座標值
170

淡入淡出的
定格文字
Ryan Chung
Lab3.淡入淡出的定格文字
171

1.  建立新專案，選擇Single View Application
172

2.  輸入專案名稱DanTinBlackTea，儲存
173

3.  在Storyboard中，加入UIImageView，並加入一
張圖片作為初始值
174

4.  在專案中，新增檔案，選擇iOS Cocoa Touch-
-Objective-C Class
175

5.  選擇subClass of UIImageView，命名myImageView
6.  在StoryBoard中，選取原先加入的UIImageView，在
右手邊的Identity inspector中，設定Class
為myImageView
176

7.  在myImageView.m中，加入touchedBegan方法，
當使用者一觸碰到該圖片時，就建立一個UILabel，
顯示文字
177

8.  設定動畫效果，讓該Label文字在一定時間量後，以淡
入淡出的方式消失，就完成了。
178

執行該程式，當使用者觸碰到該紅茶時，就會顯示文字
，過了幾秒後，文字會淡出至不見。
179

(4)運用元件製作切換效果
180

Lab1.UISegmentedControl
1.  在storyboard中加入Segmented、Label
181

Lab1.UISegmentedControl
3.  透過selectedSegmentIndex來進行判斷
182

(5)常見畫面流程
183

Lab1.Navigation Controller
•  運用Storyboard建構如下畫面
184

Lab2.TabBar Controller
•  使用Tabbed Application樣板
•  然後自行加入第三個Tab
185

Lab3.Tab+Nav
•  基於Tab-Based結構，加入Navigation-Based
186

UI相關程式常忽略的步驟
•  勾選UI元件的兩項屬性
•  User Interaction Enabled
•  Multiple Touch
•  設定Delegate的對象為自己
•  xxx.delegate=self;
•  或將該UI元件的delegate拉至該View Controller
•  Segue Identifier
•  設定為該ViewController的類別名稱
187

常用的資料類別
• NSString 字串
• Array (Ordered Room for Values)
• NSArray 陣列
• NSMutableArray 可變陣列
• Dictionary (Key-Value Pair)
• NSDictionary 字典
• NSMutableDictionary 可變字典
188

手勢識別器
189

補充：按鈕延後觸發方法的做法
•  按鈕按下後，過了3秒才執行changeButtonTitle方法
190

Storyboard預覽裝置顯示
1.開啓輔助編輯器視窗
191

2.點擊輔助編輯器上方，選擇Preview-storyboard
192

3.點擊輔助編輯器下方的+，增加想要預覽的裝置
193

4.在storyboard中試著移動元件，可看見在各裝置的變化
194

讓元件在各裝置顯示一致
1.選取要設定的元件後，點擊下方工具列的Pin，
將Width與Height打勾，然後按下Add 2 Constraints
195

讓元件在各裝置顯示一致
2.請系統協助補足欠缺的設定
196

請系統直接設定Auto Layout
1.選取要設定的元件後，回復至建議設限
197

虛擬鍵盤
198

UIKit Framework

More Related Content

Similar to UIKit Framework (20)

More from Ryan Chung (20)

UIKit Framework