Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UIKit http://MobileDev.TWhttp://MobileDev.TW
iOS APP Developer
UIKit Framework
with Swift
Ryan@MobileDev.TW
1
UIKit http://MobileDev.TWhttp://MobileDev.TW
iOS Framework
提供iOS應用程式的
使用者 界面 建構與
管理的 類別 ,所有
觸控螢 幕界 面中的
物件、 事件 處理、
繪製模 式、 視...
UIKit http://MobileDev.TWhttp://MobileDev.TW
常用的UI元件
1. 操作型元件
(1) UIButton 按鈕
(2) UIAlertController 上浮選單
(3) UISwitch 開關
(...
UIKit http://MobileDev.TWhttp://MobileDev.TW
1.操作型元件
你來我往的高互動
4
UIKit http://MobileDev.TWhttp://MobileDev.TW
UIButton
• 按鈕:使用者可以點擊,程式能做出回應
• 設定按鈕標題、圖片等屬性
• 按鈕狀態
5
UIKit http://MobileDev.TWhttp://MobileDev.TW
按按鈕顯示文字
按下按鈕之後,上方顯示區出現文字
界面
1. 一個文字顯示區
2. 一個按鈕
邏輯
當按鈕被按下時,
在文字顯示區顯示
文字
6
UIKit http://MobileDev.TWhttp://MobileDev.TW
按按鈕顯示文字
1. File à New Project à 選擇 iOS à Application
àSingle View Application...
UIKit http://MobileDev.TWhttp://MobileDev.TW
按按鈕顯示文字
2. 輸入名稱ClickToShow à Next
8
UIKit http://MobileDev.TWhttp://MobileDev.TW
按按鈕顯示文字
3. 點選storyboard,拖曳一個label和一個button至目
前唯一的view上
9
UIKit http://MobileDev.TWhttp://MobileDev.TW
按按鈕顯示文字
4. 按住Alt,再點選ViewController.swift
10
UIKit http://MobileDev.TWhttp://MobileDev.TW
按按鈕顯示文字
5. 點選label-->按住Ctrl-->往右拉,設定為Outlet --
>命名為labelArea
11
UIKit http://MobileDev.TWhttp://MobileDev.TW
按按鈕顯示文字
6. 點選button-->按住Ctrl-->往右拉,設定為Action
-->命名為buttonToClick,按下Connect
12
UIKit http://MobileDev.TWhttp://MobileDev.TW
按按鈕顯示文字
7. ViewController.swift àbuttonToClick
13
UIKit http://MobileDev.TWhttp://MobileDev.TW
按按鈕顯示文字
8. command+R執行測試
14
UIKit http://MobileDev.TWhttp://MobileDev.TW
You are learning…
• 可視元件
• UILabel
• UIButton
• 如何在程式中改變可視元件的屬性
• 如何在可視元件的特定事...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab.顯示按了幾下
• 修改範例讓文字顯示區顯示目前按了幾下
16
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab 顯示按了幾下
• 增加一個變數來記錄次數,初始值為0
• 按鈕按下後,增加次數一次,並顯示
17
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab 按圖片按鈕顯示文字
• 按按鈕,按鈕的圖片會變一下,且顯示文字(自動消失)
18
UIKit http://MobileDev.TWhttp://MobileDev.TW
佈局畫面
1. 在storyboard上加入一個button、一個label
2. 按鈕設定一張預設的圖片,label的alpha值設為0
19
UIKit http://MobileDev.TWhttp://MobileDev.TW
按鈕事件處理
1. label的alpha值設為1、設定文字內容
2. 利用transitionWithView將alpha值兩秒鐘降為0
20
UIKit http://MobileDev.TWhttp://MobileDev.TW
上浮選單換顏色 – AlertController
21
UIKit http://MobileDev.TWhttp://MobileDev.TW
增加一個Tap Gesture到畫面上
22
UIKit http://MobileDev.TWhttp://MobileDev.TW
設定Tap Gesture的Outlet與Action
23
UIKit http://MobileDev.TWhttp://MobileDev.TW
設定Tap Gesture的Handler
24
UIKit http://MobileDev.TWhttp://MobileDev.TW
設定Tap Gesture的Handler
25
UIKit http://MobileDev.TWhttp://MobileDev.TW
將tap手勢加在畫面上
26
UIKit http://MobileDev.TWhttp://MobileDev.TW
UISwitch
27
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.按按鈕切換開關
1. 在storyboard中加入switch、button
2. 建立程式關聯性
3. 按下按鈕時,判斷switch的狀態,切...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab
Lab2.當使用者直接觸控開關切換狀態時,如何得知?
Lab3.如何區分畫面上多個開關被切換?
29
UIKit http://MobileDev.TWhttp://MobileDev.TW
(4)UISlider
30
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UISlider
1. 在storyboard中加入slider、label
2. 加入程式關聯性
3. 當slider的值改變時,就更新lab...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.轉向
將slider轉向成直的
32
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab3.顯示增值
• 加一顆按鈕,每按一次,slider的值就增加
33
UIKit http://MobileDev.TWhttp://MobileDev.TW
UIStepper
34
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UIStepper
1. 在storyboard中加入Stepper、Label
2. 設定Stepper的行為Autorepeat、Conti...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2
• 利用UIStepper來控制UISlider,同時顯示數值
36
UIKit http://MobileDev.TWhttp://MobileDev.TW
UITextField
37
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextField
1. 佈置storyboard如下圖
UITextField
UIButton
UILabel
Bar Button
N...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextField
2. 第一個textfield設定Keyboard Type為E-mail
3. 第二個textfield勾選Secur...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextField
6. 新增檔案SecondViewController.swift,並於
Storyborad中,設定對應,並建立關聯性...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextField
7. 判斷使用者輸入的資訊,確定正確才跳至下一畫面
41
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextField
8. 設定TextField的Delegate。當使用者打完姓名按下
Enter時,則拿出打密碼的鍵盤,密碼打完,則收掉...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextField
9. 在ViewController.swift中,如何傳遞資料到下一個
畫面
10.在SecondViewContro...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextField
11.按下Done可以回到上一個畫面
44
UIKit http://MobileDev.TWhttp://MobileDev.TW
You are learning…
• 畫面連結的另一種方法(可加入判斷式)
• 如何將數值從第一個畫面傳到第二個畫面
• 虛擬鍵盤如何收起來
45
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.只顯示名字
• 讓第二頁的歡迎畫面的姓名,只出現email的@前面
• 並且變成首字大寫
46
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.只顯示名字
• 讓第二頁的歡迎畫面的姓名,只出現email的@前面
• 並且變成首字大寫
47
UIKit http://MobileDev.TWhttp://MobileDev.TW
UITextView
48
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextView
1. 佈置storyboard如圖
49
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextView
2. 程式關聯性
50
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextView
3. 一開始,兩顆按鈕先停止作用
4. 使用者開始修改文字時,先將既有的內容存一份
51
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextView
5. 使用者在修改文字時,允許使用上面兩顆按鈕,編
輯完畢,就停止使用按鈕
52
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UITextView
6. 若使用者按下undo,就用舊的內容取代目前的內容
7. 使用者按下完成,則收起鍵盤
53
UIKit http://MobileDev.TWhttp://MobileDev.TW
(8)UIDatePicker
54
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UIDatePicker
1. 在storyboard上,加入label、button、
datePicker
2. 與程式連結產生關係
55
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UIDatePicker
3. datePicker預設為隱藏、date Mode
4. 加入兩個Action,一個從按鈕,一個從datePic...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.顯示年紀
57
UIKit http://MobileDev.TWhttp://MobileDev.TW
UIPickerView
ComponentRow
58
UIKit http://MobileDev.TWhttp://MobileDev.TW
PickerView Basic
1. In Storyboard, add label、button、pickerView
2. Create rela...
UIKit http://MobileDev.TWhttp://MobileDev.TW
PickerView Basic
3. At first, initial the array's data.
4. Add those delegate...
UIKit http://MobileDev.TWhttp://MobileDev.TW
PickerView Basic
5. When the button clicks, show the selected text
at label.
UIKit http://MobileDev.TWhttp://MobileDev.TW
Add more components!
• Add 2 more components in the pickerView.
UIKit http://MobileDev.TWhttp://MobileDev.TW
Add more components!
• add 2 more Arrays.
• Give initial value to these 2 new...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Add more components!
• Add this method to specify the number of
components to...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Add more components!
• The title for row also depend on the specified itm in
...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Using Emoji for Row at Picker
UIKit http://MobileDev.TWhttp://MobileDev.TW
• 3 for number of components in pickerview, and
100 for number of rows in com...
UIKit http://MobileDev.TWhttp://MobileDev.TW
• Create 3 arrays to store each row in every
components, and 1 array for Emoj...
UIKit http://MobileDev.TWhttp://MobileDev.TW
• Initialize each items in 3 arrays, store random
number from 0 to 9.
Using E...
UIKit http://MobileDev.TWhttp://MobileDev.TW
• The Emoji on row in each component is
correspond to the number in each arra...
UIKit http://MobileDev.TWhttp://MobileDev.TW
• When the button is clicked, makes the machine
to roll, and tell it's win or...
UIKit http://MobileDev.TWhttp://MobileDev.TW
You are learning…
• UIPickerView的運用
• 遵循Protocol、實作方法
• 用Array儲存資料、取出資料、回傳數量
...
UIKit http://MobileDev.TWhttp://MobileDev.TW
2.指示型元件
別讓你的使用者不知所措
73
UIKit http://MobileDev.TWhttp://MobileDev.TW
UIActivityIndicatorView
74
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UIActivityIndicatorView
1. 在storyboard中加入IndicatorView、button
2. 可以設定Ind...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UIActivityIndicatorView
4. 設定按鈕按下後的行為
76
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab:3秒後載入圖片
1.按下按鈕後,顯示等待指示,三秒後載入圖片
77
UIKit http://MobileDev.TWhttp://MobileDev.TW
設定圖片顯示
2.加入一張圖片至專案,以及加入一個ImageView
78
UIKit http://MobileDev.TWhttp://MobileDev.TW
計時器
3.增加一個整數變數以及一個計時器
79
UIKit http://MobileDev.TWhttp://MobileDev.TW
按鈕事件處理
4.當按鈕按下後,啟動Indicator,同時也計時,3秒之
後,停止Indicator,讓圖片顯示
80
UIKit http://MobileDev.TWhttp://MobileDev.TW
UIProgressView
81
UIKit http://MobileDev.TWhttp://MobileDev.TW
顯示目前進度值
以前面練習,加上顯示目前進度值
82
UIKit http://MobileDev.TWhttp://MobileDev.TW
畫面佈局
1.新增progressView,progress設定為0、隱藏
83
UIKit http://MobileDev.TWhttp://MobileDev.TW
程式關聯性
2.增加myProgressView
84
UIKit http://MobileDev.TWhttp://MobileDev.TW
按鈕按下後,顯示progressView
3.顯示progressView、修改timer
85
UIKit http://MobileDev.TWhttp://MobileDev.TW
UIAlertController – Alert
86
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1. UIAlertController – Alert
1.做一個按鈕,當按鈕被按下時,執行:
87
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1. UIAlertController – Alert
2.利用UIAlertAction來設定按鈕文字、樣式以及處理
器
88
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1. UIAlertController – Alert
3.利用addAction加入按鈕,並將Alert秀在畫面上
89
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.利用AlertController驗證使用者帳號密碼
90
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.利用AlertController驗證使用者帳號密碼
1.建立一個按鈕,按下後觸發showLoginAlert方法
2.在方法中,建立UIAle...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.利用AlertController驗證使用者帳號密碼
3.加入取消與登入的按鈕
92
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.利用AlertController驗證使用者帳號密碼
4.將Action加至alertController,並且顯示alertControlle...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.利用AlertController驗證使用者帳號密碼
5.在storyboard中加入一個View Controller,並且從第一
個畫面連線...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.利用AlertController驗證使用者帳號密碼
6.在ViewController.swift中加一個方法:
7.Storyboard,在...
UIKit http://MobileDev.TWhttp://MobileDev.TW
UIPageControl
96
UIKit http://MobileDev.TWhttp://MobileDev.TW
手勢換頁
• 運用手勢來進行換頁
97
UIKit http://MobileDev.TWhttp://MobileDev.TW
UIPageControl
1.在storyboard中加入imageview、pageControl、
兩個UISwipeGestureRecogniz...
UIKit http://MobileDev.TWhttp://MobileDev.TW
viewDidLoad()
2.設定圖片模式、屬性、第一張顯示圖片,並加上手勢
辨識器
99
UIKit http://MobileDev.TWhttp://MobileDev.TW
Swipe 處理器
3.判斷是向左還是向右,對應變更PageControl顯示,
以及圖片(記得加入圖片Image0, Image1, Image2)
1...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab 自動輪播圖片
隨時間自己會循環播放
101
UIKit http://MobileDev.TWhttp://MobileDev.TW
viewDidLoad()
加入計時器
102
UIKit http://MobileDev.TWhttp://MobileDev.TW
設置一個變數count
初始值為0
計時器每次觸發後,增加count,再%3,循環在 0 ~ 2
103
UIKit http://MobileDev.TWhttp://MobileDev.TW
3.顯示型元件
如何呈現出最好的一面
104
UIKit http://MobileDev.TWhttp://MobileDev.TW
(1)UIImageView
105
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.使用imageView來作動畫
106
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.使用imageView來作動畫
• 運用UIImageView本身的動畫功能,播放多張圖片
107
UIKit http://MobileDev.TWhttp://MobileDev.TW
You are learning…
• 如何使用UIImageView
• UIImageView如何製作動畫
• 如何從一張大圖剪下部分拿來運用
108
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.兩張圖片切換
• 改寫範例,變成兩張獨立的圖片進行切換
109
UIKit http://MobileDev.TWhttp://MobileDev.TW
(2)UIScrollView
• 使用iPhone瀏覽超過畫面大小的圖片
• 使用者可以縮小、放大圖片
• 使用者可以上下左右移動畫面
110
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UIScrollView
1. 使用storyboard,加入一個UIScrollView
2. 建立程式關聯性以及iVar
111
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UIScrollView
3. 在viewDidLoad中,設定ImageView,加
入ScrollView
112
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UIScrollView
4. 在viewDidLoad中,設定ScrollView的相關參數
5. 在viewDidLoad中,設定一個Lab...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UIScrollView
6. 實作viewForZoomingInScrollView:來讓圖片可以
縮放
114
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.UIScrollView
7. 縮放動作完成時,顯示Label來呈現縮放倍數
115
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.ScrollView + Page Control
可左右捲動電影海報,並且有指示為第幾張海報
116
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.ScrollView + Page Control
1.在畫面上佈局Scroll View與Page Control
117
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.ScrollView + Page Control
2.在專案中加入數張圖片後,在viewDidLoad中設定
ScrollView
118
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.ScrollView + Page Control
3.只讓水平方向可以捲動
119
4.當第i個圖片停留在x為0的位置時,也對應地將
UIPa...
UIKit http://MobileDev.TWhttp://MobileDev.TW
常見畫面流程
120
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.Navigation Controller
• 運用Storyboard建構如下畫面
121
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.TabBar Controller
• 使用Tabbed Application樣板
• 然後自行加入第三個Tab
122
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab3.Tab+Nav
• 基於Tab-Based結構,加入Navigation-Based
123
UIKit http://MobileDev.TWhttp://MobileDev.TW
UI相關程式常忽略的步驟
• 勾選UI元件的兩項屬性
• User Interaction Enabled
• Multiple Touch
• 設定De...
UIKit http://MobileDev.TWhttp://MobileDev.TW
手勢識別器
125
UIKit http://MobileDev.TWhttp://MobileDev.TW
讓元件在各裝置顯示一致
1.選取要設定的元件後,點擊下方工具列的Pin,將
Width與Height打勾,然後按下Add 2 Constraints
126
UIKit http://MobileDev.TWhttp://MobileDev.TW
讓元件在各裝置顯示一致
2.請系統協助補足欠缺的設定
127
UIKit http://MobileDev.TWhttp://MobileDev.TW
請系統直接設定Auto Layout
1.選取要設定的元件後,回復至建議設限
128
UIKit http://MobileDev.TWhttp://MobileDev.TW
虛擬鍵盤
129
UIKit http://MobileDev.TWhttp://MobileDev.TW
TableView
條列式清單 --> 各項目詳細內容
130
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.TableView
1. 使用Master-Detail樣板
2. 在MasterViewController中,加入一個陣列來存放
水果名稱與...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.TableView
3. 在viewDidLoad中指派陣列的內容
132
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.TableView
4. 修改TableView的項目數為水果陣列的物件數
133
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.TableView
5. 修改TableView的項目文字為水果陣列中的對應項目
6. 在storyboard中,第二個畫面加入一個ImageV...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.TableView
7. 回到第一個畫面的控制檔,告知第二個畫面,使用者點
了哪一個項目,並使用這個項目編號來查找水果名稱,
指派給第二個畫面的...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.TableView
8. 第二個畫面的控制檔的viewDidLoad,設定
imageView要載入的圖片
136
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.標題
• 修正第二個畫面的標題
137
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.標題
1. 在第二個畫面的控制檔修改接收物件為Any
2. 在第一個畫面的控制檔的prepareForSegue中,將
該對應字典整個傳遞過去
...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.標題
3. 在第二個畫面控制檔的viewDidLoad中,用拿到的
水果名稱來設定title,也修改圖片檔名的接收方式
139
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab3.加入註解與圖片
140
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab3.加入註解與圖片
1.加入三張40x40的水果小圖至專案
141
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab3.加入註解與圖片
2.在cellForRow AtIndexPath中,設定表格列的副標
題文字以及縮圖
142
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab4.客製化cell
143
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab4.客製化cell
1. 在storyboard中,將tableViewCell的style選成
Custom,然後自行拉入想要的元件以及排列方式
...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab4.客製化cell
2. 選取各個你所加入的UI元件,設定tag編號
145
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab4.客製化cell
3. 在第一個畫面的控制檔中的cellForRowAtIndexPath
,透過tag編號來建立程式關聯性,並且將對應所需的
內...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Subview
147
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.增加Subview在畫面上
1. 利用storyboard加入一顆按鈕,設定為action,名
稱為toChange
2. 在viewDidLo...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.增加Subview在畫面上
3. toChange方法裡面加入:
149
UIKit http://MobileDev.TWhttp://MobileDev.TW
You are learning…
• 看得到的東西不一定要用Storyboard,也可以by code
• 了解在圖學中常用的指定位置、大小的表達方式
...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.加上Label
• 分別在兩個subView加上UILabel,顯示文字Label1
與Label2
151
UIKit http://MobileDev.TWhttp://MobileDev.TW
Touch事件
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
一或多根手...
UIKit http://MobileDev.TWhttp://MobileDev.TW
移動畫面上的物體
153
UIKit http://MobileDev.TWhttp://MobileDev.TW
移動畫面上的物體
1. 在View上加一個UIImageView,並設定預設顯示圖
片
2. 新增檔案 -> iOS Cocoa Touch Class ...
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab1.移動畫面上的物體
155
UIKit http://MobileDev.TWhttp://MobileDev.TW
Lab2.顯示觸控座標
• 請用相同的概念,修改成:畫面上有一個Label,會
顯示目前手指碰到的位置之X,Y座標值
156
UIKit http://MobileDev.TWhttp://MobileDev.TW
運用元件製作切換效果
157
UIKit http://MobileDev.TWhttp://MobileDev.TW
UISegmentedControl
1. 在storyboard中加入Segmented、Label
2. 建立程式關聯性
158
3. 透過selec...
UIKit http://MobileDev.TWhttp://MobileDev.TW
延後觸發的做法
• 按鈕按下後,過了3秒才執行printToConsole方法
159
UIKit http://MobileDev.TWhttp://MobileDev.TW
UserDefaults
• 可長久儲存在程式中使用
• 切換畫面、程式關閉都不影響
• 存取
160
UIKit http://MobileDev.TWhttp://MobileDev.TW
敬請指教
161
Contact
Ryan Chung
(02) 6631 – 6555
Ryan@iii.org.tw
Upcoming SlideShare
Loading in …5
×

UIKit-Swift

2,418 views

Published on

http://MobileDev.TW

Published in: Technology
  • Be the first to comment

UIKit-Swift

  1. 1. UIKit http://MobileDev.TWhttp://MobileDev.TW iOS APP Developer UIKit Framework with Swift Ryan@MobileDev.TW 1
  2. 2. UIKit http://MobileDev.TWhttp://MobileDev.TW iOS Framework 提供iOS應用程式的 使用者 界面 建構與 管理的 類別 ,所有 觸控螢 幕界 面中的 物件、 事件 處理、 繪製模 式、 視窗、 可視元 件與 控制項 目。 2
  3. 3. UIKit http://MobileDev.TWhttp://MobileDev.TW 常用的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
  4. 4. UIKit http://MobileDev.TWhttp://MobileDev.TW 1.操作型元件 你來我往的高互動 4
  5. 5. UIKit http://MobileDev.TWhttp://MobileDev.TW UIButton • 按鈕:使用者可以點擊,程式能做出回應 • 設定按鈕標題、圖片等屬性 • 按鈕狀態 5
  6. 6. UIKit http://MobileDev.TWhttp://MobileDev.TW 按按鈕顯示文字 按下按鈕之後,上方顯示區出現文字 界面 1. 一個文字顯示區 2. 一個按鈕 邏輯 當按鈕被按下時, 在文字顯示區顯示 文字 6
  7. 7. UIKit http://MobileDev.TWhttp://MobileDev.TW 按按鈕顯示文字 1. File à New Project à 選擇 iOS à Application àSingle View Application à Next… 7
  8. 8. UIKit http://MobileDev.TWhttp://MobileDev.TW 按按鈕顯示文字 2. 輸入名稱ClickToShow à Next 8
  9. 9. UIKit http://MobileDev.TWhttp://MobileDev.TW 按按鈕顯示文字 3. 點選storyboard,拖曳一個label和一個button至目 前唯一的view上 9
  10. 10. UIKit http://MobileDev.TWhttp://MobileDev.TW 按按鈕顯示文字 4. 按住Alt,再點選ViewController.swift 10
  11. 11. UIKit http://MobileDev.TWhttp://MobileDev.TW 按按鈕顯示文字 5. 點選label-->按住Ctrl-->往右拉,設定為Outlet -- >命名為labelArea 11
  12. 12. UIKit http://MobileDev.TWhttp://MobileDev.TW 按按鈕顯示文字 6. 點選button-->按住Ctrl-->往右拉,設定為Action -->命名為buttonToClick,按下Connect 12
  13. 13. UIKit http://MobileDev.TWhttp://MobileDev.TW 按按鈕顯示文字 7. ViewController.swift àbuttonToClick 13
  14. 14. UIKit http://MobileDev.TWhttp://MobileDev.TW 按按鈕顯示文字 8. command+R執行測試 14
  15. 15. UIKit http://MobileDev.TWhttp://MobileDev.TW You are learning… • 可視元件 • UILabel • UIButton • 如何在程式中改變可視元件的屬性 • 如何在可視元件的特定事件發生時,執行要做的動作 15
  16. 16. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab.顯示按了幾下 • 修改範例讓文字顯示區顯示目前按了幾下 16
  17. 17. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab 顯示按了幾下 • 增加一個變數來記錄次數,初始值為0 • 按鈕按下後,增加次數一次,並顯示 17
  18. 18. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab 按圖片按鈕顯示文字 • 按按鈕,按鈕的圖片會變一下,且顯示文字(自動消失) 18
  19. 19. UIKit http://MobileDev.TWhttp://MobileDev.TW 佈局畫面 1. 在storyboard上加入一個button、一個label 2. 按鈕設定一張預設的圖片,label的alpha值設為0 19
  20. 20. UIKit http://MobileDev.TWhttp://MobileDev.TW 按鈕事件處理 1. label的alpha值設為1、設定文字內容 2. 利用transitionWithView將alpha值兩秒鐘降為0 20
  21. 21. UIKit http://MobileDev.TWhttp://MobileDev.TW 上浮選單換顏色 – AlertController 21
  22. 22. UIKit http://MobileDev.TWhttp://MobileDev.TW 增加一個Tap Gesture到畫面上 22
  23. 23. UIKit http://MobileDev.TWhttp://MobileDev.TW 設定Tap Gesture的Outlet與Action 23
  24. 24. UIKit http://MobileDev.TWhttp://MobileDev.TW 設定Tap Gesture的Handler 24
  25. 25. UIKit http://MobileDev.TWhttp://MobileDev.TW 設定Tap Gesture的Handler 25
  26. 26. UIKit http://MobileDev.TWhttp://MobileDev.TW 將tap手勢加在畫面上 26
  27. 27. UIKit http://MobileDev.TWhttp://MobileDev.TW UISwitch 27
  28. 28. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.按按鈕切換開關 1. 在storyboard中加入switch、button 2. 建立程式關聯性 3. 按下按鈕時,判斷switch的狀態,切換成另一種 28
  29. 29. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab Lab2.當使用者直接觸控開關切換狀態時,如何得知? Lab3.如何區分畫面上多個開關被切換? 29
  30. 30. UIKit http://MobileDev.TWhttp://MobileDev.TW (4)UISlider 30
  31. 31. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UISlider 1. 在storyboard中加入slider、label 2. 加入程式關聯性 3. 當slider的值改變時,就更新label所顯示的數值 31 4. 一開始時,Label即顯示目前的Slider數值
  32. 32. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.轉向 將slider轉向成直的 32
  33. 33. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab3.顯示增值 • 加一顆按鈕,每按一次,slider的值就增加 33
  34. 34. UIKit http://MobileDev.TWhttp://MobileDev.TW UIStepper 34
  35. 35. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UIStepper 1. 在storyboard中加入Stepper、Label 2. 設定Stepper的行為Autorepeat、Continuous 3. 建立程式關聯性 4. 當Stepper改變時,設定Label的顯示文字 35
  36. 36. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2 • 利用UIStepper來控制UISlider,同時顯示數值 36
  37. 37. UIKit http://MobileDev.TWhttp://MobileDev.TW UITextField 37
  38. 38. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextField 1. 佈置storyboard如下圖 UITextField UIButton UILabel Bar Button Navigation Bar UITextField 38
  39. 39. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextField 2. 第一個textfield設定Keyboard Type為E-mail 3. 第二個textfield勾選Secure Text Entry 4. 兩個畫面連接(不是用button連,從ViewController拉 出),設定如下 5. 第一個畫面程式關聯性如下 39
  40. 40. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextField 6. 新增檔案SecondViewController.swift,並於 Storyborad中,設定對應,並建立關聯性如下 40
  41. 41. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextField 7. 判斷使用者輸入的資訊,確定正確才跳至下一畫面 41
  42. 42. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextField 8. 設定TextField的Delegate。當使用者打完姓名按下 Enter時,則拿出打密碼的鍵盤,密碼打完,則收掉 鍵盤。 42
  43. 43. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextField 9. 在ViewController.swift中,如何傳遞資料到下一個 畫面 10.在SecondViewController.swift中將資料顯示出來 43
  44. 44. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextField 11.按下Done可以回到上一個畫面 44
  45. 45. UIKit http://MobileDev.TWhttp://MobileDev.TW You are learning… • 畫面連結的另一種方法(可加入判斷式) • 如何將數值從第一個畫面傳到第二個畫面 • 虛擬鍵盤如何收起來 45
  46. 46. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.只顯示名字 • 讓第二頁的歡迎畫面的姓名,只出現email的@前面 • 並且變成首字大寫 46
  47. 47. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.只顯示名字 • 讓第二頁的歡迎畫面的姓名,只出現email的@前面 • 並且變成首字大寫 47
  48. 48. UIKit http://MobileDev.TWhttp://MobileDev.TW UITextView 48
  49. 49. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextView 1. 佈置storyboard如圖 49
  50. 50. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextView 2. 程式關聯性 50
  51. 51. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextView 3. 一開始,兩顆按鈕先停止作用 4. 使用者開始修改文字時,先將既有的內容存一份 51
  52. 52. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextView 5. 使用者在修改文字時,允許使用上面兩顆按鈕,編 輯完畢,就停止使用按鈕 52
  53. 53. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UITextView 6. 若使用者按下undo,就用舊的內容取代目前的內容 7. 使用者按下完成,則收起鍵盤 53
  54. 54. UIKit http://MobileDev.TWhttp://MobileDev.TW (8)UIDatePicker 54
  55. 55. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UIDatePicker 1. 在storyboard上,加入label、button、 datePicker 2. 與程式連結產生關係 55
  56. 56. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UIDatePicker 3. datePicker預設為隱藏、date Mode 4. 加入兩個Action,一個從按鈕,一個從datePicker 56
  57. 57. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.顯示年紀 57
  58. 58. UIKit http://MobileDev.TWhttp://MobileDev.TW UIPickerView ComponentRow 58
  59. 59. UIKit http://MobileDev.TWhttp://MobileDev.TW PickerView Basic 1. In Storyboard, add label、button、pickerView 2. Create relationship between Storyboard&Code:
  60. 60. UIKit http://MobileDev.TWhttp://MobileDev.TW PickerView Basic 3. At first, initial the array's data. 4. Add those delegate methods related to pickerView
  61. 61. UIKit http://MobileDev.TWhttp://MobileDev.TW PickerView Basic 5. When the button clicks, show the selected text at label.
  62. 62. UIKit http://MobileDev.TWhttp://MobileDev.TW Add more components! • Add 2 more components in the pickerView.
  63. 63. UIKit http://MobileDev.TWhttp://MobileDev.TW Add more components! • add 2 more Arrays. • Give initial value to these 2 new arrays.
  64. 64. UIKit http://MobileDev.TWhttp://MobileDev.TW Add more components! • 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.
  65. 65. UIKit http://MobileDev.TWhttp://MobileDev.TW Add more components! • 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
  66. 66. UIKit http://MobileDev.TWhttp://MobileDev.TW Using Emoji for Row at Picker
  67. 67. UIKit http://MobileDev.TWhttp://MobileDev.TW • 3 for number of components in pickerview, and 100 for number of rows in component Using Emoji for Row at Picker
  68. 68. UIKit http://MobileDev.TWhttp://MobileDev.TW • Create 3 arrays to store each row in every components, and 1 array for Emoji icons Using Emoji for Row at Picker
  69. 69. UIKit http://MobileDev.TWhttp://MobileDev.TW • Initialize each items in 3 arrays, store random number from 0 to 9. Using Emoji for Row at Picker
  70. 70. UIKit http://MobileDev.TWhttp://MobileDev.TW • The Emoji on row in each component is correspond to the number in each array. Using Emoji for Row at Picker
  71. 71. UIKit http://MobileDev.TWhttp://MobileDev.TW • 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 Using Emoji for Row at Picker
  72. 72. UIKit http://MobileDev.TWhttp://MobileDev.TW You are learning… • UIPickerView的運用 • 遵循Protocol、實作方法 • 用Array儲存資料、取出資料、回傳數量 • 亂數的使用 • UIPickerView跳到特定Row • 自訂方法、呼叫自訂方法 72
  73. 73. UIKit http://MobileDev.TWhttp://MobileDev.TW 2.指示型元件 別讓你的使用者不知所措 73
  74. 74. UIKit http://MobileDev.TWhttp://MobileDev.TW UIActivityIndicatorView 74
  75. 75. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UIActivityIndicatorView 1. 在storyboard中加入IndicatorView、button 2. 可以設定Indicator的樣式、顏色、初始狀態、停止 時隱藏 3. 產生程式聯結 75
  76. 76. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UIActivityIndicatorView 4. 設定按鈕按下後的行為 76
  77. 77. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab:3秒後載入圖片 1.按下按鈕後,顯示等待指示,三秒後載入圖片 77
  78. 78. UIKit http://MobileDev.TWhttp://MobileDev.TW 設定圖片顯示 2.加入一張圖片至專案,以及加入一個ImageView 78
  79. 79. UIKit http://MobileDev.TWhttp://MobileDev.TW 計時器 3.增加一個整數變數以及一個計時器 79
  80. 80. UIKit http://MobileDev.TWhttp://MobileDev.TW 按鈕事件處理 4.當按鈕按下後,啟動Indicator,同時也計時,3秒之 後,停止Indicator,讓圖片顯示 80
  81. 81. UIKit http://MobileDev.TWhttp://MobileDev.TW UIProgressView 81
  82. 82. UIKit http://MobileDev.TWhttp://MobileDev.TW 顯示目前進度值 以前面練習,加上顯示目前進度值 82
  83. 83. UIKit http://MobileDev.TWhttp://MobileDev.TW 畫面佈局 1.新增progressView,progress設定為0、隱藏 83
  84. 84. UIKit http://MobileDev.TWhttp://MobileDev.TW 程式關聯性 2.增加myProgressView 84
  85. 85. UIKit http://MobileDev.TWhttp://MobileDev.TW 按鈕按下後,顯示progressView 3.顯示progressView、修改timer 85
  86. 86. UIKit http://MobileDev.TWhttp://MobileDev.TW UIAlertController – Alert 86
  87. 87. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1. UIAlertController – Alert 1.做一個按鈕,當按鈕被按下時,執行: 87
  88. 88. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1. UIAlertController – Alert 2.利用UIAlertAction來設定按鈕文字、樣式以及處理 器 88
  89. 89. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1. UIAlertController – Alert 3.利用addAction加入按鈕,並將Alert秀在畫面上 89
  90. 90. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.利用AlertController驗證使用者帳號密碼 90
  91. 91. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.利用AlertController驗證使用者帳號密碼 1.建立一個按鈕,按下後觸發showLoginAlert方法 2.在方法中,建立UIAlertController的實體,選擇Alert樣 式,然後加入兩個TextField與其設定處理器 91
  92. 92. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.利用AlertController驗證使用者帳號密碼 3.加入取消與登入的按鈕 92
  93. 93. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.利用AlertController驗證使用者帳號密碼 4.將Action加至alertController,並且顯示alertController 93
  94. 94. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.利用AlertController驗證使用者帳號密碼 5.在storyboard中加入一個View Controller,並且從第一 個畫面連線到第二個畫面,設定為Present Modally樣式 ,並且Identifier命名為loginSuccess 94
  95. 95. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.利用AlertController驗證使用者帳號密碼 6.在ViewController.swift中加一個方法: 7.Storyboard,在第二個畫面加一個按鈕,按鈕拉線至橘 色的Exit,出現backToMain,點選 95
  96. 96. UIKit http://MobileDev.TWhttp://MobileDev.TW UIPageControl 96
  97. 97. UIKit http://MobileDev.TWhttp://MobileDev.TW 手勢換頁 • 運用手勢來進行換頁 97
  98. 98. UIKit http://MobileDev.TWhttp://MobileDev.TW UIPageControl 1.在storyboard中加入imageview、pageControl、 兩個UISwipeGestureRecognizer(一左、一右),兩個 拉進同一個ActionHandler 98
  99. 99. UIKit http://MobileDev.TWhttp://MobileDev.TW viewDidLoad() 2.設定圖片模式、屬性、第一張顯示圖片,並加上手勢 辨識器 99
  100. 100. UIKit http://MobileDev.TWhttp://MobileDev.TW Swipe 處理器 3.判斷是向左還是向右,對應變更PageControl顯示, 以及圖片(記得加入圖片Image0, Image1, Image2) 100
  101. 101. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab 自動輪播圖片 隨時間自己會循環播放 101
  102. 102. UIKit http://MobileDev.TWhttp://MobileDev.TW viewDidLoad() 加入計時器 102
  103. 103. UIKit http://MobileDev.TWhttp://MobileDev.TW 設置一個變數count 初始值為0 計時器每次觸發後,增加count,再%3,循環在 0 ~ 2 103
  104. 104. UIKit http://MobileDev.TWhttp://MobileDev.TW 3.顯示型元件 如何呈現出最好的一面 104
  105. 105. UIKit http://MobileDev.TWhttp://MobileDev.TW (1)UIImageView 105
  106. 106. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.使用imageView來作動畫 106
  107. 107. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.使用imageView來作動畫 • 運用UIImageView本身的動畫功能,播放多張圖片 107
  108. 108. UIKit http://MobileDev.TWhttp://MobileDev.TW You are learning… • 如何使用UIImageView • UIImageView如何製作動畫 • 如何從一張大圖剪下部分拿來運用 108
  109. 109. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.兩張圖片切換 • 改寫範例,變成兩張獨立的圖片進行切換 109
  110. 110. UIKit http://MobileDev.TWhttp://MobileDev.TW (2)UIScrollView • 使用iPhone瀏覽超過畫面大小的圖片 • 使用者可以縮小、放大圖片 • 使用者可以上下左右移動畫面 110
  111. 111. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UIScrollView 1. 使用storyboard,加入一個UIScrollView 2. 建立程式關聯性以及iVar 111
  112. 112. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UIScrollView 3. 在viewDidLoad中,設定ImageView,加 入ScrollView 112
  113. 113. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UIScrollView 4. 在viewDidLoad中,設定ScrollView的相關參數 5. 在viewDidLoad中,設定一個Label來顯示目前的縮 放倍數 113
  114. 114. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UIScrollView 6. 實作viewForZoomingInScrollView:來讓圖片可以 縮放 114
  115. 115. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.UIScrollView 7. 縮放動作完成時,顯示Label來呈現縮放倍數 115
  116. 116. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.ScrollView + Page Control 可左右捲動電影海報,並且有指示為第幾張海報 116
  117. 117. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.ScrollView + Page Control 1.在畫面上佈局Scroll View與Page Control 117
  118. 118. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.ScrollView + Page Control 2.在專案中加入數張圖片後,在viewDidLoad中設定 ScrollView 118
  119. 119. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.ScrollView + Page Control 3.只讓水平方向可以捲動 119 4.當第i個圖片停留在x為0的位置時,也對應地將 UIPageControl的currentPage設定為i
  120. 120. UIKit http://MobileDev.TWhttp://MobileDev.TW 常見畫面流程 120
  121. 121. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.Navigation Controller • 運用Storyboard建構如下畫面 121
  122. 122. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.TabBar Controller • 使用Tabbed Application樣板 • 然後自行加入第三個Tab 122
  123. 123. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab3.Tab+Nav • 基於Tab-Based結構,加入Navigation-Based 123
  124. 124. UIKit http://MobileDev.TWhttp://MobileDev.TW UI相關程式常忽略的步驟 • 勾選UI元件的兩項屬性 • User Interaction Enabled • Multiple Touch • 設定Delegate的對象為自己 • xxx.delegate=self; • 或將該UI元件的delegate拉至該View Controller • Segue Identifier • 在Storyboard中設定,並注意大小寫 124
  125. 125. UIKit http://MobileDev.TWhttp://MobileDev.TW 手勢識別器 125
  126. 126. UIKit http://MobileDev.TWhttp://MobileDev.TW 讓元件在各裝置顯示一致 1.選取要設定的元件後,點擊下方工具列的Pin,將 Width與Height打勾,然後按下Add 2 Constraints 126
  127. 127. UIKit http://MobileDev.TWhttp://MobileDev.TW 讓元件在各裝置顯示一致 2.請系統協助補足欠缺的設定 127
  128. 128. UIKit http://MobileDev.TWhttp://MobileDev.TW 請系統直接設定Auto Layout 1.選取要設定的元件後,回復至建議設限 128
  129. 129. UIKit http://MobileDev.TWhttp://MobileDev.TW 虛擬鍵盤 129
  130. 130. UIKit http://MobileDev.TWhttp://MobileDev.TW TableView 條列式清單 --> 各項目詳細內容 130
  131. 131. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.TableView 1. 使用Master-Detail樣板 2. 在MasterViewController中,加入一個陣列來存放 水果名稱與水果圖片檔案名稱 131
  132. 132. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.TableView 3. 在viewDidLoad中指派陣列的內容 132
  133. 133. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.TableView 4. 修改TableView的項目數為水果陣列的物件數 133
  134. 134. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.TableView 5. 修改TableView的項目文字為水果陣列中的對應項目 6. 在storyboard中,第二個畫面加入一個ImageView以 及一個接收圖片檔名的變數,並建立畫面與程式關聯性 134
  135. 135. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.TableView 7. 回到第一個畫面的控制檔,告知第二個畫面,使用者點 了哪一個項目,並使用這個項目編號來查找水果名稱, 指派給第二個畫面的變數 135
  136. 136. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.TableView 8. 第二個畫面的控制檔的viewDidLoad,設定 imageView要載入的圖片 136
  137. 137. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.標題 • 修正第二個畫面的標題 137
  138. 138. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.標題 1. 在第二個畫面的控制檔修改接收物件為Any 2. 在第一個畫面的控制檔的prepareForSegue中,將 該對應字典整個傳遞過去 138
  139. 139. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.標題 3. 在第二個畫面控制檔的viewDidLoad中,用拿到的 水果名稱來設定title,也修改圖片檔名的接收方式 139
  140. 140. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab3.加入註解與圖片 140
  141. 141. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab3.加入註解與圖片 1.加入三張40x40的水果小圖至專案 141
  142. 142. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab3.加入註解與圖片 2.在cellForRow AtIndexPath中,設定表格列的副標 題文字以及縮圖 142
  143. 143. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab4.客製化cell 143
  144. 144. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab4.客製化cell 1. 在storyboard中,將tableViewCell的style選成 Custom,然後自行拉入想要的元件以及排列方式 144
  145. 145. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab4.客製化cell 2. 選取各個你所加入的UI元件,設定tag編號 145
  146. 146. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab4.客製化cell 3. 在第一個畫面的控制檔中的cellForRowAtIndexPath ,透過tag編號來建立程式關聯性,並且將對應所需的 內容指派進去 146
  147. 147. UIKit http://MobileDev.TWhttp://MobileDev.TW Subview 147
  148. 148. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.增加Subview在畫面上 1. 利用storyboard加入一顆按鈕,設定為action,名 稱為toChange 2. 在viewDidLoad的方法中,進行設定 148
  149. 149. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.增加Subview在畫面上 3. toChange方法裡面加入: 149
  150. 150. UIKit http://MobileDev.TWhttp://MobileDev.TW You are learning… • 看得到的東西不一定要用Storyboard,也可以by code • 了解在圖學中常用的指定位置、大小的表達方式 • 了解在畫面上有圖層的概念 150
  151. 151. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.加上Label • 分別在兩個subView加上UILabel,顯示文字Label1 與Label2 151
  152. 152. UIKit http://MobileDev.TWhttp://MobileDev.TW 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. 153. UIKit http://MobileDev.TWhttp://MobileDev.TW 移動畫面上的物體 153
  154. 154. UIKit http://MobileDev.TWhttp://MobileDev.TW 移動畫面上的物體 1. 在View上加一個UIImageView,並設定預設顯示圖 片 2. 新增檔案 -> iOS Cocoa Touch Class ->subClass of UIImageView -->命名為MyShape 3. 將storyboard裡面的UIImageView的Class設定為 MyShape,並且勾選User Interaction Enabled 4. 在MyShape.swift中,加入下頁觸控方法 154
  155. 155. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab1.移動畫面上的物體 155
  156. 156. UIKit http://MobileDev.TWhttp://MobileDev.TW Lab2.顯示觸控座標 • 請用相同的概念,修改成:畫面上有一個Label,會 顯示目前手指碰到的位置之X,Y座標值 156
  157. 157. UIKit http://MobileDev.TWhttp://MobileDev.TW 運用元件製作切換效果 157
  158. 158. UIKit http://MobileDev.TWhttp://MobileDev.TW UISegmentedControl 1. 在storyboard中加入Segmented、Label 2. 建立程式關聯性 158 3. 透過selectedSegmentIndex來進行判斷
  159. 159. UIKit http://MobileDev.TWhttp://MobileDev.TW 延後觸發的做法 • 按鈕按下後,過了3秒才執行printToConsole方法 159
  160. 160. UIKit http://MobileDev.TWhttp://MobileDev.TW UserDefaults • 可長久儲存在程式中使用 • 切換畫面、程式關閉都不影響 • 存取 160
  161. 161. UIKit http://MobileDev.TWhttp://MobileDev.TW 敬請指教 161 Contact Ryan Chung (02) 6631 – 6555 Ryan@iii.org.tw

×