post Image
[Swift]0から作るXmasカウントダウンアプリ

はじめに

この記事は東京理科大学 Advent Calendar 2016 – Qiitaの20日目の記事です.

準備するもの

macOS
xcode(8.0環境で開発しています)
壁紙(できれば)

今回作成するもの

Xmasまでの時間を表示するシンプルなカウントダウンアプリを目指していきたいと思います。

イメージ
https://gyazo.com/64d79929ad40ee31c9f2bae888d129a4

※あくまでも簡単な流れですのでこれが絶対正しいというわけではありません。温かい気持ちで見てくださると助かります。

やること

・ カウントダウン用のラベルを表示する
・ 背景を設定する
・ カウントダウンの情報を取得する
+αで雪を降らせたり、アニメーションを加えています。こちらはソースコードを公開してますのでこちらを参考に見てみてください。

プロジェクトを作成する

xcodeを開き、 Create a new Xcode project を選択
スクリーンショット 2016-12-08 15.36.13.png

Single View Application を選択
スクリーンショット 2016-12-08 15.36.24.png

projectName やteam名などを記入(まぁ適当で)
言語はSwiftを選択
Devicesは今回はiphoneのみにしていますが両方にしたい方はUniversalで
スクリーンショット 2016-12-08 15.36.47.png

Nextを押すとプロジェクトを保存する場所を選んで OK
するとプロジェクトが作成されます

Storyboardで見た目を作る

画面のレイアウトはStoryboardというファイルで編集します
Storyboardは、レイアウトや、画面同士のつながり(遷移)を作成することができます
それでは、画面左のプロジェクト内の Main.storyboardをタップしてください

スクリーンショット 2016-12-08 15.57.16.png

背景を設定する

初期状態のプロジェクトは背景が無いです(白)
画像を置いて見た目を作っていきましょう。

viewを選択し、右下からImageViewをドラックアンドドロップします
スクリーンショット 2016-12-08 16.05.05.png

view内に表示したい位置に配置し、画像を設定します
スクリーンショット 2016-12-08 16.06.51.png

画像データはAssets.xcassetsに入れて呼び出すことができます。
設定した画像がこちら
※背景は画像ではなく、view自体に色をつけて表示することも可能です。その場合はviewを選択し、backgroundを選択すると色が変更できます。

スクリーンショット 2016-11-23 0.53.09.png

ラベルを表示する

画像と同じように右下からLabelをドラックアンドドロップしていきましょう
フォントや大きさなどは右側にあるAttributesInspectorから設定できます
スクリーンショット 2016-12-08 16.24.34.png

今はラベルの内容は適当で構いません
後ほどこのラベルにデータを入れていく作業をします

オブジェクトの表示位置を設定する

それでは先程配置した画像やラベルの表示位置を設定していきましょう

見えている部分を配置しただけでは画面の大きさが変わった場合や横向きにした場合にずれて表示されてしまいます。
今回はざっくりですがautolayoutと呼ばれるものを使ってうまく表示できるようにしていきます。

画面いっぱいに画像を表示する

配置したimageViewを選択し、 |-□-| をタップ(わかるかなw)
autolayoutはざっくりいうと画面のサイズにとらわれずに相対的に位置を指定することができます。かなり奥が深いので詳しく知りたい方はぐぐってもらえると助かります。

スクリーンショット 2016-12-08 16.30.28.png

画像は上下左右画面いっぱいに表示したいので四方向全てにViewから0を設定します
設定すると赤くなるので全て完了したら「Add 4 Constraints」をタップ
スクリーンショット 2016-12-08 16.35.40.png

画面中央いっぱいにラベルを表示する

次はラベルを画面の中央に表示していきます

まずは画像の手順と同じやり方で左右いっぱいに
設定できたら今度は一つ左にある、項目をタップし、 「Horizontally in Container」「Vertically in Container」にチェックマークを入れてください
今回は中央にしたいので値は0のままでお願いします
スクリーンショット 2016-12-08 16.38.45.png

これでレイアウトの部分は完了です
次はデータのつなぎ込みをします

ラベルの内容をコードで管理できるようにつなげる

Storyboardで配置しただけではラベルの内容が変更されません
ラベルをコードとつなぎ合わせ、中身のデータを表示できるようにしていきましょう

Storyboardを開き、Xcode右上の丸がふたつ重なっているアイコンをタップします
スクリーンショット 2016-12-11 21.03.35.png

ラベルを controlを押しながらドラックして、画像の様に繋いであげましょう

ここでつける名前は今後も使いますので分かりやすいものにしてあげると良いです
スクリーンショット 2016-12-11 21.00.31.png

これでコードと繋ぐことができるようになったので試しに画像のように試して見ましょう
ラベルの名前に .text = “” で文字を入力することができます
スクリーンショット 2016-12-11 21.11.58.png

実行するとこのように変わっているのがわかります
スクリーンショット 2016-12-11 21.19.39.png

ここでのviewDidLoadはviewの読み込みが終わってから1度だけ呼ばれる場所になります(他にもタイミングは数多くあります)

カウントダウンのデータを取得する

カウントダウンまでのデータクラスを作成していきましょう
command + n で新規ファイルを作成
名前は今回は DateManagerにしました

下記内容を書いていきます
現在時刻は無くても大丈夫です

DateManager.swift
import Foundation
import UIKit

class DateManager {

    private let formatter = DateFormatter()
    private let date = Date()
    private var dateStr: String?
    private let calendar = Calendar(identifier: .gregorian)

    init(){
        formatter.timeZone = TimeZone.ReferenceType.local
        formatter.dateFormat = "yyyy-MM-dd-HH-mm-ss"
        dateStr = ""
    }
    //現在時刻を返します"yyyy-MM-dd-HH-mm-ss"
    func getNowDate() -> String{
        dateStr = formatter.string(from: date)
        guard let now = dateStr else { return ""}
        return now
    }
    //設定したカウントダウンの秒数を返してくれます
    func getXmaxTimeInterval() -> Int {
        guard let xmas = calendar.date(from: DateComponents(year: 2016, month: 12, day: 25)) else { return 0}
        let spanFromWow = xmas.timeIntervalSinceNow
        return Int(floor(spanFromWow))
    }

}

ラベルにデータを渡す

ViewController内でさっき作成したDateManagerからメソッドを呼び出してあげます

let date = DateManager()
//countにカウントダウンの秒数が返ってきます
let count: Int = date.getXmaxTimeInterval()
//返ってきたデータをラベルに入力
countLabel.text = String(count)

毎秒できるように更新する

タイマーを設定し、更新時にデータを入れてあげましょう

ViewController.swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var snowView: UIView!
    @IBOutlet weak var countLabel: UILabel!

    let date = DateManager()
    var timer: Timer!

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

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(true)
        //カウントダウン
        timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(self.update), userInfo: nil, repeats: true)
        timer.fire()
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(true)
        timer.invalidate()
        timer = nil
    }

    func update(tm: Timer) {
        let count: Int = date.getXmaxTimeInterval()
        countLabel.text = String(count)
    }

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


}

これで完成!!

最後に

ここではあくまでタイマーだけを実装していますが、こちらにアニメーションだったり、雪が降るようになっています
参考までにお試しください!


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。