전체적으로 실습의 흐름을 따라가보려 다시 만들어봤다.
우선 기본적인 레이아웃을 만들어주고, 오토 레이아웃을 부여한다.
기존에 있던 viewController를 사용하지 않고, 새로운 KakaoTalkViewController를 만들어 베이스로 사용한다.
import UIKit
class KakaoTalkTableViewCell: UITableViewCell {
@IBOutlet weak var profileImageView: UIImageView!
@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var lastMessageLabel: UILabel!
@IBOutlet weak var memberCountLabel: UILabel!
@IBOutlet weak var timeLabel: UILabel!
@IBOutlet weak var messageCountBackgroundView: UIView!
@IBOutlet weak var messageCountLabel: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
profileImageView.layer.cornerRadius = 17.5
messageCountBackgroundView.layer.cornerRadius = 12
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
default cell에 연결될 클래스, KakaoTalkTableViewCell.swift를 만들어 각 Cell의 component를 연결한다.
import UIKit
import Lottie
class KakaoTalkViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return chattingRoomData.count }
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "KakaoTalkTableViewCell", for: indexPath) as? KakaoTalkTableViewCell else { return UITableViewCell() }
cell.nameLabel.text = chattingRoomData[indexPath.row].name
cell.profileImageView.image = chattingRoomData[indexPath.row].profileImage
cell.lastMessageLabel.text = chattingRoomData[indexPath.row].lastMessage
if let memberCount = chattingRoomData[indexPath.row].memberCount {
cell.memberCountLabel.text = memberCount
}else{
cell.memberCountLabel.isHidden = true
}
cell.timeLabel.text = chattingRoomData[indexPath.row].time
cell.messageCountLabel.text = chattingRoomData[indexPath.row].memberCount
if indexPath.row == 0 {
cell.backgroundColor = .red
}
return cell
}
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
let readAction = UIContextualAction(style: .normal, title: "읽음", handler: {
(action, view, completionHandler) in
completionHandler(true)
}
)
readAction.backgroundColor = .darkGray
let exitAction = UIContextualAction(
style: .destructive,
title: "나가기",
handler: {
(action, view, completionHandler) in
completionHandler(true)
}
)
return UISwipeActionsConfiguration(actions: [exitAction, readAction])
}
@IBOutlet weak var kakaoTalkTableView: UITableView!
let refreshControl = UIRefreshControl()
lazy var lottieView: LottieAnimationView = {
let animationView = LottieAnimationView(name: "refreshLottie")
animationView.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
let centerX = UIScreen.main.bounds.width / 2
animationView.center = CGPoint(x: centerX, y: 40)
animationView.contentMode = .scaleAspectFit
animationView.stop()
animationView.isHidden = true
return animationView
}()
override func viewDidLoad() {
super.viewDidLoad()
setupTableView()
initRefreshControl()
}
func setupTableView() {
kakaoTalkTableView.delegate = self
kakaoTalkTableView.dataSource = self
}
func initRefreshControl() {
refreshControl.addSubview(lottieView)
refreshControl.tintColor = .clear
refreshControl.addTarget(
self,
action: #selector(refreshTableView(refreshControl:)),
for: .valueChanged
)
kakaoTalkTableView.refreshControl = refreshControl
}
@objc func refreshTableView(refreshControl: UIRefreshControl) {
print("새로고침!!")
lottieView.isHidden = false
lottieView.play()
DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
self.lottieView.isHidden = true
self.lottieView.stop()
self.kakaoTalkTableView.reloadData()
refreshControl.endRefreshing()
}
}
let chattingRoomData: [ChattingRoomDataModel] = [
ChattingRoomDataModel(
profileImage: UIImage(named: "swiftIcon"),
name: "ios 단톡방",
lastMessage: "사진을 보냈습니다.",
memberCount: "200",
time: "오전 1:05",
messageCount: "61"
),
ChattingRoomDataModel(
profileImage: UIImage(named: "umcIcon"),
name: "umc 4기 단톡방",
lastMessage: "다들 미션 안해오시면...아시죠?",
memberCount: "20",
time: "오후 2:05",
messageCount: "4"
),
ChattingRoomDataModel(
profileImage: UIImage(named: "dobbyIcon"),
name: "도비",
lastMessage: "나 화이팅",
memberCount: nil,
time: "오전 11:05",
messageCount: "1"
),
ChattingRoomDataModel(
profileImage: UIImage(named: "defaultProfileIcon"),
name: "익명1",
lastMessage: "화이팅 해봥!!",
memberCount: nil,
time: "어제",
messageCount: "1"
),
ChattingRoomDataModel(
profileImage: UIImage(named: "defaultProfileIcon"),
name: "익명1",
lastMessage: "화이팅 해qhdkdy!!",
memberCount: nil,
time: "어제",
messageCount: "1"
),
ChattingRoomDataModel(
profileImage: UIImage(named: "defaultProfileIcon"),
name: "익명1",
lastMessage: "화이팅 하던가말던갘ㅋ!!",
memberCount: nil,
time: "어제",
messageCount: "1"
),
ChattingRoomDataModel(
profileImage: UIImage(named: "defaultProfileIcon"),
name: "익명2",
lastMessage: "ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ!!",
memberCount: nil,
time: "어제",
messageCount: "1"
),
ChattingRoomDataModel(
profileImage: UIImage(named: "defaultProfileIcon"),
name: "익명3",
lastMessage: "ㅎㅎ!!",
memberCount: nil,
time: "어제",
messageCount: "1"
),
]
}
struct ChattingRoomDataModel {
let profileImage: UIImage?
let name: String
let lastMessage: String
let memberCount: String?
let time: String
let messageCount: String
}
제일 중요한 KakaoTalkViewController.swift 코드이다.
멘토님과는 다른 유형의 로딩 라이브러리를 적용했는데, 귀여운 고양이가 나오는 로딩뷰를 구현했다.
화면 기록 2022-10-28 오후 2.49.04.mov
챌린지 미션 용으로 적용할 추가적인 라이브러리는 바로, TableViewDragger이다!
셀을 자유롭게 드래그를 통해 이동할 수 있도록 하는 APi 이다
pod file에 pod 'SwiftReorder' 을 추가하고
pod install 해준다.
문서에 제시된 사용방법에 따라 사용해준다.
사용방식은 이렇게 나와있다.