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

  • 58
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

アプリ作りを始めようとしたけど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