みなさんこんにちは。夢はフリーランスエンジニアのあがです。今回は前回の続きから初めて行こうと思います!!
前回の記事はこちらから→→『RealmSwiftを使ってみよう!!Part1』
インストールまで終わった段階だったと思います!!
今回は使い方をまとめてみたので是非参考にしていただけると幸いです!!
目標を設定する
まずはどんなデータベースを作成するのかを設定するのかが先決です!!
どんなデータベースを作るのかを考えることでアプリを作るための考え方が変わると思います!!
持論なので適当に聞いていただきたい
アプリを作る際にデータベースは主に2つの考え方ができると思います。
1:アプリをインストールした際にすでにデータが登録されている
2:ユーザーがデータを登録していく
どちらをアプリに入れるかで使い方が変わりますが基本的に使うコードは同じなのであまり気にしないで作っていきましょう!!
今回は2の方で作っていこうと思います!!
[0]TeamDataBase{
name = Ichiro
age = 23
}
[1]TeamDataBase{
name = Jiro
age = 20
}
[2]TeamDataBase{
name = Saburo
age = 17
}
みたいなデータベースを作ってみたい!!
入力画面を作ってみる
ということで以下のコードをとりあえずコピペしてみてください!!
なんじゃこれ!?と思うかもしれませんがとりあえず何も考えずにコピペしてください!!
今後このコードを分解して説明していく記事も書いてみようと思うので少々お待ちを!!
import UIKit
class ViewController: UIViewController {
var name:UITextField!
var age:UITextField!
var myTextView: UITextView!
var nameLabel:UILabel!
var ageLabel:UILabel!
var saveButton:UIButton!
var tableView: UITableView!
let cellId = "cellId"
let margin:CGFloat = 10
override func viewDidLoad() {
super.viewDidLoad()
let frameX = self.view.frame.width
let frameY = self.view.frame.height
let topUI = CGFloat(50)
let buttomUI = CGFloat(50)
let LabelX = CGFloat(150)
let LabelY = CGFloat(50)
let kbToolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: 320, height: 40))
kbToolBar.barStyle = UIBarStyle.default
kbToolBar.sizeToFit()
let spacer = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: self, action: nil)
let commitButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.done, target: self, action: #selector(self.commitButtonTapped(_:)))
kbToolBar.items = [spacer, commitButton]
nameLabel = UILabel(frame: CGRect(x: margin, y: topUI, width: LabelX, height: LabelY))
nameLabel.textAlignment = .center
nameLabel.font = UIFont.boldSystemFont(ofSize: 30)
nameLabel.text = "名前"
nameLabel.backgroundColor = keyakiColor
self.view.addSubview(nameLabel)
name = UITextField(frame: CGRect(x: nameLabel.frame.maxX+margin, y: nameLabel.frame.minY, width: frameX-margin*3-LabelX, height: LabelY))
name.backgroundColor = hinataColor
name.inputAccessoryView = kbToolBar
self.view.addSubview(name)
ageLabel = UILabel(frame: CGRect(x: margin, y: nameLabel.frame.maxY+margin, width: LabelX, height: LabelY))
ageLabel.textAlignment = .center
ageLabel.font = UIFont.boldSystemFont(ofSize: 30)
ageLabel.text = "年齢"
ageLabel.backgroundColor = keyakiColor
self.view.addSubview(ageLabel)
age = UITextField(frame: CGRect(x: ageLabel.frame.maxX+margin, y: ageLabel.frame.minY, width: frameX-margin*3-LabelX, height: LabelY))
age.backgroundColor = hinataColor
age.inputAccessoryView = kbToolBar
age.keyboardType = UIKeyboardType.numberPad
self.view.addSubview(age)
saveButton = UIButton(frame: CGRect(x: margin, y: ageLabel.frame.maxY+margin, width: frameX-margin*2, height: LabelY))
saveButton.addTarget(self, action: #selector(self.saveButton(_:)), for: .touchUpInside)
saveButton.setTitle("保存", for: .normal)
saveButton.setTitleColor(.white, for: .normal)
saveButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 30)
saveButton.backgroundColor = nogizakaColor
saveButton.layer.cornerRadius = 20
saveButton.alpha = 0.2
saveButton.isEnabled = false
self.view.addSubview(saveButton)
tableView = UITableView(frame: CGRect(x: margin, y: topUI+margin*3+LabelY*3, width: frameX-margin*2, height:frameY-topUI-margin*3-LabelY*3-buttomUI))
tableView.backgroundColor = nogizakaColor
tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
tableView.tableFooterView = UIView(frame: .zero)
tableView.delegate = self
tableView.dataSource = self
tableView.layer.borderColor = nogizakaColor.cgColor
tableView.layer.borderWidth = 3.0
tableView.layer.cornerRadius = 20
tableView.allowsSelection = false
self.view.addSubview(tableView)
}
@objc func commitButtonTapped (_ sender:Any){
if name.text != "" && age.text != ""{
saveButton.isEnabled = true
saveButton.alpha = 1.0
}
self.view.endEditing(true)
}
@objc func saveButton(_ sender:Any){
print("ここに\(String(describing: name.text))と\(String(describing: age.text))を保存したい!!")
name.text = ""
age.text = ""
saveButton.isEnabled = false
saveButton.alpha = 0.2
}
}
extension ViewController:UITableViewDelegate,UITableViewDataSource{
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = UITableViewCell(style: UITableViewCell.CellStyle.subtitle,
reuseIdentifier:cellId)
cell.textLabel?.text = "ここに名前が入ります"
cell.detailTextLabel?.text = "ここに年齢が入ります"
return cell
}
func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
if editingStyle == .delete {
// Delete the row from the data source
tableView.deleteRows(at: [indexPath], with: .fade)
}
}
}
extension UIColor{
static func rgb(r:CGFloat,g:CGFloat,b:CGFloat) -> UIColor{
return self.init(red: r/255, green: g/255, blue: b/255, alpha: 1.0)
}
}
let keyakiColor = UIColor.rgb(r: 160, g: 212, b: 104)
let nogizakaColor = UIColor.rgb(r: 190, g: 134, b: 200)
let hinataColor = UIColor.rgb(r: 124, g: 200, b: 233)
参考したサイト
UIColorの拡張
UITableViewに関して
TextFieldに関して(キーボードの閉じ方)
TextFieldに関して(数字だけのキーボード)
キーボードに閉じるボタンをつける
こんな感じの画面が立ち上がったら成功です!!
仕様の説明
実際に使ってみたらわかりますが注意していただきたいことがあります!!
!!注意!!
Simulaterでメニューバーの『I/0→Keyboard→ConnectHardwareKeyboard』のチェックを外してください!!
Simulaterにキーボードが表示されたら成功です!!
このDoneボタンを押さないとボタンが使えない仕様になっています!!
水色の部分が入力部分になっていて両方に書き込まないとボタンが押せない形となっています!!
保存ボタンを押すとまた文字が打てない仕様になっています!!
デバッグにも確認できるように設定しているのでぜひ確認を!!
@objc func saveButton(_ sender:Any){
//ここの部分を編集していきます!!
print("ここに\(String(describing: name.text))と\(String(describing: age.text))を保存したい!!")
name.text = ""
age.text = ""
saveButton.isEnabled = false
saveButton.alpha = 0.2
}
extension ViewController:UITableViewDelegate,UITableViewDataSource{
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
//ここの部分を編集していきます!!
return 1
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = UITableViewCell(style: UITableViewCell.CellStyle.subtitle,
reuseIdentifier:cellId)
//ここの部分を編集していきます!!
cell.textLabel?.text = "ここに名前が入ります"
cell.detailTextLabel?.text = "ここに年齢が入ります"
return cell
}
func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
if editingStyle == .delete {
//ここの部分を編集していきます!!
tableView.deleteRows(at: [indexPath], with: .fade)
}
}
}
上の4つの部分を編集するだけでTableViewに追加できるようになります!!
今回は長くなってしまいましたので次回に回したいと思います!!
まとめ
実際にどのようなものを作るのかをJason形式でシミュレーションをしておくことがいいと思います!!
次回は実際に4つの部分を編集して追加できる機能を付けたいと思います!!