나만의 IOS 앱개발 입문 : IOS개발 강의 흔적 남기기 5일차

박경현·2022년 3월 13일

저번에 작성한 TodoList를 마무리 하기전에 실습 두개가 있었는데 작성을 안했어서 하나씩 해보려고 한다.
LED전광판 앱 과 계산기앱이다

LED전광판 만들기 - 1 (기획하고 틀짜기)

사진처럼 Label이라는 글자와 배경색상이 있어서 글자색상과 글자를 바꿀 수 있으면서 배경색도 바꿀 수 있는 심플한 앱
바꾸는건 오른쪽에 보이는 barButtonItem으로 만든 설정을 눌러주면 된다!!
설정에 들어가서 글자와 글자색상, 배경색상을 바꾼 뒤 저장!!

-> 간단하지만 배울게 많은 어플이다

틀 만들기

viewController는 각각의 swift파일을 만들어서 관리해주는게 좋다!
개발자가 관리하기 편하기도 하고 assitant에서 버튼이나 액션을 추가해줘야하 할 수도 있기때문에 Class 하나를 그냥 따로 만들어야한다.

LED전광판 만들기 - 2 (주로 사용하는 스킬 적기)

NavigationController를 사용한다

Navigation View Controller를 사용해서 화면 전환을 스택구조로 한번에 한 화면씩 보여준다

StackView를 사용한다

StackView를 쓰게되면 묶은 애들을 세트로 관리할 수 있는데, 크기를 같이 조절하는 것도 가능하고 안에 어케 조절할 수 있는지 여기 나와있다!!

Image를 넣어서 만들기 때문에 Image사용법에 대해 조금은 알 수 있다 ㅋㅋ
이거 진짜 어이없게 실수 했는데 나중에 적도록 하겠다

LED전광판 만들기 - 3 (코딩하기)

화면 구성하기

Main.storyboard에서 기본 형태 만들기

navigationViewController를 추가한다
그리고 원래 이어져 있던 rootView를 없앤다!!
-----> 우리의 기본 View를 대신 연결해주면 그게 NavigationController의 root View가 된다!!!
즉, 맨 처음 화면 뜰때 우리 기본 view가 나오게 됨

그리고 연결할때 segue방식으로 편하게 드래그 해서 연결하는데 show방식으로 연결하면 된다.
메인 view에 barButtonItem을 추가해서 오른쪽에 놔두고 Title을 설정으로 적는다
SystemItem이 custom이서 내가 만드는 방식에 따라 버튼을 제어할 수 있다
ViewController를 하나 더 추가해서 이번에는 메인화면의 설정에서 드래그 한 뒤 Show를 클릭한다
그럼 ActionSegue방식으로 연결된거다!!

ActionSegue는 버튼으로 다른 화면을 연결했을때를 말한다!!
이렇게 하면 자연스럽게 연결된 다른 viewController에 Back이라는 버튼이 만들어진다

설정이라는걸 누가봐도 알 수 있게 navbar에 중간을 더블클릭해서 "설정"이라고 작성한다

Stack View 감싸기 (글자, 글자색상, 배경색상)

Label '전광판에 표시할 글자'와 textfield를 아래 맨오른쪽에 있는 constraint옆에 Embed in View를 눌러서 StackView로 감싼다

이러면 한번에 관리가 가능!!!! 둘 사이를 spacing을 15를 준다

글자 색상을 위해서 Label과 버튼을 3개를 추가한다 option누르면 복사 가능하니까 참고하자!
버튼 3개를 먼저 StackView로 감싼다 이러면 Horizental View가 됨 그 후에 Label과 같이 StackView로 감싼다!

아래 배경 색상도 위에 방식과 같다!!

**마지막은 아래 '저장'버튼을 만들어서 중앙을 배경색상의 중앙으로 맞춘다!

이미지 넣는법!

이거 굉장히 중요함!! 모르고 무심하게 넘기면 절대 안됨!!

폴더에서 Assets로 넘어가서 오른쪽 아래 + 버튼을 누르게 되면 ImageSet이라는게 나오는데
클릭하고 이미지를 넣어주면된다!!

진짜 중요한거는 1X 2X 3X 에다가 각각 24px 48px 72px을 넣어줘야 한다는거!!
생각해보면 다른 아이패드나 더 작은 아이폰SE 같은데서 같은 해상도를 유지하려면 필요하다는 것을 절실하게 느꼈다ㅡㅜㅜㅜ

이미지를 다 추가했으면 Main으로 넘어와서 버튼을 클릭하고 Image에 방금 추가한 각각의 색상들을 넣어주면 된다 ㅎㅎ

코드 작성 - mainView(메인 화면 컨트롤러)

@IBOutlet wea var contentsLabel: UILabel!
override func viewDidLoad(){
	seuper.viewDidLoad()
    self.contentsLabel.textColor = .yellow
}
override func prepare(for segue: UIStroyboardSegue, sender: Any?){
	if let settingViewController = segue.destination as? SettingViewController {
    	settinvViewController.delegate = self
        settingViewController.ledText = self.contentsLabel.text
        settingViewController.textColor = self.contentsLabel.textColor
        settingViewController.backgroundColor = self.view.backgroundColor ?? .black
    }
}

func changeSetting(text: String?, textColor: UIColor, backgroundColor: UIColor) {
	if let text = text {
    	self.contentsLabel.text = text
        
    }
    self.contentsLabel.textColor = textColor
    self.view.backgroundColor = backgroundColor
}

함수는 두개고 정리한번 해보자!!

prepare 함수인데 이거는 segue방식으로 데이터를 주고받을 때 사용한다!!!
즉 말그대로 미리 서로 연결되게 세팅하면서 데이터 주고받을 준비를 한다

if let setting ViewController = segue.destination as ? SettingViewController{}를 써서 옵셔널바인딩을 해주고 as?를 사용해서 SettingViewController형태로 다운캐스팅 했다!
destination이란 연결된 다음 view를 뜻한다!!

changeSetting함수는 간단하게 설정이 바뀌었을때 실행되는 함수이다ㅎㅎ

LEdDBoardSettingDelegate 프로토콜에 들어있는 함수이다!

Delegate에 대해서는 블로그 여러개를 보면서 조금 이해했는데 대리자 즉 알바생이라고 생각하자
settingViewController.delegate = self 하면 self가 대신 모든 역할을 하는거!!

코드 작성 - SettingView(설정 컨트롤러)

여기에는 프로토콜과 6개정도의 함수로 구현되어있다.

protocol LEDBoardSettingDelegate: AnyObject {
	func changedSetting(text:String?, textColor: UIColor, backgroundColor: UIColor)
}

Delegate로 만들 프로토콜을 하나 구현했다 !!
추가로 프로토콜에서 AnyObject는 Class라는 뜻과 같아서 LEDBoardSettingDelegate는 class에서만 사용가능!!

override func viewDidLoad(){
	super.viewDidLoad()
   self.configureView()
}

private func configureView(){
	if let ledText = self.ledText {
   	self.textField.text = ledText
   }
   self.changeTextColor(color: self.textColor)
   self.changeBackgroundColor(color: self.backgroundColor)
}

@IBAction func tabTextColorButton(_ sender: UIButton){
	아래 BackgroundColor함수와 내용이 같다!
}
@IBAction func tabBackgroundColorButton(_ sender: UIButton){
	if sender == self.blackButton{
   	self.changeBackgroundColor = .black
       self.backgroundColor = .black
   }else{
   	여기도 다른 색깔 지정해주면 된다
   }	
  
}
@IBAction func tapSaveButton(_ sender: UIButton){
	self.delegate?.changedSetting(
   	text: self.textField.text,
       textColor: self.textColor,
       backgroundColor: self.backgroundColor
   )
   self.navigationController?.popViewController(animated: true)
}
private func changeTextColor(color: UIColor){
	self.yellowButton.alpha = color == UIColor.yellow ? 1 : 0.2
   몇개 더 있음
}
private func changeBackgroundColor(color: UIColor){
  	위와 같다
}

차고로 SettingViewController의 configureView()를 써서 내용을 설정해도 화면에는 안보인다!
그렇기에 delegate를 설정하고 !!! -> popview()로 화면을 다시 메인으로 넘긴 뒤
--> 그 메인에서 delegate를 채택하면!!!! 그때서야 우리가 보는 화면에서 보이는거다!!!