5주차_iOS 앱 개발 입문_1일차_ToDoList 앱 만들기_필수 구현

 

---

---

<TIL>
오늘은 TodoList 만들기 개인과제 구현 과정을
차근차근 정리해 보려고 한다.☺️

이전에 썼던 코드 다음 날 까먹고..
다시 뇌 리셋^-^ 하루 종일 멘탈 바사사삭💪🏻

다시 차근차근 시작..!^^
역시 정리를 해야 안 까먹고 기억에 오래 남는 것 같다.ㅎㅎ 

이번 TodoList 앱 만들기 개인과제 소개는
(4주차_iOS 앱 개발 입문_5일차) 게시물에 정리되어있다. 

4주차_iOS 앱 개발 입문_5일차_ToDoList 만들기_TIL

 

---

---

<완성본>

---

스토리보드 - 기본 UI 구성

 

UI 구성 완성 화면

- navigation controller 연결 (Bar Button Item 사용하기 위함)
- TableView 추가
- Constraints 상하좌우 0 설정
- Prototype Cells 1로 설정
- Label & Switch 추가 (Label은 범위 확인용으로 background 색상 설정함)
- Label & Switch  Stack View로 묶기

Stack View Spacing 설정하기
(→ Label과 Switch 사이의 공간)

---

Stack View → Content View
(control drag & drop)

자유롭게 설정

---

상단 추가 버튼
→ Bar Button Item

 

---

 

ViewController

 

UITableView, UILabel, UISwitch
VC, Cell에 연결하기

---

UITableViewCell class 이름
→ Class & identifier 설정하기

---

---

---

설정해 놓은 title, isOn 잘 적용됐는지 확인!

---

 

추가 버튼

 

추가 버튼 ViewController에 연결하고,
'추가' 버튼 클릭 시, alert 띄우기

---

오류없이 잘 뜨나 확인!

---

다음으로
alert에 등록, 취소 버튼을 추가하기!!

alert에 여러개의 textField가 존재할 수 있지만,
여기서는 하나의 textField만 보여주고 있기 때문에
textFields[0] 이렇게 위 코드 처럼 0번째 가져오기.

 그리고
reloadData() 잊지말기!

이렇게 하고, 실행시키면?

이렇게 등록 버튼이 추가되어있고,
원하는 title을 적고 '등록' 클릭하면?

이렇게 정상적으로 추가되는 것을 확인할 수 있다!

---

이어서 취소 버튼을 추가하기

취소버튼은 클릭했을 때,
어떠한 동작도 필요하지 않기 때문에 더 간단하다!
(sytle: .cancel 대신 .default 해도 상관없음)

default로 해놓은 상태에서
alert.addAction(registerButton)과 alert.addAction(cancelButton) 먼저 쓰인 순서에 따라서
버튼 좌우 순서가 달라진다.

위와 같이 코드를 입력하고, 실행시키면?

이렇게 등록 옆에 취소버튼이 생겼다!
(.cancel로 해서 취소가 먼저 나온 것임.)

---

 

Switch 사용
(완료/미완료 상태 변경)

구글링으로 완료 시 가로선을 추가할 함수를 찾아서
그대로 참고하여 가져왔다..ㅎㅎ

(출처)
https://stackoverflow.com/questions/13133014/how-can-i-create-a-uilabel-with-strikethrough-text

How can I create a UILabel with strikethrough text?

---

바로 이 단계에서 selector(셀렉터)가 필요하다.
셀렉터는 UIKit 내부의 Objective-C 런타임으로 실행되는 메서드가
셀렉터를 파라미터로 전달받을 때,
전달에 필요한 셀렉터 인스턴스를 생성하기 위해 사용한다.

셀렉터는 타입이 제공하는 기본 생성자가 있지만,
위와 같이 #selector()를 사용해서 인스턴스를 얻는다.

위와 같이 셀렉터를 생성할 메서드는 @objc를 붙여야한다.
(#selector에 순수 func 함수를 전달하면 인식이 안됨!)

tag은 지정해주고 싶은 숫자를 담고 싶을 때 사용한다.
여기서 tag은 indexPath.row가 담겨있다.

toggle()

여기서 toggle()은
Bool값을 반전시키는 함수이다.

이렇게 넣어주고, 실행시키면?

스위치를 누를 때마다
디버깅 창에 print되는 거 확인 가능!

---

 스위치를 on/off 할 때, 해당하는 문구에 가로선을 넣으려면
그 행에 해당하는 인덱스 번호를 알아야한다.

그래서 위에 표시해 놓은 코드와 같이
cell.doneSwitch.tag = indexPath.row를 해줘야한다.
그런 후, 실행시키면!

위에서 부터 하나씩 스위치를 클릭하면,
스위치 위치에 따라 0~2까지 다르게 출력되는 것을 확인할 수 있다.

---

기존에 적었던
let todo = todoList[indexPath.row] 는
let row = indexPath.row이므로
let todo = todoList[row]로 변경!

atrritbutedText 참고

그리고 if 조건문을 활용하여
스위치가 isOn일 때, 앞서 만든 가로선 긋기 함수 사용된 todo.title + textColor 핑크색
isOn이 아니라면, 레이블 텍스트 스타일 nil + 그냥 todo.title + textColor 검은색


이렇게 하고 실행해보면?

이렇게 doneSwitch가 isOn이 되면,
title에 가로선이 그어지고, 글자 색상도 변경된다.

---

 

Todo 삭제하기

이번에는 Todo를 왼쪽으로 스와이프하면,
삭제할 수 있는 기능을 구현해보려고 한다.

tableView를 쳐서 내리다보면,
'to commit the insertion or deletion of~' 라고 적혀있는거 선택

이제 아래 코드만 작성하면 된다.

---

if 조건문을 활용하여
editingStyle이 .delete 일 때,
todoList에서 해당하는 행을 제거하도록!

그리고 위 코드 처럼 삭제될 때의 애니메니션을 선택할 수 있다.

이렇게 코드를 작성하고, 실행하면 옆으로 스와이프해서 delete를 클릭하면,
해당 셀이 삭제되는 것을 확인할 수 있다.

---

여기까지
TodoList 앱 만들기 필수 구현을 정리해봤다.☺️

Standard반 과제 다 하고나면,
이어서 선택 구현 시도해보려고 한다.
(나중에 정리 예정)

---

---