💡무엇을 할거냐

기본 앱의 멀티 셀렉션UI

UITableView 는 이미 셀렉션 모드에서 멀티 셀렉션을 할 수 있습니다.
하지만 체크박스(서클)가 왼쪽편에 있고 오른쪽으로 붙이는 옵션은 따로 없었습니다.

UITableViewCell 에 editingAccessoryView 라는 인스턴스 프로퍼티가 있어서 써봤습니다만, editingAccessoryType 에 따라 정해진 아이콘을 보여줄 뿐 원하는 이미지를 넣을 수 없었습니다. 그리고 왼쪽에 셀렉션 체크박스를 없앨 수 없는것 같더라구요.. 😂그지같은 애플ㅋ

혹시 방법을 알고 계시다면 댓글 부탁드립니다 yeye👀

별거 아닌데 iOS에서 제공하는게 없어서 귀찮았지만, 디자이너의 디자인컨셉을 지켜드리기 위해 직접 커스텀했습니다.
(카톡에 있는 UI여서 저도 할 수 있겠다 싶었구요🌝)

🏃🏻‍♂️요구사항

1. 에디팅모드에서 멀티셀렉팅으로 채팅방 나가기를 가능하게 한다.
2. 채팅리스트/내 채팅 이동시 에디팅 상태를 초기화 한다.(채팅 탭 내부에 페이져뷰가 있고 그 안에 2개의 페이지가 있습니다.)

개발 고수인 여러분들에게는 아주 쉽죠?
저는 존못에 Abstraction 중독자, HDD라 또 이상한짓 많이 했습니다💩

👀본론

뷰 레이어

먼저 자소설닷컴 앱의 채팅 목록 뷰 레이어를 간략히 소개해야 할것 같네요

UITabBarController - ChatMainVC(RED) - PagerView - ChatTableVC(BLUE), MyChatTableVC(BLUE)
대충 이렇습니다.

PagerView 는 XLPagerTabStrip 라이브러리를 이용하고 있습니다 ㅋ 안드 애플 혼종😈

상단 우측에 •••버튼(더보기) 보이시죠?
네 저것을 누르면 액션시트가 올라와서 편집모드로 들어갈 수 있습니다.
ChatMainVC 내부의 더보기 버튼을 누르면, 페이져뷰의 하위에 있는 현재 뷰컨트롤러(ChatTableVC, MyChatTableVC)의 테이블 뷰가 멀티셀렉팅 모드로 바뀌어야합니다.
그리고 현재 뷰 컨트롤러를 바꿀때 마다, 편집상태는 초기화 되어야 합니닷.

1. 테이블 뷰의 멀티셀렉팅 커스텀
2. isEditing state 관리

크게 두가지로 나눠 다뤄보겠습니다.

혹시 •••버튼 의 명칭을 아시나요? 저는 moreHorizonButton이라고 그냥 했습니다;;

Multiple Selection

1. isEditing
   UIViewController에는 isEditing 프로퍼티가 이미 있습니다.
   저는 이걸로 에디팅 모드 state 를 관리 했습니다.

2. TableViewCell
   ChatTableVC에 이용되는 ChatCell에 미리 체크박스들을 만들어 놓고, isEditing 상태에 따라 constraints를 변경해 주고, isHidden값을 조정했습니다.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let chatGroupVM = vm.chatGroupVMs[indexPath.section]
    let chatCellVM = chatGroupVM.chatCellVMs[indexPath.row]
    let cell = chatCellVM.cellInstance(tableView, indexPath: indexPath)

    guard let chatCell = cell as? ChatCellRepresentable else { return cell }
    if chatGroupVM.isRemovable {
        chatCell.toggleSelectionImageView(isEditing: isEditing)
        chatCell.setSelected(isSelected: chatCellVM.isSelected)
    } else {
        chatCell.toggleSelectionImageView(isEditing: false)
        chatCell.setSelected(isSelected: chatCellVM.isSelected)
    }
    return chatCell
}

ChatTableVC.swift

import UIKit
import SnapKit

class ChatCell: UITableViewCell, ChatCellRepresentable {
    @IBOutlet weak var imgLogo: UIImageView!
    @IBOutlet weak var lbTitle: UILabel!
    @IBOutlet weak var lbNowChatting: UILabel!
    var selectionImageView = UIImageView().then {
        $0.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
        $0.isHidden = true
    }

    private let unselectedImg = UIImage(named: "Round_Check – 1")
    private let selectedImg = UIImage(named: "Round_Check_Select – 1")

    override func awakeFromNib() {
        super.awakeFromNib()

        addSubview(selectionImageView)
        selectionImageView.snp.makeConstraints { make in
            make.centerY.equalToSuperview()
            make.trailing.equalToSuperview().inset(14.0)
        }
    }

    func toggleSelectionImageView(isEditing: Bool) {
        selectionImageView.isHidden = !isEditing
        lbNowChatting.snp.remakeConstraints { make in
            make.width.equalTo(45.0)
            make.height.equalTo(21.0)
            make.centerY.equalToSuperview()
            make.trailing.equalToSuperview().inset(isEditing ? 45.0 : 15.0)
        }
    }

    func setSelected(isSelected: Bool) {
        selectionImageView.image = isSelected ? selectedImg : unselectedImg
        self.isSelected = isSelected
    }

    func setup(vm: ChatCellVMRepresentable) {
        if let imageUrl = vm.chat.imageUrl, let url = URL(string: imageUrl) {
            imgLogo.kf.setImage(with: url)
        }
        lbTitle.text = vm.title
        lbNowChatting.isHidden = !vm.chat.isNowChatting
        selectionImageView.image = !vm.isSelected ? selectedImg : unselectedImg
    }
}

ChatCell.swift

정리하기 귀찮아서 그냥 다 공개합니다💩

3. isSelected
   didselectRowAt 함수에 isEditing 상태를 가지고 로직을 분기시켰습니다.
   cell에 대응하는 vm의 isSelected속성을 변경하고, cell의 뷰도 변경 시켜줍니다.

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let chatVM = vm.chatGroupVMs[indexPath.section].chatCellVMs[indexPath.row]
    
    if isEditing {
        chatVM.isSelected.toggle()
        guard let cell = tableView.cellForRow(at: indexPath) as? ChatCellRepresentable else { return }
        cell.setSelected(isSelected: chatVM.isSelected)
    } else {
        self.openChat(by: chatVM.chat)
        tableView.reloadRows(at: [indexPath], with: UITableView.RowAnimation.none)
    }
}

ChatTableVC.swift

isEditing state

state를 바꾸는 ui는 ChatTableVC가 아니라 그 상위 뷰 입니다.
하나의 버튼으로 하위 2개의 테이블뷰의 상태를 관리하는 구조라서 일반적이진 않은것 같아요 😈

여기 까지 쓰다가 힘이 빠져서 나머지는 다음 포스팅에 이어가겠습니다...

👀끝으로

iOS개발을 시작하게 되었을때 저희 앱은 MVC 패턴으로 만들어져 있었고, 그 조차도 전혀 swifty하지 않았습니다.
제가 조르고 졸라 소중한 리팩토링 시간을 얻어내어 MVC -> MVVM 으로 변경했었는데, 이번에 ReactorKit까지 집어 넣어 봤습니다.
그래서 지금은 MVC, MVVM, ReactorKit 세가지가 섞여 있읍니다.. 이상해 보이더라도 이해해 주세요🙏🏻

포스팅하고 싶은 내용은 계속 쌓여가는데 글쓰는게 참 쉽지 않네요🏃🏻‍♂️🤬

일단 생각하고 있는게

1. ReactorKit을 이용한 isEditing state 관리(개쉬움)
2. Apple Login(iOS, Web)

두가지가 있습니다.
잘 할 수 있을까요?🙉