[SwiftUI] List를 활용해서 채팅방 목록 화면 구현하기

모공모공 스터디에서 카카오톡 채팅 목록 화면 구현했던것을 정리해보려고 해용

먼저 완성 화면은 이렇습니다.. 

빠르게 정리해볼게요!

 

UIKit의 tableView와 동일한? 역할인 SwiftUI의 List를 활용해서 만들었어요.

 

먼저 채팅방에 대한 데이터는 하드코딩으로 넣어놓고 시작했습니다!

리스트에 대한 코드에요. 뭐가.. 되게 많고 지저분한데 (정리를 못했음요..)

일단 차근차근 보자면,,,

Image("\(sortChatListByDate()[data].imageName)")
    .resizable()
    .frame(width: 60, height: 60)
    .clipShape(Circle())
    .font(.system(size: 32))
    .padding(.trailing, 10)

ForEach로 데이터를 가져와서 resizable을 해주었고,

동그란 모양을 만들려고 clipShape을 사용했어요.

 

나머지 날짜와 텍스트는 그냥 그대로 사진 추가하는 것처럼 데이터 가져와서 넣었고..

카톡 보면 읽음, 안 읽음 표시가 있잖아요..? 그거를 해보고 싶었는데 

일단 보이는 것만 따라하자가 목표였으니.. 저는 데이터 만들때 옵셔널로 만들어서 넣었습니다!!

if let read = sortChatListByDate()[data].notRead {
    Text("\(read)")
        .padding(.leading, 5)
        .padding(.trailing, 5)
        .background(.red)
        .font(.system(size: 14))
        .foregroundColor(.white)
        .cornerRadius(9)
} else { // 값이 없을때도 padding을 맞추기 위해서 spacer 넣어주기
    Spacer()
}

데이터는.

이렇게 notRead에 수동으로 Nil or int형 데이터로 넣어줬어요!

그래서 Nil이 아니라면, 백그라운드를 넣어주었는데.. 패딩을 그냥 주면 사방으로 들어가서

저렇게 하나하나 지정해서 넣어주었어요.

 

아, 저기서 sortChatListByDate 요거는.. 지금 데이터를 보면 날짜가 순서대로가 아니잖아요?

그래서 순서대로 정렬하는 것도 하고 싶어서 함수를 따로 만들었어요.

func sortChatListByDate() -> [ChatData] {
        let sortedChatList = listData.sorted { $0.date > $1.date }
        return sortedChatList
    }

String으로 받아와서 그런지 날짜를 순서대로 정렬하려고 했을 때,

그냥 sorted 해주니까 되더라구요?!

 

그래서 리스트의 최종 코드는 밑과 같습니다.

List {
            ForEach(0..<sortChatListByDate().count, id: \.self) { data in
                VStack {
                    HStack {
                        // 프로필 이미지 불러오기
                        Image("\(sortChatListByDate()[data].imageName)")
                            .resizable()
                            .frame(width: 60, height: 60)
                            .clipShape(Circle())
                            .font(.system(size: 32))
                            .padding(.trailing, 10) // 이미지랑 채팅 스택 사이 공백을 위한 패딩
                        
                        VStack { // 프로필 이름과 내용 가져오기
                            HStack {
                                Text("\(sortChatListByDate()[data].name)")
                                    .padding(.bottom, 3)
                                Spacer()
                                Text("\(sortChatListByDate()[data].date)")
                                    .font(.system(size: 12))
                                    .foregroundColor(Color(.lightGray))
                            }
                            HStack {
                                Text("\(sortChatListByDate()[data].chat)")
                                    .lineLimit(2) // 내용 2줄로 제한해서 가져오기
                                    .font(.system(size: 14))
                                    .foregroundColor(Color(.gray))
                                Spacer()
                                
                                // nil 일 때 값을 없애기 위해서 if let으로 만들기
                                if let read = sortChatListByDate()[data].notRead {
                                    Text("\(read)")
                                        .padding(.leading, 5)
                                        .padding(.trailing, 5)
                                        .background(.red)
                                        .font(.system(size: 14))
                                        .foregroundColor(.white)
                                        .cornerRadius(9)
                                } else { // 값이 없을때도 padding을 맞추기 위해서 spacer 넣어주기
                                    Spacer()
                                }
                            }
                        }
                        Spacer()
                    }
                }
                .listRowSeparator(.hidden) // 구분선 지우기
            }
        }
        .listStyle(.plain)

 

그러고 나서 네비게이션 아이템과 타이틀을 추가했어요!

네비게이션 아이템은

.toolbar {
        Button {
            print("돋보기 눌림")
        } label: {
            Image(systemName: "magnifyingglass")
                .foregroundColor(.black)
        }

        Button {
            print("채팅추가 눌림")
        } label: {
            Image(systemName: "plus.message")
                .foregroundColor(.black)
        }

        Button {
            print("설정 버튼 눌림")
        } label: {
            Image(systemName: "gearshape")
                .foregroundColor(.black)
        }


    }

이렇게 추가했어요. 여러개의 아이템을 넣으려고 이렇게 했습니다!

.toolbar에 버튼 3개 넣은거에요.

 

 

 

굉장히 허접한~ 화면만 보이는 카카오톡 채팅 목록 뷰 완성~.. 나중에 Uikit으로 하면서 고생한건

좀 더 자세하게 써볼게요...

그리고 요것도 나중에 디벨롭 해서 기능 추가해서 올려보겠습니다...

 

오포끝!