주니곰의 괴발노트
SeSAC TIL - 22.07.19 본문
1. 오늘 배운 내용
- 과제를 같이 수행해보면서 배열에 담긴 데이터를 열거형 타입의 데이터로 변경하는 리팩토링을 해보았습니다.
- 커스텀 타입의 테이블 뷰에 대해 배우고 UI를 구성하는 방법에 대해 배웠습니다.
- Extension을 활용하여 다양한 파일에서 동일한 기능을 구현하는 방법에 대해 배웠습니다.
2. Checklist
2-1. TableView ReloadData
셀에 있는 데이터를 변경 후에는 항상 ReloadData() 메서드를 통해 화면을 갱신해주어야 합니다. 해당 메서드는 셀 및 섹션 등을 모두 리로드하는 메서드이고 셀과 섹션 등만 따로 리로드하는 메서드도 있습니다.
2-2. Custom TableViewCell
테이블 뷰 셀에서 제공하는 기본적인 스타일을 사용하지 않고 자유롭게 구성하는 스타일입니다. 헤더 및 후터도 뷰를 넣어서 커스터마이징할 수 있습니다.
2-3. Enum CaseIterable
열거형의 모든 케이스를 배열로 담을 수 있도록 해주는 키워드입니다. 이를 활용해서 열거형에 들어있는 모든 타입을 배열처럼 활용할 수 있고 indexPath와 같이 사용할 경우 반복문없이 편하게 셀을 구현할 수 있습니다.
2-4. Extension
클래스를 확장하여 입맞에 맞는 메서드를 생성하여 여러 파일에서 사용할 수 있게 해줍니다. 계산 속성도 사용할 수 있고 새로운 스타일의 생성자도 구현할 수 있습니다. 그러나 기존에 존재하는 메서드를 override하여 사용할 수 없습니다.
3. 과제 및 실습
커스텀 테이블 뷰 셀을 활용하여 쇼핑리스트 및 검색 화면 만들기
- 인터넷을 통해 체크박스와 즐겨찾기 버튼의 액션의 애니메이션 효과를 주는 코드를 찾아 적용해보았습니다.
- 현재 문제는 체크박스와 즐겨찾기 체크된 항목이 해당 셀에 있지 않고 추가 및 삭제시 움직인다는 점 입니다. 이 점은 아직 해결 못했으며 앞으로 해결해봐야할 것 같습니다..
swift
닫기class TrendTableViewController: UITableViewController {
// MARK: - Properties
var list = ["테스트 출력", "쇼핑리스트 출력"]
// MARK: - Init
override func viewDidLoad() {
super.viewDidLoad()
}
// MARK: - Table View Functions
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 1
}
override func numberOfSections(in tableView: UITableView) -> Int {
return 2
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if section == 0 {
return 1
} else {
return list.count
}
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if indexPath.section == 0 {
let cell = tableView.dequeueReusableCell(withIdentifier: "TextFieldTableViewCell", for: indexPath) as! TextFieldTableViewCell
cell.addButton.setTitle("추가", for: .normal)
cell.addButton.clipsToBounds = true
cell.addButton.layer.cornerRadius = 3
cell.addButton.backgroundColor = .systemGray4
cell.addButton.setTitleColor(.black, for: .normal)
cell.actionBlock = {
self.list.append(cell.shoppingTextField.text!)
tableView.reloadData()
}
cell.shoppingTextField.placeholder = "무엇을 구매하실 건가요?"
cell.shoppingTextField.backgroundColor = .systemGray5
cell.shoppingTextField.borderStyle = .none
cell.actionBlock = {
self.list.append(cell.shoppingTextField.text!)
tableView.reloadData()
}
return cell
} else if indexPath.section == 1 {
let cell = tableView.dequeueReusableCell(withIdentifier: "TrendTableViewCell", for: indexPath) as! TrendTableViewCell
cell.shoppingListLabel.text = list[indexPath.row]
cell.shoppingListLabel.font = .systemFont(ofSize: 18)
cell.checkboxButton.tintColor = .black
cell.favouriteButton.tintColor = .black
return cell
} else {
let cell = tableView.dequeueReusableCell(withIdentifier: "TrendTableViewCell", for: indexPath) as! TrendTableViewCell
cell.shoppingListLabel.text = list[indexPath.row]
cell.shoppingListLabel.font = .systemFont(ofSize: 18)
return cell
}
}
override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
return true
}
override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
if editingStyle == .delete {
list.remove(at: indexPath.row)
tableView.reloadData()
}
}
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: true)
}
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
if indexPath.section == 0 {
return 70
} else {
return 40
}
}
}swift
닫기class TrendTableViewCell: UITableViewCell {
@IBOutlet weak var checkboxButton: UIButton! {
didSet{
checkboxButton.setImage(UIImage(systemName: "square"), for: .normal)
checkboxButton.setImage(UIImage(systemName: "checkmark.square"), for: .selected)
}
}
@IBOutlet weak var favouriteButton: UIButton! {
didSet{
favouriteButton.setImage(UIImage(systemName: "star"), for: .normal)
favouriteButton.setImage(UIImage(systemName: "star.fill"), for: .selected)
}
}
@IBOutlet weak var shoppingListLabel: UILabel!
@IBAction func checkboxButtonTapped(_ sender: UIButton) {
sender.checkboxAnimation {
print("I'm done")
//here you can also track the Checked, UnChecked state with sender.isSelected
print(sender.isSelected)
}
}
@IBAction func favouriteButtonTapped(_ sender: UIButton) {
sender.checkboxAnimation {
print("I'm done")
//here you can also track the Checked, UnChecked state with sender.isSelected
print(sender.isSelected)
}
}
}swift
닫기class TextFieldTableViewCell: UITableViewCell {
@IBOutlet weak var shoppingTextField: UITextField!
@IBOutlet weak var addButton: UIButton!
var actionBlock: (() -> Void)? = nil
@IBAction func shoppingTextFieldFilled(_ sender: UITextField) {
actionBlock?()
}
@IBAction func addButtonTapped(_ sender: UIButton) {
actionBlock?()
}
}- 그리고 테이블 뷰 셀을 두 개 활용하여 추가버튼 부분과 목록 부분을 나누어서 구현하였습니다.
- 하지만 첫번째 셀에서 액션을 활용할 때가 좀 어려웠습니다. 이를 해결하기 위해 버튼을 누르면 함수를 실행하도록 테이블 뷰 셀에서 구현하고 테이블 뷰 컨트롤러에서 CellForRowAt 메서드 내에서 클로저를 통해 액션을 구현하였습니다.
4. 자료 출처
구글 검색어: Reloaddata swift -> https://developer.apple.com/documentation/uikit/uitableview/1614862-reloaddata
'기타' 카테고리의 다른 글
| 새싹스터디 앱 개발 회고 (1) | 2022.12.25 |
|---|---|
| 여행가자곰 출시 프로젝트 회고 (0) | 2022.10.14 |
| SeSAC TIL - 22.07.18 (0) | 2022.07.20 |
| SeSAC TIL - 22.07.15 (0) | 2022.07.18 |
| SeSAC TIL - 22.07.14 (0) | 2022.07.18 |
'기타' Related Articles
more
