[Swift/Xcode]初心者必見！iOSアプリ作成から公開まで徹底解説！#24「ローカル通知編①」

今回からローカル通知を実装したいと思います！

知ってると思いますが、日時を指定したら通知で知らせてくれる機能です！

ちょっと長くなりそうなので今回はレイアウトだけ実装します！

こんな感じにしたいと思います！

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

ローカル通知用のファイルを作成

Cocoa Touch ClassでSubclassをUIViewControllerにして
ファイル名をNotificationViewController.swiftにして下さい！

作成したら、MenuViewController.swiftを下記のように修正して、
NotificationViewControllerに遷移するようにしておきましょう！

//セルを選択した時の設定
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
  print("Selected! \(self.items[indexPath.row])")
    switch indexPath.row {
    case 0:
        print("アラーム設定画面へ")
        let NotificationViewController = NotificationViewController.init()
        let NV = UINavigationController.init(rootViewController: NotificationViewController)
        present(NV, animated: true, completion: nil)
    case 1:
        print("ウォークスルー画面へ")
    case 2:
        print("シェア")
        share()
    case 3:
        print("評価")
        //レビューダイアログを表示
        if let scene = UIApplication.shared.connectedScenes.first as? UIWindowScene {
            SKStoreReviewController.requestReview(in: scene)
        }
    case 4:
        print("データリセット")
        deleteAlert()
    default:
        break
        }
    }

部品の配置とレイアウト

部品を作成してレイアウトするだけで特に説明もないので
とりあえずNotificationViewController.swiftに書くコードを全部載せちゃいますね！

import UIKit

class NotificationViewController: UIViewController {
//Commonクラスのインスタンス生成
let common = Common()
//Cancelボタン
var cancelBtn: UIBarButtonItem!
//トップラベルを入れるビュー
let topView: UIView = UIView()
//トップのラベル
let topLabel: UILabel = UILabel()
//通知設定のラベル
let notificationLabel: UILabel = UILabel()
//Switch
let notificationSwitch: UISwitch = UISwitch()
//datePicker
let datePicker: UIDatePicker = UIDatePicker()

override func viewDidLoad() {
    super.viewDidLoad()
    
    layout()
}

//Cancelボタンのメソッド
@objc func cancelBtnTapped() {
    //前の画面に戻る
    dismiss(animated: true, completion: nil)
}


func layout() {
    //バックグランドカラー設定
    self.view.backgroundColor = UIColor(hex: common.background , alpha: 1)
    
    //オブジェクト追加
    self.view.addSubview(topView)
    topView.addSubview(topLabel)
    self.view.addSubview(notificationLabel)
    self.view.addSubview(notificationSwitch)
    self.view.addSubview(datePicker)
    
    //トップビューのレイアウト
    topView.translatesAutoresizingMaskIntoConstraints = false
    topView.widthAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.widthAnchor, multiplier: 1).isActive = true
    topView.heightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.heightAnchor, multiplier: 0.08).isActive = true
    topView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
    topView.backgroundColor = UIColor(hex: common.white , alpha: 1)
    
    //トップラベルのレイアウト
    topLabel.translatesAutoresizingMaskIntoConstraints = false
    topLabel.leftAnchor.constraint(equalTo: topView.leftAnchor, constant: 20.0).isActive = true
    topLabel.centerYAnchor.constraint(equalTo: topView.centerYAnchor).isActive = true
    topLabel.font = UIFont(name: "HiraMaruProN-W4", size: 16)
    topLabel.textColor = UIColor(hex: common.text , alpha: 1)
    topLabel.text = "貯金忘れ防止のために通知設定ができます"
    
    //アラートラベルのレイアウト
    notificationLabel.translatesAutoresizingMaskIntoConstraints = false
    notificationLabel.leftAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leftAnchor, constant: 20.0).isActive = true
    notificationLabel.topAnchor.constraint(equalTo: topView.bottomAnchor, constant: 30.0).isActive = true
    notificationLabel.font = UIFont(name: "HiraMaruProN-W4", size: 16)
    notificationLabel.textColor = UIColor(hex: common.text , alpha: 1)
    notificationLabel.text = "通知設定"
    
    //Switchのレイアウト
    notificationSwitch.translatesAutoresizingMaskIntoConstraints = false
    notificationSwitch.rightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.rightAnchor, constant: -20.0).isActive = true
    notificationSwitch.centerYAnchor.constraint(equalTo: notificationLabel.centerYAnchor).isActive = true
    //オンにした時の色
    notificationSwitch.onTintColor = UIColor(hex: common.sub, alpha: 1)
    
    //datePickerのレイアウト
    datePicker.translatesAutoresizingMaskIntoConstraints = false
    datePicker.widthAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.widthAnchor, multiplier: 1).isActive = true
    datePicker.heightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.heightAnchor, multiplier: 0.4).isActive = true
    datePicker.topAnchor.constraint(equalTo: notificationLabel.bottomAnchor, constant: 30).isActive = true
    //スタイル
    datePicker.preferredDatePickerStyle = .wheels
    //表示させるモードの設定。今回は時間だけを表示
    datePicker.datePickerMode = UIDatePicker.Mode.time
    //テキストカラ-
    datePicker.setValue(UIColor(hex: common.text, alpha: 1), forKey: "textColor")
    //背景色
    datePicker.backgroundColor = UIColor.white
    
    
    
    //ナビゲーションコントローラーまわり
    //タイトル
    self.title = "アラーム設定"
    //背景色
    self.navigationController?.navigationBar.barTintColor = UIColor(hex: self.common.main , alpha: 1)
    //セーフエリアとの境目の線を消す
    self.navigationController?.navigationBar.shadowImage = UIImage()
    //フォントの設定
    self.navigationController?.navigationBar.titleTextAttributes
        = [NSAttributedString.Key.foregroundColor: UIColor.white, NSAttributedString.Key.font: UIFont(name: "HiraMaruProN-W4", size: 20)!]
    //Cancelボタンを追加
    cancelBtn = UIBarButtonItem(title: "Cancel", style: .done, target: self, action: #selector(self.cancelBtnTapped))
    cancelBtn.tintColor = UIColor(hex: self.common.white , alpha: 1)
    self.navigationItem.leftBarButtonItem = cancelBtn
}

}

ボタンとかラベルはお馴染みの部品ですが、今回は新しい部品が登場してますね！

部品によってテキストの色を変えるコードとかちょっと違ったりするんですけど、基本的には同じ感じでレイアウトできます！

一つだけ注意点を！

79行目でdatePickerのスタイルを設定してるんですけど、これを86行目に書いてしまうと、その前に指定したテキストカラーと背景色が効かないので気をつけましょう！

まとめ

これでレイアウトは完成したので、あとは機能の実装をするだけですね！

スムーズにいくといいですが、、、がんばります！！

ではでは！

修正したファイルのコード全部

MenuViewController.swift

import UIKit

class NotificationViewController: UIViewController {
//Commonクラスのインスタンス生成
let common = Common()
//Cancelボタン
var cancelBtn: UIBarButtonItem!
//トップラベルを入れるビュー
let topView: UIView = UIView()
//トップのラベル
let topLabel: UILabel = UILabel()
//通知設定のラベル
let notificationLabel: UILabel = UILabel()
//Switch
let notificationSwitch: UISwitch = UISwitch()
//datePicker
let datePicker: UIDatePicker = UIDatePicker()

override func viewDidLoad() {
    super.viewDidLoad()
    
    layout()
}

//Cancelボタンのメソッド
@objc func cancelBtnTapped() {
    //前の画面に戻る
    dismiss(animated: true, completion: nil)
}


func layout() {
    //バックグランドカラー設定
    self.view.backgroundColor = UIColor(hex: common.background , alpha: 1)
    
    //オブジェクト追加
    self.view.addSubview(topView)
    topView.addSubview(topLabel)
    self.view.addSubview(notificationLabel)
    self.view.addSubview(notificationSwitch)
    self.view.addSubview(datePicker)
    
    //トップビューのレイアウト
    topView.translatesAutoresizingMaskIntoConstraints = false
    topView.widthAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.widthAnchor, multiplier: 1).isActive = true
    topView.heightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.heightAnchor, multiplier: 0.08).isActive = true
    topView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
    topView.backgroundColor = UIColor(hex: common.white , alpha: 1)
    
    //トップラベルのレイアウト
    topLabel.translatesAutoresizingMaskIntoConstraints = false
    topLabel.leftAnchor.constraint(equalTo: topView.leftAnchor, constant: 20.0).isActive = true
    topLabel.centerYAnchor.constraint(equalTo: topView.centerYAnchor).isActive = true
    topLabel.font = UIFont(name: "HiraMaruProN-W4", size: 16)
    topLabel.textColor = UIColor(hex: common.text , alpha: 1)
    topLabel.text = "貯金忘れ防止のために通知設定ができます"
    
    //アラートラベルのレイアウト
    notificationLabel.translatesAutoresizingMaskIntoConstraints = false
    notificationLabel.leftAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leftAnchor, constant: 20.0).isActive = true
    notificationLabel.topAnchor.constraint(equalTo: topView.bottomAnchor, constant: 30.0).isActive = true
    notificationLabel.font = UIFont(name: "HiraMaruProN-W4", size: 16)
    notificationLabel.textColor = UIColor(hex: common.text , alpha: 1)
    notificationLabel.text = "通知設定"
    
    //Switchのレイアウト
    notificationSwitch.translatesAutoresizingMaskIntoConstraints = false
    notificationSwitch.rightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.rightAnchor, constant: -20.0).isActive = true
    notificationSwitch.centerYAnchor.constraint(equalTo: notificationLabel.centerYAnchor).isActive = true
    //オンにした時の色
    notificationSwitch.onTintColor = UIColor(hex: common.sub, alpha: 1)
    
    //datePickerのレイアウト
    datePicker.translatesAutoresizingMaskIntoConstraints = false
    datePicker.widthAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.widthAnchor, multiplier: 1).isActive = true
    datePicker.heightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.heightAnchor, multiplier: 0.4).isActive = true
    datePicker.topAnchor.constraint(equalTo: notificationLabel.bottomAnchor, constant: 30).isActive = true
    //スタイル
    datePicker.preferredDatePickerStyle = .wheels
    //表示させるモードの設定。今回は時間だけを表示
    datePicker.datePickerMode = UIDatePicker.Mode.time
    //テキストカラ-
    datePicker.setValue(UIColor(hex: common.text, alpha: 1), forKey: "textColor")
    //背景色
    datePicker.backgroundColor = UIColor.white
    
    
    //ナビゲーションコントローラーまわり
    //タイトル
    self.title = "アラーム設定"
    //背景色
    self.navigationController?.navigationBar.barTintColor = UIColor(hex: self.common.main , alpha: 1)
    //セーフエリアとの境目の線を消す
    self.navigationController?.navigationBar.shadowImage = UIImage()
    //フォントの設定
    self.navigationController?.navigationBar.titleTextAttributes
        = [NSAttributedString.Key.foregroundColor: UIColor.white, NSAttributedString.Key.font: UIFont(name: "HiraMaruProN-W4", size: 20)!]
    //Cancelボタンを追加
    cancelBtn = UIBarButtonItem(title: "Cancel", style: .done, target: self, action: #selector(self.cancelBtnTapped))
    cancelBtn.tintColor = UIColor(hex: self.common.white , alpha: 1)
    self.navigationItem.leftBarButtonItem = cancelBtn
}

}

NotificationViewController.swift

import UIKit

class NotificationViewController: UIViewController {
//Commonクラスのインスタンス生成
let common = Common()
//Cancelボタン
var cancelBtn: UIBarButtonItem!
//トップラベルを入れるビュー
let topView: UIView = UIView()
//トップのラベル
let topLabel: UILabel = UILabel()
//通知設定のラベル
let notificationLabel: UILabel = UILabel()
//Switch
let notificationSwitch: UISwitch = UISwitch()
//datePicker
let datePicker: UIDatePicker = UIDatePicker()

override func viewDidLoad() {
    super.viewDidLoad()
    
    layout()
}

//Cancelボタンのメソッド
@objc func cancelBtnTapped() {
    //前の画面に戻る
    dismiss(animated: true, completion: nil)
}


func layout() {
    //バックグランドカラー設定
    self.view.backgroundColor = UIColor(hex: common.background , alpha: 1)
    
    //オブジェクト追加
    self.view.addSubview(topView)
    topView.addSubview(topLabel)
    self.view.addSubview(notificationLabel)
    self.view.addSubview(notificationSwitch)
    self.view.addSubview(datePicker)
    
    //トップビューのレイアウト
    topView.translatesAutoresizingMaskIntoConstraints = false
    topView.widthAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.widthAnchor, multiplier: 1).isActive = true
    topView.heightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.heightAnchor, multiplier: 0.08).isActive = true
    topView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
    topView.backgroundColor = UIColor(hex: common.white , alpha: 1)
    
    //トップラベルのレイアウト
    topLabel.translatesAutoresizingMaskIntoConstraints = false
    topLabel.leftAnchor.constraint(equalTo: topView.leftAnchor, constant: 20.0).isActive = true
    topLabel.centerYAnchor.constraint(equalTo: topView.centerYAnchor).isActive = true
    topLabel.font = UIFont(name: "HiraMaruProN-W4", size: 16)
    topLabel.textColor = UIColor(hex: common.text , alpha: 1)
    topLabel.text = "貯金忘れ防止のために通知設定ができます"
    
    //アラートラベルのレイアウト
    notificationLabel.translatesAutoresizingMaskIntoConstraints = false
    notificationLabel.leftAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leftAnchor, constant: 20.0).isActive = true
    notificationLabel.topAnchor.constraint(equalTo: topView.bottomAnchor, constant: 30.0).isActive = true
    notificationLabel.font = UIFont(name: "HiraMaruProN-W4", size: 16)
    notificationLabel.textColor = UIColor(hex: common.text , alpha: 1)
    notificationLabel.text = "通知設定"
    
    //Switchのレイアウト
    notificationSwitch.translatesAutoresizingMaskIntoConstraints = false
    notificationSwitch.rightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.rightAnchor, constant: -20.0).isActive = true
    notificationSwitch.centerYAnchor.constraint(equalTo: notificationLabel.centerYAnchor).isActive = true
    //オンにした時の色
    notificationSwitch.onTintColor = UIColor(hex: common.sub, alpha: 1)
    
    //datePickerのレイアウト
    datePicker.translatesAutoresizingMaskIntoConstraints = false
    datePicker.widthAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.widthAnchor, multiplier: 1).isActive = true
    datePicker.heightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.heightAnchor, multiplier: 0.4).isActive = true
    datePicker.topAnchor.constraint(equalTo: notificationLabel.bottomAnchor, constant: 30).isActive = true
    //スタイル
    datePicker.preferredDatePickerStyle = .wheels
    //表示させるモードの設定。今回は時間だけを表示
    datePicker.datePickerMode = UIDatePicker.Mode.time
    //テキストカラ-
    datePicker.setValue(UIColor(hex: common.text, alpha: 1), forKey: "textColor")
    //背景色
    datePicker.backgroundColor = UIColor.white
    
    
    
    //ナビゲーションコントローラーまわり
    //タイトル
    self.title = "アラーム設定"
    //背景色
    self.navigationController?.navigationBar.barTintColor = UIColor(hex: self.common.main , alpha: 1)
    //セーフエリアとの境目の線を消す
    self.navigationController?.navigationBar.shadowImage = UIImage()
    //フォントの設定
    self.navigationController?.navigationBar.titleTextAttributes
        = [NSAttributedString.Key.foregroundColor: UIColor.white, NSAttributedString.Key.font: UIFont(name: "HiraMaruProN-W4", size: 20)!]
    //Cancelボタンを追加
    cancelBtn = UIBarButtonItem(title: "Cancel", style: .done, target: self, action: #selector(self.cancelBtnTapped))
    cancelBtn.tintColor = UIColor(hex: self.common.white , alpha: 1)
    self.navigationItem.leftBarButtonItem = cancelBtn
}

}