구현 화면
구현 순서
- TweetTableViewCell.swift 파일 생성 (timeLineTable에 들어가는 셀에 대한 설정 목적)
- HomeViewController 클래스 내 timeLineTable에 TweetTableViewCell 등록
- extension HomeViewController 에 cell 불러오기
TweetTableViewCell.swift
import UIKit
class TweetTableViewCell: UITableViewCell {
static let identifier = "TweetTableViewCell"
private let avatarImageView: UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.contentMode = .scaleAspectFill
imageView.layer.cornerRadius = 25
imageView.layer.masksToBounds = true
imageView.clipsToBounds = true
imageView.image = UIImage(systemName: "person")
imageView.backgroundColor = .green
return imageView
}()
private let displayNameLabel: UILabel = {
let label = UILabel()
label.text = "Explorer"
label.font = .systemFont(ofSize: 18, weight: .bold)
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private let userNameLabel: UILabel = {
let label = UILabel()
label.text = "@Explorer"
label.textColor = .secondaryLabel
label.font = .systemFont(ofSize: 12, weight: .regular)
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private let tweetTextContentLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was bo"
label.numberOfLines = 0
return label
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
contentView.addSubview(avatarImageView)
contentView.addSubview(displayNameLabel)
contentView.addSubview(userNameLabel)
contentView.addSubview(tweetTextContentLabel)
configureConstraints()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func configureConstraints() {
let avatarImageViewConstraints = [
avatarImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20),
avatarImageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 14),
avatarImageView.heightAnchor.constraint(equalToConstant: 50),
avatarImageView.widthAnchor.constraint(equalToConstant: 50)
]
let displayNameLabelConstraints = [
displayNameLabel.leadingAnchor.constraint(equalTo: avatarImageView.trailingAnchor, constant: 20),
displayNameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 20)
]
let userNameLabelConstraints = [
userNameLabel.leadingAnchor.constraint(equalTo: displayNameLabel.trailingAnchor, constant: 10),
userNameLabel.centerYAnchor.constraint(equalTo: displayNameLabel.centerYAnchor)
]
let tweetTextContentLabelConstraints = [
tweetTextContentLabel.leadingAnchor.constraint(equalTo: displayNameLabel.leadingAnchor),
tweetTextContentLabel.topAnchor.constraint(equalTo: displayNameLabel.bottomAnchor, constant: 10),
tweetTextContentLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -15),
tweetTextContentLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -15)
]
NSLayoutConstraint.activate(avatarImageViewConstraints)
NSLayoutConstraint.activate(displayNameLabelConstraints)
NSLayoutConstraint.activate(userNameLabelConstraints)
NSLayoutConstraint.activate(tweetTextContentLabelConstraints)
}
}
HomeViewController.swft
- 이전에 작성했던, heightForRowAt 부분은 삭제
- 높이를 셀에 들어가는 내용에 맞게 임의 설정을 위함
import UIKit
class HomeViewController: UIViewController {
private let timelineTableView: UITableView = {
let tableView = UITableView()
tableView.register(TweetTableViewCell.self, forCellReuseIdentifier: TweetTableViewCell.identifier)
return tableView
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(timelineTableView)
timelineTableView.delegate = self
timelineTableView.dataSource = self
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
timelineTableView.frame = view.bounds
}
}
extension HomeViewController: UITableViewDelegate, UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: TweetTableViewCell.identifier, for: indexPath) as? TweetTableViewCell else { return UITableViewCell()
}
return cell
}
// 테이블 셀의 행 높이 설정
// 테이블 셀의 내용부분에 텍스트가 들어가게 되면 해당 높이는 삭제 해야한다. 왜냐하면? 높이가 고정된 상태에서 텍스트가 길어지면 ...으로 뒷부분이 처리되기 때문이다.
// func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
// return 120
// }
}
TIL
- 어떤 문제가 있었는지
- timelineTable의 content의 글씨가 잘라서 나옴
- cell 내의 content를 선언할 때 numberofLines = 0 이라고 했지만 적용 안됨
- 어떻게 해결했는지
- extension HomViewController 에서 heightForRowAt ~ 함수 부분 삭제 (셀 높이 고정 제거)
https://youtu.be/Gmyl28QfXzU?si=EoLcSXN6W_3iS4NU
'Clone App > Twitter' 카테고리의 다른 글
[Twitter Clone] Add Indicator button in profile view (0) | 2024.05.27 |
---|---|
[Twitter Clone] Continue implementing the profile view (0) | 2024.05.27 |
[Twitter Clone] Add logo, Design ProfileView (0) | 2024.05.26 |
[Twitter Clone] Add tweet actions (0) | 2024.05.24 |
[Twitter Clone] Setup the basic layout (0) | 2024.05.23 |