
今回からローカル通知を実装したいと思います!
知ってると思いますが、日時を指定したら通知で知らせてくれる機能です!
ちょっと長くなりそうなので今回はレイアウトだけ実装します!
こんな感じにしたいと思います!
動作環境は下記の通りです!
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行目に書いてしまうと、その前に指定したテキストカラーと背景色が効かないので気をつけましょう!
これでレイアウトは完成したので、あとは機能の実装をするだけですね!
スムーズにいくといいですが、、、がんばります!!
ではでは!
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
}
}
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
}
}
コメントを残す