To Do List 만들기 (1) alret 창 띄우고 할 일 적기

240328

새로운 파일에 Task 구조체를 만들어 준다

나는  할 일 내용을 넣을 title을 String 으로

완료 여부을 Bool 값으로 넣어 줬다

화면은 이런식으로 짰다

추가하기 버튼을 누르면 Alert 창이 나오고 Alert 창 안에 할 일 내용을 적으려고 한다

이 포스팅은 여기까지 구현하는 방법을 적어볼까 한다

 

1. 스토리보드에 구현 한 것을 코드 파일에 연결해 준다

이건 할 줄 알거라 믿고,, 설명은 넘어간다

2. 할 일 목록이 담길 변수 생성

var list = [Task]()

class 안에 viewDidLoad 위쪽에 작성하였음

 

3. alert 창에 나타나는 문자 설정하기

추가하기 버튼을 누르면 alret 창이 떠야하므로 addButton 안에 코드를 넣어준다

let alert = UIAlertController(title: "할 일 추가", message: "할 일을 입력하세요.", preferredStyle: .alert)

title : 메인에 적혀있는 문자

message: title 아래 적히는 문자

preferredStyle: alert 창 스타일( 두가지가 있는데 나는 .alert으로 설정했다.)

 

4. alert 창에 추가 취소 버튼 만들기(UIAlertAction 사용)

위에 이미지에서 이미 보여졌지만 사실 추가,취소버튼을 따로 만들지 않으면 창에 뜨지 않는다

아무것도 할 수 없음 키키

let addToDoList = UIAlertAction(title: "추가", style: .destructive, handler: { [weak self] _ in
        })
        
let cancel = UIAlertAction(title: "취소", style: .cancel) { _ in
	print("취소됨")
}

title 에는 버튼 이름을 넣어주고 style 에는 타이틀의 모양을 선택할 수 있는 옵션이 있다

default 는 말그대로 기본값으로 버튼의 텍스트가 파란색으로 나오고

destructive 는 빨간색으로 나온다. 설명에는 값이 바뀌거나 삭제 되는 행동을 할 때 사용하라고 적혀 있다.

cancel 은 볼드체로 강조 되어 나오는데 여기에는 기능이 들어 있다. 이름 그대로 취소 기능이 들어가 있어서 내가 구현 안해도 됨 !ㅋㅋ

style 다음에 handler 부분은 버튼을 눌렀을 때 동작할 것을 클로저로 구현해주면 된다

추가버튼에는 입력한 할 일을 받아서 테이블뷰에서 보여야 하는데 이 부분은 나중에 하기로 하고,

취소 버튼 눌렀을 때에는 아무 행동 없이 창이 닫히면 되니까 nil  이라고 적으면 된다.

나는 취소 되는걸 확인하고 싶어서 print("취소됨") 이라고 클로저에 넣어주었다.

alert.addAction(addToDoList)
alert.addAction(cancel)

그리고 alert 창과 액션 버튼을 연결하여 호출해줘야 창에 버튼이 뜬다

5. 화면에 Alert 창 띄우기

4번까지 하면 당연히 창이 안띄워 진다

self.present(alert, animated: true) { print( "alert 창 켜짐" )}

present(_:animated:completion:)

위 코드를 작성해 준다 위에서 만든 인스턴스 alert 을 넣고 창이 띄워질 때 애니메이션을 넣을지는 Bool 값으로 정해주면 된다

그리고 클로저에는 창이 띄워질 때 실행 하고 싶은 코드를 넣으면 되는데 나는 프린트를 적어 넣었다

 

 

 

6. Alert 창에 텍스트 입력칸 만들기(addTextField)

 

이제 이걸 만들어야 하는데,,,

alert.addTextField { myTextField in
    myTextField.placeholder = "할 일을 적으세요"
}

버튼을 연결한 것처럼 위 코드를 넣으면 된다.

작성칸에 요구사항을 넣고 싶으면 클로저에 .placeholder  를 사용하여 텍스트를 넣으면 된다.

그러면 회색으로 텍스트가 들어와 있는걸 볼 수 있다

 

다음 포스팅에서는 입력한 텍스트를 tableView에 올려 보도록 하겠다,,