[iOS: Toy Project] Chat List

📌 네번째 프로젝트

채팅 리스트 앱을 만들어보자

 

 

 

1️⃣ Data 확인 및 ChatListViewController 만들기

패캠에서 제공해준 데이터 swift 파일

패캠에서 제공해준 Assests 파일

 

 

 

2️⃣ Auto Layout

CollectionView와 View 사이의 Auto Layout

imageView AutoLayout

이름 Label과 이미지 사이의 Auto Layout

이름과 대화내용사이의 Auto Layout

날짜와 ContentView 사이의 Auto Layout

대화내용과 날짜 사이의 수평방향 거리두기 (겹치지 않도록 하기 위해서)

 

 

 

3️⃣ UICollectionViewCell 만들기

Cell 연결 , 재사용 ID 식별자도 설정

// ChatListCollectionViewCell.swift

import UIKit

class ChatListCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var thumbnail: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var chatLabel: UILabel!
    @IBOutlet weak var dateLabel: UILabel!
    
    // Chat.swift 파일에 있는 내용을 받아서 내용 업데이트
    func configure(_ chat: Chat){
        thumbnail.image = UIImage(named: chat.name)
        nameLabel.text = chat.name
        chatLabel.text = chat.chat
        dateLabel.text = chat.date
    }
}

 

 

 

4️⃣ Data가 들어가기 전까지 ViewController에 작성되어야 할 코드 (준수할 프로토콜..)

//
//  ChatListViewController.swift
//  Chat List
//
//  Created by 오예진 on 2022/05/22.
//

import UIKit

class ChatListViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!
    
    let chatList: [Chat] = Chat.list
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Data, Presentation, Layout
        
        // dataSource : data와 presentation을 표현해주는 것을 누군가에게 위임해주는 역할
        collectionView.dataSource = self    // self : 바로 viewController 나야 나
        // delegate : Layout도 누군가에게 위임
        collectionView.delegate = self  // 이것도 viewController
        // self = 위임당하는 객체로 바로 viewController 자신임
        

    }

}

// dataSource와 delegate 프로토콜을 준수하기 위한 extension (각 프로토콜에 필요한 메소드들을 작성)
extension ChatListViewController: UICollectionViewDataSource {
    
    // CollectionView에 표현되는 아이템의 개수가 몇개인지 = chat list의 개수만큼!
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return chatList.count
    }
    
    // cell을 어떻게 표현할지
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // 재사용 구분자를 이용하여 cell을 가져오기
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ChatListCollectionViewCell", for: indexPath)
        return cell
    }
    
}

// for Layout
// ChatListViewController가 FlowLayout에 대한 역할을 위임받을 것이다.
extension ChatListViewController: UICollectionViewDelegateFlowLayout{
    
    // Cell의 사이즈
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.bounds.width, height: 100)
    }
    
}

아직 데이터 업데이트 X

 

 

 

5️⃣ Data 업데이트 : 캐스팅!

// ChatListViewController.swift

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    // 재사용 구분자를 이용하여 cell을 가져오기
    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ChatListCollectionViewCell", for: indexPath) as? ChatListCollectionViewCell else {
        return UICollectionViewCell()   // 캐스팅이 실패한 경우 실행
    }

    // 캐스팅에 성공한 경우 실행되는 아래의 코드
    let chat = chatList[indexPath.item]
    cell.configure(chat)
    return cell
}

데이터 업데이트 완료

 

 

 

6️⃣ 보완

 

1. 채팅내용 두줄로 표현

CollectionView의 Estimate Size를 None으로 설정

❗️강의에서는 이렇게하면 된다고 했는데 나는 안되길래.. 다른 방법을 찾아봄

바로 numberOfLines를 통해 Label의 줄바꿈 속성 값을 주어주는 것이다.

//  ChatListCollectionViewCell.swift

import UIKit

class ChatListCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var thumbnail: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var chatLabel: UILabel!
    @IBOutlet weak var dateLabel: UILabel!
    
    // Chat.swift 파일에 있는 내용을 받아서 내용 업데이트
    func configure(_ chat: Chat){
        thumbnail.image = UIImage(named: chat.name)
        nameLabel.text = chat.name
        chatLabel.text = chat.chat
        dateLabel.text = chat.date
        
        // 바로 이렇겡~!
        chatLabel.numberOfLines = 2
    }
}

 

 

2. 채팅 내용이랑 날짜 사이의 힘의 균형 비등하여 날짜가 보이지 않는 문제 해결

Content Hugging Priority : 우선순위가 높으면 내 크기 유지. 우선순위 낮으면 크기 늘어남

Content Compression Resistence Priority : 우선순위가 높으면 내 크기 유지. 우선순위 낮으면 크기 작아짐

chatLabel보다 dateLabel이 더 힘이 쎄도록 해보쟈

chatLabel이 dateLabel보다 약해야하기 때문에,

chatLabel의 Content Compression Resistence Priority를 Row(250)으로 맞추기

-> 이렇게 하면 힘의 균형에 있어서 chatLabel은 dateLabel보다 약하여 쪼그라든다.

 

보완한 화면 (채팅 내용, 날짜 내용)

 

3. 날짜 표현 줄이기

- DateFormatter() 객체 이용

//
//  ChatListCollectionViewCell.swift
//  Chat List
//
//  Created by 오예진 on 2022/05/22.
//

import UIKit

class ChatListCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var thumbnail: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var chatLabel: UILabel!
    @IBOutlet weak var dateLabel: UILabel!
    
    // Chat.swift 파일에 있는 내용을 받아서 내용 업데이트
    func configure(_ chat: Chat){
        thumbnail.image = UIImage(named: chat.name)
        nameLabel.text = chat.name
        chatLabel.text = chat.chat
        dateLabel.text = formattedDateString(dateString: chat.date)
        chatLabel.numberOfLines = 2
    }
    
    func formattedDateString(dateString: String) -> String {
        
        // String -> Date -> String 순으로 변환시켜줘야함.
        // 2022-04-01 > 4/1
        
        // DateFormatter() 객체 이용
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy-MM-dd"
        
        // String -> Date 변환
        if let date = formatter.date(from: dateString){
            formatter.dateFormat = "M/d"
            
            // Date -> String 변환
            return formatter.string(from: date)
        } else {
            return ""
        }
    }
}

보완된 화면 (날짜 축약)

 

 

4. 날짜를 역순으로 바꾸기 (최신 대화가 가장 위로!)

- 배열 내장함수인 sort를 이용

// ChatListViewController.swift

// ...

override func viewDidLoad() {
        //...
        
        // closure 표현방법을 통해서 sort 함수 이용
        chatList = chatList.sorted(by: {chat1, chat2 in return chat1.date > chat2.date})
        // -> date에 따라 역순으로 정렬된 chatList가 출력된다.

}

보완된 화면 (날짜 내림차순 정렬)

 

 

5. 썸네일 테두리 약간 둥글게 만들기

- Storyboard에서 꺼내와서 코드로 바꿔보자!

awakeFromNib() 함수 사용 -> storyboard에서 꺼내올 때, 불리어지는 함수

// ChatListCollectionViewCell.swift

import UIKit

class ChatListCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var thumbnail: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var chatLabel: UILabel!
    @IBOutlet weak var dateLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        thumbnail.layer.cornerRadius = 10 
    }
    
    // ....
}

보완된 화면 (둥글어진 썸네일)

 

 

🚀 구현 완료!

 

 

 

---

📌 정리,

• dataSource : data와 presentation을 표현해주는 것을 누군가에게 위임해주는 프로토콜
• delegate : layout을 누군가에게 위임해주는 프로토콜
• 위의 두개의 프로토콜을 준수할 extenstion 코드도 작성해봤음
• Content Hugging Priority와 Content Compression Resistence Priority을 통한 component간의 힘의 세기 변경
• DateFormatter() 객체를 이용한 날짜 형식 변경
• 클로저 표현을 통한 sort() 함수 사용 -> 배열의 특정 요소를 기준으로 한 정렬

 

 

 

---

Reference

패스트캠퍼스 온라인 강의