일단 지금까지 짠 UI 영상 ~ ! (딱봐도 요즘 환승연애랑 스우파 보는 사람 ㅋㅋ)
1. TableView - InsetGrouped
연락처의 '그룹' 탭과 상세페이지를 보면 테이블뷰긴 테이블뷰인데, 끝이 둥근 새로운 형태의 테이블뷰가 있었다. 이거는 tableview의 Style 속성을 Inset Grouped로 주어 해결했다.
위 사진에서 ICLOUD라고 쓰여있는 부분이 Section Header이고,
그 아래 둥근 테두리 안에 해당 Section의 Row들이 나타난다.
2. filter를 이용해 조건에 따라 추출한 새로운 배열 만들기
UI 부분에서는 가장 머리를 썼던 부분이었던 것 같다.
요렇게 전체 친구목록이 있으면 이를 순서대로 정렬하고, 초성별로 섹션을 나눠주는 작업을 했다.
마침 swift 고차함수 (map, filter, reduce, compactMap, flatMap)를 살짝 맛보기 했어서 머리에 filter를 써야겠다는 생각이 스쳐갔다. (ㅋㅋㅋ)
관련 코드를 조금 적어보자면
- Section을 어떻게 나눌지생 각하고 그 내용들을
sectionList라는 배열에 담아주었다.
let sectionList = ["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"]- 한글의 첫 자음을 추출해주는 함수를 작성한다.
/// 가장 첫 초성 추출
func sectionCheck(name: String) -> String {
let hangul = ["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"]
let octal = name.unicodeScalars[name.unicodeScalars.startIndex].value
let index = (octal - 0xac00) / 28 / 21
return hangul[Int(index)] }만약, "립제이"를 함수에 적용하면 "ㄹ"이 리턴되고, "이코코"를 적용하면 "ㅇ"이 리턴된다.
- cellForRowAt에서 Section별 내용 넣어주기
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let sortedList = dummy.sorted() // 배열 정렬해서 새로운 배열 만들어주기
guard let cell = tableView.dequeueReusableCell(withIdentifier: MainNameTVC.identifier, for: indexPath) as? MainNameTVC else {
return UITableViewCell()
}
cell.setData(name: sortedList.filter({sectionCheck(name: $0) == sectionList[indexPath.section]})[indexPath.row])
return cell
}여기서 주의깊게(?) 봐야하는 내용은 cell.setData의 매개변수로 넘겨준 부분이다.
cell.setData(name: sortedList.filter({sectionCheck(name: $0) == sectionList[indexPath.section]})[indexPath.row])sortedList의 내용들 중에서 filter()안의 조건들을 만족하는 내용들을 뽑아 새로운 리스트로 만든다.
3. Array 정렬하기
sort, sorted 를 처음 써봤다!
둘의 차이점을 조금 적어보자면
sort : 해당 배열 내부에서 정렬
sorted : 정렬된 배열을 리턴해줌 (new 배열)
이 살짝 다르다.
4. TableView - sectionIndexTitles
요것은 테이블뷰 옆에 붙어있는 파란색 인덱스 들이다.
몰랐을때는 도대체 얘는 어떻게 구현해야 하나 싶었는데, 테이블뷰 Delegate에 기본적으로 포함되어있는 내용이었다.!
func sectionIndexTitles(for tableView: UITableView) -> [String]? {
return sectionList
}리턴값으로 section 배열을 넘겨주면 된다.
다음주엔 CoreData를 공부할 예정이다~!~!
