公開中のアプリ

[Swift/Xcode]初心者必見!iOSアプリ作成から公開まで徹底解説!#05 「コードまとめ編」

今回はここまでのコードをまとめておきたいと思います。
今のままだとviewDidLoad()のコードが多くなり過ぎてちょっと見にくいと思うので、関数にまとめておきましょう!

動作環境は下記の通りです!
Xcode Version 12.5 Swift version 5.4

パーツごとに関数にしよう

関数にすると言っても簡単です!
ビューとかボタンとかパーツごとに分けて関数にしてviewDidLoad()の中をスッキリさせます!

こう言う作業を皆さんどこまでやってるんでしょうか??
僕は正直あまりよくわからないので自分なりに見やすくなれば良いかなくらいの気持ちでやってます!

本当なら違うファイルにまとめたりそう言う事もするみたいですけど、小さなアプリだしそこまでする必要もないのかな〜とか思ってます!

こうすると便利やで!とかあれば教えて欲しいです。

今回は、ビューとボタンとスタックビューに分けました!

コードは下記になります!

import UIKit

class ViewController: UIViewController {

    //スクロールビュー
    let scrollView = UIScrollView()
    //ボタンを表示用のビュー
    let inView: UIView = UIView()
    //スタックビュー縦用
    var stackV: UIStackView = UIStackView()
    //ボタンの配列
    var buttonArray: [UIButton] = []
    //スタックビュー横を格納する為の配列
    var stkArray: [UIStackView] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //ビューの生成
        viewCreate()
        //ボタンの生成
        btnCreate()
        //スタックビューの生成
        stackViewCreate()
    }
    
    //ビュー生成
    func viewCreate() {
        //スクロールビューの表示
        view.addSubview(scrollView)
        //ボタン表示用ビューの表示
        scrollView.addSubview(inView)
        
        //スクロールビューの設定
        //AutosizingをAutoLayoutに変換しないようにしている(おまじない)
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        //X軸
        scrollView.centerXAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.centerXAnchor).isActive = true
        //Y軸
        scrollView.centerYAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.centerYAnchor).isActive = true
        //横幅
        scrollView.widthAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.widthAnchor, multiplier: 0.9).isActive = true
        //縦幅
        scrollView.heightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.heightAnchor, multiplier: 0.9).isActive = true

        //ボタン表示用ビューの設定
        //AutosizingをAutoLayoutに変換しないようにしている(おまじない)
        inView.translatesAutoresizingMaskIntoConstraints = false
        //横幅
        inView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 1.0).isActive = true
        //この4つの制約をつけて初めてスクロールするっぽい
        inView.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: 0).isActive = true
        inView.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: 0.0).isActive = true
        inView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 0.0).isActive = true
        inView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0.0).isActive = true
    }
    
    //ボタン生成
    func btnCreate() {
        //ボタンの生成と設定
        //ボタンにtagを付ける為の変数
        var tagNumber = 1
        //for文でボタンを生成
        for _ in 0...364 {
            //ボタン生成
            let button: UIButton = UIButton(type: .custom)
            //タイトルの色
            button.setTitleColor(UIColor.black, for: UIControl.State())
            //タイトルは数字なのでtagナンバーを指定
            button.setTitle(String(tagNumber), for: UIControl.State())
            //tag設定
            button.tag = tagNumber
            //背景色
            button.backgroundColor = UIColor.lightGray
            //ボーダーの横幅
            button.layer.borderWidth = 3
            //ボターの色
            button.layer.borderColor = UIColor.black.cgColor
            //AutosizingをAutoLayoutに変換しないようにしている(おまじない)
            button.translatesAutoresizingMaskIntoConstraints = false
            //ボタンの横幅が可変なのでボタンの高さは横幅と同じ長さを指定する事で正方形にしてる。
            button.heightAnchor.constraint(equalTo: button.widthAnchor, multiplier: 1.0).isActive = true
            //変数tagNumberに1追加
            tagNumber += 1
            //ボタンの配列に追加
            buttonArray.append(button)
        }
    }
    
    //スタックビュー生成
    func stackViewCreate() {
        //スタックビュー縦の設定
        //スタックビューの方向を縦に
        stackV.axis = .vertical
        //中のオブジェクトをどこに揃えて配置するか
        stackV.alignment = .fill
        //どう配置するか
        stackV.distribution = .fill
        //オブジェクト同士のスペース
        stackV.spacing = 4
        //おまじない
        stackV.translatesAutoresizingMaskIntoConstraints = false
        //stackVの背景色
        stackV.backgroundColor = UIColor.white
        //stackVを表示
        inView.addSubview(stackV)
        //X軸
        stackV.centerXAnchor.constraint(equalTo: inView.centerXAnchor).isActive = true
        //トップ位置
        stackV.topAnchor.constraint(equalTo: stackV.topAnchor, constant: 0.0).isActive = true
        //横幅
        stackV.widthAnchor.constraint(equalTo: inView.widthAnchor, multiplier: 1.0).isActive = true
        //縦幅
        stackV.heightAnchor.constraint(equalTo: inView.heightAnchor, multiplier: 1.0).isActive = true

        //スタックビュー横を自動生成
        for i in 0 ..< 73 {
            //StackHの生成
            let stackH:UIStackView = UIStackView()
            //スタックビューの方向を横に
            stackH.axis = .horizontal
            //オブジェクト同士のスペース
            stackH.spacing = 4
            //中のオブジェクトをどこに揃えて配置するか
            stackH.alignment = .fill
            //どう配置するか
            stackH.distribution = .fillEqually
            //スタックビュー配列に追加
            stkArray.append(stackH)
            //stackVの中にstackHを格納
            stackV.addArrangedSubview(stkArray[i])
        }

        //ボタンの配置
        //for文のカウンター変数
        var count = 0
        //for文で365個のボタンをどのstackHに入れるか決めている
        for i in 1 ..< 366 {
            //カウントの数に応じてどのstackHに入るか決定する。
            stkArray[count].addArrangedSubview(buttonArray[i - 1] as UIView)
            //ボタンは5列なので5の倍数でcountを一つ増やす。
            if i % 5 == 0 {
                count += 1
            }
        }
    }
    
}

こうする事で、viewDidLoad()の中がスッキリしたと思います。

まとめ

今回は内容が簡単過ぎましたね(^^;
次回はボタンに機能をつけたいと思います!

読んでくれた方、ありがとうございます。
何でもいいのでコメントもらえると嬉しいです!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

アプリ