[swift] 채팅 UI 구현해보기(1)

안녕하세요~

 

오늘은 채팅 UI를 구성하는 방법에 대해서 적어보려고 합니다 : )

 

몇 개의 포스팅이 될지는 모르겠지만 일단 시작해 보겠습니다.

 

채팅 영상

 

제가 구현한 채팅 UI는 위와 같습니다.

 

TableView와 TableViewCell

TableView

- 채팅 UI를 구현하는 방법을 찾다 보면 간혹 CollectionView를 이용하신 분들도 계시던데 저는 TableView를 활용했습니다.

TableVIewCell

- 같은 Cell을 이용해 구현하신 분들도 있었는데 저의 경우에는 자신이 보내는 채팅과 상대가 보내는 채팅 두 가지의 TableViewCell을 사용했습니다.

 

이번 포스팅에서는 TableViewCell을 만들고 TableView에 적용하는 방법에 대해서 적어보겠습니다.

 

 

1. TableViewCell을 만들자

 

공통사항 : 텍스트를 보내고 받을 때 보여줄 텍스트뷰를 만들어줘야 합니다. 영상에서 보았듯이 시간을 나타내기 위해 UILable을 추가적으로 넣었습니다.

 

(1) 내가 보낼 때 사용할 Cell 

// 내가 보낼 때 사용할 Cell
class ChattingViewMyCell: UITableViewCell {

    //identifier 변수 만들어주기!
    static let identifier = "ChattingViewCell"
    
    // 채팅내용이 들어갈 텍스트뷰를 만들어줍시다
    let messageBox = UITextView().then {
        $0.isScrollEnabled = false // 스크롤은 필요하지 않습니다.
        $0.isEditable = false // 수정할 수도 없구요!
        $0.backgroundColor = R.color.brandWhitegreen()!
        $0.textContainerInset = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5) 
        $0.layer.cornerRadius = 10
        $0.font = .toBodyR14
        // 텍스트 길이에 맞게 사이즈를 맞춰줍니다
        $0.sizeToFit()
    }
    
    let date = UILabel().then {
        $0.numberOfLines = 0
        $0.backgroundColor = .clear
        $0.textColor = R.color.gray7()!
        $0.font = .toBodyR12
    }
}

 

이때, trailingConstraint와 width값을 주시면 됩니다.

sizeToFit 메서드로 인해 높이는 자연스럽게 정해지니 최소 45 이상으로 설정했습니다.

 

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)

    // 선택시 스타일은 없어야겠죠!
    selectionStyle = .none

    contentView.addSubview(messageBox)
    contentView.addSubview(date)

    messageBox.snp.makeConstraints { make in
        // 내가 보내는 셀의 경우 우측에 붙어있어야하기에 trailing과 width값을 주면됩니다.
        make.trailing.equalToSuperview().inset(15)
        make.top.bottom.equalToSuperview()
        make.height.greaterThanOrEqualTo(45)
        make.width.lessThanOrEqualTo(255)
        make.centerY.equalToSuperview()
    }

    date.snp.makeConstraints { make in
        make.trailing.equalTo(messageBox.snp.leading).offset(-5)
        make.bottom.equalTo(messageBox.snp.bottom)
    }
}

 

(2) 받은 메시지를 보여줄 때 사용할 Cell

위와 코드상으로는 동일합니다.

다만 레이아웃은 반대로 조정이 돼야 합니다.

기존의 trailling을 leading으로 바꿔주면 됩니다.

 

2. TableView에 적용해 보자

 override func viewDidLoad() {
    super.viewDidLoad()

    tableView.delegate = self
    tableView.dataSource = self
    
    // 두 Cell을 모두 등록
    tableView.register(ChattingViewMyCell.self, forCellReuseIdentifier: ChattingViewMyCell.identifier)
    tableView.register(ChattingViewYourCell.self, forCellReuseIdentifier: ChattingViewYourCell.identifier)
    tableView.rowHeight = UITableView.automaticDimension
        
}

 

이렇게 하면 평소 구현하셨던 TableView와 TableViewCell이 정상적으로 동작하게 됩니다.

 

다만

(1) 메시지를 주고받을 때, 순서대로 테이블 뷰에 쌓이게 되면 가장 최근에 보낸 것이 가장 마지막으로 가게 되고

(2) 메시지를 주고받을 때, 자동으로 마지막에 처리했던 메시지를 볼 수 있게 스크롤의 위치를 변경해 줄 필요가 생깁니다.

 

 

위의 두 가지는 다음 포스팅에서 진행하겠습니다.

그럼 이만 👋🏻👋🏻👋🏻

 

[ 다음 포스팅 ]

[swift] 채팅 UI를 만들어봅시다!(2)