【 iPhone 】Swiftでアプリ開発 | CountUpDownApp

今回は、かんたんなカウントアプリをつくりたいと思います。


開発環境
iOS 12
Swift 4.2
Xcode 10 Beta

動画で確認できます

youtu.be

プロジェクトをつくる

Single View Appを選んで、新しいプロジェクトをつくります。



CountUpDownAppとでもしておきましょう。



Main.Storyboardを開きます。



library PanelからButtonを２つ(UPボタンとDownボタン用)とLabel(カウントする数字を表示する)をViewController.swiftに追加します。



ButtonとLabelのそれぞれのTextとFontを変更します。






Labelの位置をAdd New Alignment ConstraintsでHorizontally in ContainerとVertically in Containerを選んでView Controllerの中央にもってきます。



ButtonはDownボタンを選択して、CTRキーを押したまま左へドラッグするとオプションが出ますので、Leading Space to Safe Areaを選びます。





同じく、CTRキーを押したまま下へドラッグして、Bottom Space to Safe Areaを選びます。



今度は、CTRキーを押したままUpボタンに重なるまでドラッグします、Upボタンの背景色が変わったらドラッグをやめるとオプションが出ますので、Horizontal Spaceingを選びます。







Upボタンについては、CTRキー + 右へドラッグでオプションでTrailing Space to Safe Areaを選び、CTRキー + 下へドラッグしてBottom Space to Safe Areaを選びます。






これで、ButtonとLabelの位置が決まりました。

Swiftコードを書きます。

Main.storyboardとViewController.swiftをつなげます。


Main.storyboardとViewController.swiftを同時に開いて、LabelからCTRキー + ドラッグで@IBoutletをつくります。






各Buttonも、それぞれ同じやり方で@IBActionをつくります。







実際に、数字をカウントするために使用する変数をつくります。


var count = 0とします。


ViewController.swift

import UIKit

class ViewController: UIViewController {

    //LabelとViewController.swiftをつなぐ変数。
    @IBOutlet var countBox: UILabel!
    
    //数字をカウントする変数。
    var count = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

     //UpボタンををViewController.swiftとつなぐ関数
    //タッチすると数字がアップする。
    @IBAction func CountUP(_ sender: Any) {
        
        //変数countに１を足す、count = count + 1と同じ意味。
        count += 1

        //カウントされた数字を文字に変換して、表示用の変数countBoxのtextに入れる。
        countBox.text = String(count)
    }
    
    @IBAction func countDown(_ sender: Any) {

        //変数countから１を引く、count = count - 1と同じ意味。
        count -= 1

        //カウントされた数字を文字に変換して、表示用の変数countBoxのtextに入れる。
        countBox.text = String(count)
        
    }
    
}

String()は,数字等を文字に変換することができます。



String - Swift Standard Library | Apple Deveroper Documentation






以上が、かんたんなカウントアプリのつくり方でした。