UIKit-Swift

UIKit http://MobileDev.TWhttp://MobileDev.TW
iOS APP Developer
UIKit Framework
with Swift
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

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

按按鈕顯示文字
按下按鈕之後，上方顯示區出現文字
界面
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.swift
10

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

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

7. ViewController.swift àbuttonToClick
13

8. command+R執行測試
14

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

Lab.顯示按了幾下
• 修改範例讓文字顯示區顯示目前按了幾下
16

Lab 顯示按了幾下
• 增加一個變數來記錄次數，初始值為0
• 按鈕按下後，增加次數一次，並顯示
17

Lab 按圖片按鈕顯示文字
• 按按鈕，按鈕的圖片會變一下，且顯示文字(自動消失)
18

佈局畫面
1. 在storyboard上加入一個button、一個label
2. 按鈕設定一張預設的圖片，label的alpha值設為0
19

按鈕事件處理
1. label的alpha值設為1、設定文字內容
2. 利用transitionWithView將alpha值兩秒鐘降為0
20

上浮選單換顏色 – AlertController
21

增加一個Tap Gesture到畫面上
22

設定Tap Gesture的Outlet與Action
23

設定Tap Gesture的Handler
24

設定Tap Gesture的Handler
25

將tap手勢加在畫面上
26

UISwitch
27

Lab1.按按鈕切換開關
1. 在storyboard中加入switch、button
2. 建立程式關聯性
3. 按下按鈕時，判斷switch的狀態，切換成另一種
28

Lab
Lab2.當使用者直接觸控開關切換狀態時，如何得知？
Lab3.如何區分畫面上多個開關被切換？
29

(4)UISlider
30

Lab1.UISlider
1. 在storyboard中加入slider、label
2. 加入程式關聯性
3. 當slider的值改變時，就更新label所顯示的數值
31
4. 一開始時，Label即顯示目前的Slider數值

Lab2.轉向
將slider轉向成直的
32

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

UIStepper
34

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

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

UITextField
37

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

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

Lab1.UITextField
6. 新增檔案SecondViewController.swift，並於
Storyborad中，設定對應，並建立關聯性如下
40

Lab1.UITextField
7. 判斷使用者輸入的資訊，確定正確才跳至下一畫面
41

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

Lab1.UITextField
9. 在ViewController.swift中，如何傳遞資料到下一個
畫面
10.在SecondViewController.swift中將資料顯示出來
43

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

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

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

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

UITextView
48

Lab1.UITextView
1. 佈置storyboard如圖
49

Lab1.UITextView
2. 程式關聯性
50

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

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

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

(8)UIDatePicker
54

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

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

Lab2.顯示年紀
57

UIPickerView
ComponentRow
58

PickerView Basic
1. In Storyboard, add label、button、pickerView
2. Create relationship between Storyboard&Code：

PickerView Basic
3. At first, initial the array's data.
4. Add those delegate methods related to pickerView

PickerView Basic
5. When the button clicks, show the selected text
at label.

Add more components!
• Add 2 more components in the pickerView.

• add 2 more Arrays.
• Give initial value to these 2 new arrays.

• Add this method to specify the number of
components to 3.
• The number of Rows in component is depend on
how many items in corresponsive array.

• The title for row also depend on the specified itm in
corresponsive array.
• When user click the button, label shows all the title for
selected Rows in corresponsive component

Using Emoji for Row at Picker

• 3 for number of components in pickerview, and
100 for number of rows in component

• Create 3 arrays to store each row in every
components, and 1 array for Emoji icons

• Initialize each items in 3 arrays, store random
number from 0 to 9.

• The Emoji on row in each component is
correspond to the number in each array.

• When the button is clicked, makes the machine
to roll, and tell it's win or not.
• Random number between 3 ~ 96, prevent empty
row reveal in each component

You are learning…
• UIPickerView的運用
• 遵循Protocol、實作方法
• 用Array儲存資料、取出資料、回傳數量
• 亂數的使用
• UIPickerView跳到特定Row
• 自訂方法、呼叫自訂方法
72

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

UIActivityIndicatorView
74

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

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

Lab：3秒後載入圖片
1.按下按鈕後，顯示等待指示，三秒後載入圖片
77

設定圖片顯示
2.加入一張圖片至專案，以及加入一個ImageView
78

計時器
3.增加一個整數變數以及一個計時器
79

按鈕事件處理
4.當按鈕按下後，啟動Indicator，同時也計時，3秒之
後，停止Indicator，讓圖片顯示
80

UIProgressView
81

顯示目前進度值
以前面練習，加上顯示目前進度值
82

畫面佈局
1.新增progressView，progress設定為0、隱藏
83

程式關聯性
2.增加myProgressView
84

按鈕按下後，顯示progressView
3.顯示progressView、修改timer
85

UIAlertController – Alert
86

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

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

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

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

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

3.加入取消與登入的按鈕
92

4.將Action加至alertController，並且顯示alertController
93

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

6.在ViewController.swift中加一個方法：
7.Storyboard，在第二個畫面加一個按鈕，按鈕拉線至橘
色的Exit，出現backToMain，點選
95

UIPageControl
96

手勢換頁
• 運用手勢來進行換頁
97

UIPageControl
1.在storyboard中加入imageview、pageControl、
兩個UISwipeGestureRecognizer(一左、一右)，兩個
拉進同一個ActionHandler
98

viewDidLoad()
2.設定圖片模式、屬性、第一張顯示圖片，並加上手勢
辨識器
99

Swipe 處理器
3.判斷是向左還是向右，對應變更PageControl顯示，
以及圖片(記得加入圖片Image0, Image1, Image2)
100

Lab 自動輪播圖片
隨時間自己會循環播放
101

viewDidLoad()
加入計時器
102

設置一個變數count
初始值為0
計時器每次觸發後，增加count，再%3，循環在 0 ~ 2
103

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

(1)UIImageView
105

Lab1.使用imageView來作動畫
106

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

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

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

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

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

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

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

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

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

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

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

2.在專案中加入數張圖片後，在viewDidLoad中設定
ScrollView
118

3.只讓水平方向可以捲動
119
4.當第i個圖片停留在x為0的位置時，也對應地將
UIPageControl的currentPage設定為i

常見畫面流程
120

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

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

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

UI相關程式常忽略的步驟
• 勾選UI元件的兩項屬性
• User Interaction Enabled
• Multiple Touch
• 設定Delegate的對象為自己
• xxx.delegate=self;
• 或將該UI元件的delegate拉至該View Controller
• Segue Identifier
• 在Storyboard中設定，並注意大小寫
124

手勢識別器
125

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

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

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

虛擬鍵盤
129

TableView
條列式清單 --> 各項目詳細內容
130

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

Lab1.TableView
3. 在viewDidLoad中指派陣列的內容
132

Lab1.TableView
4. 修改TableView的項目數為水果陣列的物件數
133

Lab1.TableView
5. 修改TableView的項目文字為水果陣列中的對應項目
6. 在storyboard中，第二個畫面加入一個ImageView以
及一個接收圖片檔名的變數，並建立畫面與程式關聯性
134

Lab1.TableView
7. 回到第一個畫面的控制檔，告知第二個畫面，使用者點
了哪一個項目，並使用這個項目編號來查找水果名稱，
指派給第二個畫面的變數
135

Lab1.TableView
8. 第二個畫面的控制檔的viewDidLoad，設定
imageView要載入的圖片
136

Lab2.標題
• 修正第二個畫面的標題
137

Lab2.標題
1. 在第二個畫面的控制檔修改接收物件為Any
2. 在第一個畫面的控制檔的prepareForSegue中，將
該對應字典整個傳遞過去
138

Lab2.標題
3. 在第二個畫面控制檔的viewDidLoad中，用拿到的
水果名稱來設定title，也修改圖片檔名的接收方式
139

Lab3.加入註解與圖片
140

1.加入三張40x40的水果小圖至專案
141

2.在cellForRow AtIndexPath中，設定表格列的副標
題文字以及縮圖
142

Lab4.客製化cell
143

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

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

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

Subview
147

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

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

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

Lab2.加上Label
• 分別在兩個subView加上UILabel，顯示文字Label1
與Label2
151

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
一或多根手指，離開該可視元件
152

移動畫面上的物體
153

移動畫面上的物體
1. 在View上加一個UIImageView，並設定預設顯示圖
片
2. 新增檔案 -> iOS Cocoa Touch Class ->subClass
of UIImageView -->命名為MyShape
3. 將storyboard裡面的UIImageView的Class設定為
MyShape，並且勾選User Interaction Enabled
4. 在MyShape.swift中，加入下頁觸控方法
154

Lab1.移動畫面上的物體
155

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

運用元件製作切換效果
157

UISegmentedControl
1. 在storyboard中加入Segmented、Label
158
3. 透過selectedSegmentIndex來進行判斷

延後觸發的做法
• 按鈕按下後，過了3秒才執行printToConsole方法
159

UserDefaults
• 可長久儲存在程式中使用
• 切換畫面、程式關閉都不影響
• 存取
160

敬請指教
161
Contact
Ryan Chung
(02) 6631 – 6555
Ryan@iii.org.tw

UIKit-Swift

Recommended

Recommended

More Related Content

Similar to UIKit-Swift

Similar to UIKit-Swift (20)

More from Ryan Chung

More from Ryan Chung (20)

UIKit-Swift