iPhone
Xcode
iOS
Swift

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

More than 3 years have passed since last update.


前準備

【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