선생님이 강의중에 Dictionary를 활용하여 학생증을 만들 수 있다고 말해줬다.
(물론 실제로는 Dictionary를 활용하여 만들진 않는다고 하는데)
하지만, 나는 지금있는 지식을 총동원해서 헬스장 출입 및 멤버등록 앱을 만들어보려고한다.
느낀점 :
1. 이거 로그인창을 Dictionary로 만드는건 진짜 비효율적인것같다...(특히, 이중딕셔너리..)
2. 더 좋은방법이 있을 것 같은데 찾아보고싶다.
3. 화면전환, 뷰컨트롤러 간의 데이터 전달 방법을 더 공부할 필요가 있는 것 같다.
4. 정말 배운걸 짜낸 것 같다.
5. 아무튼 기쁘다.
6. GitHub에 첫번째 프로젝트로 업로드 해야겠다!
7. 유후
일단, UI구성은 위와같이 해줬다.
우선, segue를 만들어 각각의 움직임을 구현해줬다.
(*그림은 위 그림과 동일)
멤버로 등록된 고객의 데이터를 담고있는 클래스를 생성했다. 이는 Dictionary를 활용하여 구현했고 만약 ResisterViewController에서 멤버등록 시 Memberinfo의 연산프로퍼티에 저장되도록 구성했다.
- static var dictionary -> 회원번호(Key) : [회원이름(Value[0]),이용권종류(Value[1]) 로 지정
class MemberInfo {
static var dictionary : [String:[String:String]] = [:]
}
여기서 구현할 기능은 3가지다.
- 입력한 [이름,회원번호,회원권] 의 정보를 MemberInfo Class에 저장한다.
- 회원권 눌렀을 때, 애니메이션(
어거지로?) 처리하기- 빈 칸 있을 때, Alert창 띄우기
자세한 내용은 아래 코드 내부 주석을 보면서 참고하라.
import UIKit
class ResistrationViewController: UIViewController {
@IBOutlet weak var tfName: UITextField! // 이름 입력창
@IBOutlet weak var tfNumber: UITextField! // 회원번호(휴대폰번호 )입력창
let btnStyle = true // ButtonBackground를 위한 기본코드 (의미x)
var useValue: String = "" // 이용권종류를 저장하기 위한 변수
@IBOutlet weak var firstBtnStyle: UIButton! // 첫번째버튼 스타일위한 아울렛
@IBOutlet weak var secondBtnStyle: UIButton! // 두번째버튼 스타일위한 아울렛
@IBOutlet weak var thirdBtnStyle: UIButton! // 세번째버튼 스타일위한 아울렛
@IBOutlet weak var fourthBtnStyle: UIButton! // 네번째버튼 스타일위한 아울렛
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
@IBAction func btnUse(_ sender: UIButton) { // 회원권선택 버튼
// 1. 회원권 선택 시, 종류를 useValue변수에 임시로 저장 (MemberInfo Class에 넘기기 전에 임시로!)
useValue = (sender.titleLabel?.text)!
// 2. 회원권 선택 시, 타이틀라벨의 이름을 키 값으로하여 색상이 변경되도록 함.
switch btnStyle {
case sender.titleLabel?.text == "1개월 이용권":
firstBtnStyle.backgroundColor = UIColor.red
secondBtnStyle.backgroundColor = UIColor.lightGray
thirdBtnStyle.backgroundColor = UIColor.lightGray
fourthBtnStyle.backgroundColor = UIColor.lightGray
case sender.titleLabel?.text == "3개월 이용권":
firstBtnStyle.backgroundColor = UIColor.lightGray
secondBtnStyle.backgroundColor = UIColor.red
thirdBtnStyle.backgroundColor = UIColor.lightGray
fourthBtnStyle.backgroundColor = UIColor.lightGray
case sender.titleLabel?.text == "1년 이용권":
firstBtnStyle.backgroundColor = UIColor.lightGray
secondBtnStyle.backgroundColor = UIColor.lightGray
thirdBtnStyle.backgroundColor = UIColor.red
fourthBtnStyle.backgroundColor = UIColor.lightGray
case sender.titleLabel?.text == "평생 이용권":
firstBtnStyle.backgroundColor = UIColor.lightGray
secondBtnStyle.backgroundColor = UIColor.lightGray
thirdBtnStyle.backgroundColor = UIColor.lightGray
fourthBtnStyle.backgroundColor = UIColor.red
default : break
}
}
@IBAction func btnResistration(_ sender: UIButton) { // 완료버튼
//1. [회원이름,번호,회원권] 세가지가 전부 입력된다면, ---
//2. MemberInfo Class의 dictionary 프로퍼티에 저장되도록 한다.
//3. dismiss로 창 종료해준다.
if !tfName.text!.isEmpty && !tfNumber.text!.isEmpty && !useValue.isEmpty{
MemberInfo.dictionary.updateValue([tfName.text!:useValue], forKey: tfNumber.text!)
dismiss(animated: true)
//1. [회원이름,번호,회원권] 세가지 중 하나라도 입력되지않는다면,
//2. Alert창이 뜨도록 하고, 정보 입력을 강제한다.
}else{
let alert = UIAlertController(title: "경고", message: "정보를 모두 입력해주세요", preferredStyle: .alert)
let okAction = UIAlertAction(title: "확인", style: .default, handler: nil)
alert.addAction(okAction)
present(alert, animated: true, completion: nil)
}
}
}
여기서 구현할 기능은 3가지다.
- 입력한 회원번호(MemberInfo.dictionary.keys)가 일치한다면, 체크인 완료 창으로 화면을 전환시켜주기
- 만약, 입력한 회원번호가 클래스의 연산프로퍼티 데이터에 없을 때, 경고 라벨 출력
자세한 내용은 아래 코드 내부 주석을 보면서 참고하라.
import UIKit
class MainViewController: UIViewController {
@IBOutlet weak var tfNumberLog: UITextField!
@IBOutlet weak var tfMessage: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
@IBAction func btnOk(_ sender: UIButton) { // OK 버튼 누를 경우,
//1. 클래스의 Dictionary 타입프로퍼티의 키값에 해당 회원번호를 포함하고 있다면 loginVC로 화면전환
if MemberInfo.dictionary.keys.contains(tfNumberLog.text!) {
let uvc = storyboard?.instantiateViewController(withIdentifier: "loginVC")
uvc?.modalTransitionStyle = UIModalTransitionStyle.coverVertical
present(uvc!, animated: true)
// 로그인 시 필수 입력창 초기화
tfNumberLog.text?.removeAll()
//2. 해당 클래스의 타입프로퍼티에 키값이 포함되어있지 않다면 경고라벨 출력 후 화면전환 x
}else{
tfMessage.textColor = UIColor.red
tfMessage.text = "경고 : 등록되지않은 회원입니다. \n올바른 회원번호(전화번호)를 입력해주세요!"
}
}
}
이곳에서 구현할 기능은 2가지다.
- MainViewController에서 입력받은 회원번호를 MemberInfo.Dictionary에서 찾아와 [이름 + 회원권종류] 출력해주기
- TimeSelector를 사용하여 5..4..3..2..1..0 이 후, 창을 종료시키기
import UIKit
class LoginViewController: UIViewController {
@IBOutlet weak var lblBigMessage: UITextView!
@IBOutlet weak var lblUseValueType: UILabel!
@IBOutlet weak var tfAutoClose: UITextField!
// objc func 에서 count == -1 될 때, 창이 닫히도록 설정하기 위한 변수
var timerCount = 6
override func viewDidLoad() {
super.viewDidLoad()
// TimerSelector
let timer = Timer.scheduledTimer(timeInterval: 1.0, target: self, selector: #selector(updateTime), userInfo: nil, repeats: true)
// 서현웅회원님!정상적으로 체크인되셨습니다.
// MemberInfo 클래스의 Dictionary.values에서 로그인했던 회원정보의 키값을 추출
lblBigMessage.text = "\(MemberInfo.dictionary[MemberInfo.logInNum]!.keys)님 정상적으로 체크인 되었습니다."
// 이용권 종류 표기
// MemberInfo 클래스의 Dictionary.values에서 로그인했던 회원정보의 밸류값을 추출
lblUseValueType.text = "이용권 : \(MemberInfo.dictionary[MemberInfo.logInNum]!.values)"
}
// TimeSelector를 구동 시키기위한 @objc func
// timerCount가 1초가 지날때마다 -1되며, 메시지를 보여준다.
// 5..4..3..2..1..0 , -1이 될 때, dismiss하여 창을 종료
@objc func updateTime() {
timerCount -= 1
if timerCount == -1 {
dismiss(animated: true)
}else{
tfAutoClose.layer.borderWidth = 1.0
tfAutoClose.text = "\(timerCount)초 후, 메인페이지로 이동합니다."
}
}
}