Xcode
iOS
Swift

Xcode6/Swiftで、ボタンを押すとラベルが変わるだけのアプリを作る

More than 3 years have passed since last update.

アプリ作りを始めようとしたけどSwiftなるものが出てきて、

なんだかもうObjective-Cを使う気が起きないのでXcode6Beta版を入れてみる。

でもXcode6をいきなり使い始めたら基本的な使い方がよくわからない。

そんな自分みたいな人へ。

Swiftが使える環境を整えるまでの話はこちらで。


プロジェクト作成

Xcodeを起動して出てくる初期画面。

Create a new Xcode projectを選択。

スクリーンショット 2014-09-04 6.42.34.png

テンプレート選択画面。

Single View Applicationを選択。

スクリーンショット 2014-09-04 6.42.53.png

プロジェクトの初期設定画面。

とりあえず何かしら適当な名前をつける。

プロジェクトの保存ディレクトリを選べば、プロジェクト作成完了!

スクリーンショット 2014-09-04 6.43.15.png


初期状態を見てみる

できたもの。

今回使うのはViewController.swiftMain.storyboardだけ。

ざっくり言うと、



  • ViewController.swift:画面の制御。


  • Main.storyboard:オブジェクトの配置や画面遷移の設定。

スクリーンショット 2014-09-04 6.44.13.png

ストーリーボード。

正方形っぽい形をしてるけど、後述のConstraintを使って画面のサイズによらないUIを設計しろって心意気?

ちなみに何もないところをダブルクリックすると、縮小表示になる。

スクリーンショット 2014-09-04 6.44.53.png

ストーリーボードを実機のサイズにしたい!って場合は、画面左側の下図のSizeの項目で変更可能。

スクリーンショット 2014-09-04 6.45.49.png


ボタンとラベルを配置する

画面右下のリストからLabelを見つけて、ストーリーボードにドラッグ。

ストーリーボードが縮小表示中の場合は配置できないので注意。

Buttonも同様に配置。

スクリーンショット 2014-09-04 6.46.05.png

とりあえずこんな感じに。

スクリーンショット 2014-09-04 6.47.32.png

このままだと変な位置に表示されるので、Constraintを設定する。

平たく言うと何を基準に配置するかの設定。

うまく設定すれば、画面サイズが変わろうと、縦横が変わろうといい感じの表示にできるっぽい。

今回は画面中心から上下30pxのところに配置する。

ストーリーボードの画面の右下のボタンを押して、

Horizonal Center in Containerを0に、Vertical Center in Containerを-30に指定。

Update FramesItems of New Constraintsにして、Add 2 Constraintsとなっているボタンを押す。

ラベルも同様に、(0, 30)の位置に配置。

スクリーンショット 2014-09-04 7.10.25.png


プログラムと関連付ける

ボタンとソースはGUIで関連付けられる。

まずは画面にストーリーボードとソースの両方を表示する。

画面右上のこれらのボタンの中から、左から2番目の蝶ネクタイっぽいやつをクリック。

(蝶ネクタイにしか見えないけどホントは何を表してるんだろ…。)

スクリーンショット 2014-09-04 7.10.50.png

Controlを押しながらラベルからソースへドラッグ。

すると下図のような表示になるので、適当にボタンの名前を入れてConnect。

ボタンも同様に。

スクリーンショット 2014-09-04 7.18.53.png

ボタンがタッチされたときに呼ばれる関数を作成する。

ストーリーボードのボタンを選択すると、右側に下図のような表示が現れるので、

Touch Downの○からソースのいい感じのところまでドラッグ。

適当な関数名を付けてConnect。

スクリーンショット 2014-09-04 7.17.05.png

追加されたソースはこんな感じ。

スクリーンショット 2014-09-04 7.19.57.png


ボタンが押された時の動作を実装

と言っても一行書くだけ。


ViewController.swift

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

@IBOutlet var testLabel: UILabel!

@IBOutlet var testButton: UIButton!

@IBAction func TouchTestButton(sender: AnyObject) {
testLabel.text = "Touched!" // ここ!
}
}


左上の再生ボタンを押すと、ビルドして実行。

Build Succeededの表示が出れば、ビルド成功。自動的にシミュレータが起動して実行される。

もしBuild Failedが出たら、何かしらエラー。

△に!のマークを押すと、エラー内容が表示されるので、修正。

スクリーンショット 2014-09-04 7.20.56.png


できた!

スクリーンショット 2014-09-04 7.21.27.png