モバイル・アプリ勉強会 iOS編第2回 Swiftの基礎と画面の遷移,UIKit

2015年5月15日(金) 10:00 11:30
モバイル・アプリ勉強会
iOS編第2回 Swiftの基礎と画面の遷移,UIKit
岩手県立大学大学院
Human Interface Lab. @ IPU2015
ソフトウェア情報学研究科
宮原崇志
目次
• 前回のあらすじ
• スイッチの処理
• 画面遷移
• 加速度の取得
• タイマー処理
• スライダーの処理
• おしらせ
前回のあらすじ
•
•
•
•
•
•
Xcodeの導入・起動・iOSシュミレータの起動
Auto layoutについての長い説明
Story.Boardについての長い説明
UIButtonの処理
UILabelの処理
Assistant Editorを使ったCodeの書き方についての長い説明
はじめに
ボタン押下処理ボタンの配置
STEP1
1.
2.
3.
4.
UISwitchをViewControllerに追加
Switchを任意の位置に配置
Resolve Auto layout Issuseにて，Update Constraintsを選択
ビルドし実行
作成
ボタン押下処理コードに紐付け
STEP2
1. assistant editorにて，Automatic/ViewController.swiftを開く
2. StoryBoardにて，ボタンを選択しControlキーを押しながら，
assistant editorのAutomatic/ViewController.swiftへドラッグする
3. Outletを選択し，変数の名前を定義
4. StoryBoardにて，ボタンを選択しControlキーを押しながら，
assistant editorのAutomatic/ViewController.swiftへドラッグする
4. Actionを選択し，関数の名前を定義
@IBAction func SwitchActionButton(sender: AnyObject) {
println("Push This Button")
}
作成
ボタン押下処理 Viewの背景色変更
STEP3
1. UISwitchの状態を取得
mySwitch.on / mySwitch.off
UISwitchはオン・オフの状態を持つ（真か偽か）
練習
Switchがオンならば，背景色を青・オフならば赤にする処理を実装
ヒント
backgroundColorやUIColorといった
メソッドが用意されている
練習
画面遷移 Viewの追加
画面遷移
STEP1
1.
2.
3.
4.
5.
ViewControllerをStoryBoardに追加
2つ目のViewにLabelを追加
1つ目の画面に，画面遷移用のボタンを設置
そのボタンを選択し，Controlキーを押しならが，2つ目のViewにドラッグ
snowを選択
6. ビルドして実行
画面遷移 NavigationController
画面遷移
STEP2
1. 1つ目のViewを選択し，Editor＞Embed In＞Navigation Controllerを選択
2. 新しいボタン，Viewを作成
3. 新しいボタンから，新しいViewへ画面遷移を設定
加速度の取得
加速度
STEP1
1. CoreMotionをインポートする
Import CoreMotion
2. ViewにLabelを追加
//UILabelをコードで定義
let XLabel: UILabel = UILabel(frame: CGRectMake(0, 0, 200, 50))
XLabel.backgroundColor = UIColor.blueColor()
XLabel.layer.masksToBounds = true
XLabel.layer.cornerRadius = 2.0
XLabel.textColor = UIColor.whiteColor()
XLabel.shadowColor = UIColor.grayColor()
XLabel.textAlignment = NSTextAlignment.Center
XLabel.layer.position = CGPoint(x: self.view.bounds.width/2, y: 200)
//viewにUIlabelを追加
self.view.addSubview(XLabel)
3. Y軸・Z軸も作成する
加速度の取得
加速度
STEP2
1. 加速度を取得する(X軸)
//MotionManagerを生成
Motion_Manager = CMMotionManager()
//更新周期を設定
Motion_Manager.accelerometerUpdateInterval = 0.05 //20Hz
//加速度の取得
Motion_Manager.startAccelerometerUpdatesToQueue(NSOperationQ
ueue.mainQueue(),
withHandler: {(accelerometerData:CMAccelerometerData!,
error:NSError!) -> Void in
XLabel.text = "x=¥(accelerometerData.acceleration.x)"
})
2. Y軸・Z軸も作成する
3. リファレンス
http://u222u.info/l1kE
タイマー加算処理
タイマー
STEP1
1. 変数を定義
var cnt : Float = 0
2. Labelを追加
//UILabelをコードで定義
var Label: UILabel = UILabel(frame: CGRectMake(0, 0, 200, 50))
Label.backgroundColor = UIColor.blueColor()
Label.layer.masksToBounds = true
Label.layer.cornerRadius = 2.0
Label.textColor = UIColor.whiteColor()
Label.shadowColor = UIColor.grayColor()
Label.textAlignment = NSTextAlignment.Center
Label.layer.position = CGPoint(x: self.view.bounds.width/2, y: 200)
//viewにUIlabelを追加
self.view.addSubview(Label)
タイマー加算処理
タイマー
STEP2
1. タイマーを作る
//タイマーを作る.
NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector:
"onUpdate:", userInfo: nil, repeats: true)
2. メソッドを定義
//NSTimerIntervalで指定された秒数毎に呼び出されるメソッド.
func onUpdate(timer : NSTimer){
cnt += 0.1
//桁数を指定して文字列を作る.
let str = "Time:".stringByAppendingFormat("%.1f",cnt)
Label.text = str
}
3. リファレンス
http://u222u.info/l1kA
タイマー停止処理
タイマー
STEP1
1. 変数を定義
var timer : NSTimer
2. ボタンを追加
//UILabelをコードで定義
let tmButton: UIButton = UIButton(frame: CGRectMake(0, 0, 200, 50))
tmButton.backgroundColor = UIColor.blueColor()
tmButton.layer.masksToBounds = true
tmButton.layer.cornerRadius = 2.0
tmButton.textColor = UIColor.whiteColor()
tmButton.setTitle = ( Stop Timer , forState: UIControlState.Normal)
tmButton.layer.position = CGPointMake(self.view.center.x,
self.view.center.y + 100)
tmButton.addTarget(self, action: stopTimer , forControlEvents:
UIControlEvents.TouchUpInside)
//viewにUIlabelを追加
self.view.addSubview(tmButton)
タイマー停止処理
タイマー
STEP2
1. タイマーを作る
//タイマーを作る.
NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector:
"onUpdate:", userInfo: nil, repeats: true)
2. 停止処理
func stopTimer(sender : UIButton){
//timerを破棄する.
timer.invalidate()
｝
タイマー Start/Stop処理
タイマーをStart・Stop処理を使って，以下の仕様の処理を作ってみよう
[仕様]
• ボタンは1つ
• タイマー稼働時のボタンタイトルは Stop Timer
• タイマー停止時のボタンタイトルは Start TImer
• タイマーはStopボタンを押すと停止
• タイマーはStartボタンを押すと再開(←0秒から再スタートではない)
完成イメージ
練習
スライダー値の取得
STEP1
1. Sliderを追加
//UILabelをコードで定義
let Slider = UISlider(frame: CGRectMake(0, 0, 200, 30))
Slider.layer.position = CGPointMake(self.view.frame.midX, 500)
Slider.backgroundColor = UIColor.whiteColor()
Slider.layer.cornerRadius = 10.0
Slider.layer.shadowOpacity = 0.5
Slider.layer.masksToBounds = false
// 最小値と最大値を設定する.
Slider.minimumValue = 0
Slider.maximumValue = 10
// Sliderの現在位置より右のTintカラーを変える.
Slider.maximumTrackTintColor = UIColor.grayColor()
// Sliderの現在位置より左のTintカラーを変える.
Slider.minimumTrackTintColor = UIColor.blackColor()
Slider.addTarget(self, action: ShowSliderVal:", forControlEvents:
UIControlEvents.ValueChanged)
self.view.addSubview (Slider)
スライダー
スライダー値の取得
STEP2
1. Labelに値を代入
//Sliderの値が変わった時に呼ばれるメソッド
internal func ShowSliderVal(sender : UISlider){
var val = String(Int(sender.value))
Label.text = val
}
スライダー
おしらせ
日時：5月23日(土) 10:00 ~ 18:00 場所：滝沢市IPUイノベーションセンター＜取り組むテーマ＞
Android、Unity、デザインなどなんでもありです：）
新しいことにチャレンジするのも良し！
前から取り組んでいたことに没頭するのも良し！
みんなでもくもくしましょう∼
＜参加方法＞
・Facebookイベントページでの参加表明（当ページ）
・メール（[email protected]）
＜リンク＞
https://www.facebook.com/events/1593436810911508/
勉強会

Download Report