[Swift][Xcode6][入門]初心者向け簡易カウンターの作成

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

前準備

【Swift】【超入門】初心者向けはじめてのHelloWorld!

XCode6のダウンロードからプロジェクトの作成は前回の記事を参照。

Screen Shot 2014-09-15 at 9.10.45 AM.png

Single View Applicationを選択。

Screen Shot 2014-09-15 at 9.10.55 AM.png

今回はCounterという名前のプロジェクトを作ります。

StoryBoardを活用する

左側に表示されているプロジェクトデータから
Main.storyboard
というファイルを選択。
Screen Shot 2014-09-15 at 9.13.05 AM.png

LabelとButton等のオブジェクトの設置

まずXCode右下の Object Library (右下の立方体のマーク)をクリック。
すると、様々な種類のオブジェクト(アセットのようなもの)があり、ストーリーボードに挿入する事が出来ます。
Screen Shot 2014-09-15 at 9.16.48 AM.png

  1. Label、Button等のオブジェクトの設置
  • Labelマークをストーリーボードにドラック&ドロップします。

Screen Shot 2014-09-15 at 9.26.21 AM.png

  • Buttonも選択し、同様に設置していきます。

Screen Shot 2014-09-15 at 9.27.31 AM.png

今回はカウントされる数字のラベル、追加ボタン、リセットボタンの3つを設置します。

2. 色や種類、配置の指定

ラベルやボタンの色、内容、種類等をAttributes insepterから編集する事が出来ます。
容量はPPT等とほとんど変わらないため、誰でも簡単に編集できると思います。

Screen Shot 2014-09-15 at 9.30.13 AM.png

  • 色、種類の編集します。

Screen Shot 2014-09-15 at 9.31.20 AM.png

こんな感じで編集していきます。色々試してみるといいかもしれません。

Screen Shot 2014-09-15 at 9.34.10 AM.png

ボタンも今回はAdd Contact(通常は連絡先の追加でつかうデフォルトのボタン)を利用します。

  • 配置の指定します。 ドラッグ&ドロップで設置するだけでは、位置は確定したわけではありません。 確定させるためには、右下のAlignの部分から位置を指定して制約を加えてください。

Screen Shot 2014-09-15 at 9.32.22 AM.png

3. 画像の挿入

  • 画像をドラッグ&ドロップします。 画像を以下の位置にドラッグ&ドロップしてください。

Screen Shot 2014-09-15 at 9.44.52 AM.png

  • Media Libraryから挿入します。

すると、右下のmedia Libraryに画像が加わっているのが分かります。
LabelやButton同様、ドラッグ&ドロップでストーリーボードに挿入しましょう。

Screen Shot 2014-09-15 at 9.46.09 AM.png

  • また、この際に表示される以下のcopy itemsにチェックが入ってることを確認してください。 注意しないと参照だけコピーになりうまくいきません。(追記)

Screen Shot 2014-09-15 at 9.44.03 AM.png

宣言と関連づけ

  1. Assistant Editorを開く

以下のボタンをクリックして ViweController.swiftを編集できる状態にしましょう。

Screen Shot 2014-09-15 at 9.49.20 AM.png

2. ストーリーボードとの関連付けをします。

オブジェクトをCtrl+ドラッグ&ドロップして、エディタに移動しましょう。

Screen Shot 2014-09-15 at 9.53.25 AM.png

counter と名前をつけて connect をクリック。
すると、以下のようなコードが自動生成されます。

ViewController.swift

    @IBOutlet var counter : UILabel

3. ボタンのクリックアクションの関連づけをします。

Buttonも同様に関連づけが出来ますが、以下のように Connection を Action に選択する事で、クリック等の動作時に発生する関数として関連づけられます。
Screen Shot 2014-09-15 at 9.57.19 AM.png

以下のようなソースコードが生成されます。

ViewController.swift

/*func以下は設定した関数名前*/
 @IBAction func PushCountButton(sender : UIButton) {
    }


メインの処理を実装

メインの処理はとてもシンプルです。

  • counter用のcountNumという変数を定義
  • Countボタンクリック時はラベルにcountNumを追加、インクリメント
  • Resetボタンのクリック時はラベルに0を追加、countNumをリセット

ソースは以下です。

ViewController.swift

//
//  ViewController.swift
//  Counter
//
//  Created by maximum80 on 9/15/14.
//  Copyright (c) 2014 maximum80. All rights reserved.
//

import UIKit

class ViewController: UIViewController {


    @IBOutlet var counter : UILabel
    var countNum = 0

    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.
    }


    @IBAction func PushCountButton(sender : UIButton) {
        counter.text = String(countNum)
        countNum++
    }


    @IBAction func PushResetButton(sender : AnyObject) {
        countNum = 0
        counter.text = String(countNum)
        countNum++
    }

}



実行してみると、上手くカウンターが動作すれば成功です!!

Screen Shot 2014-09-15 at 10.15.49 AM.png