FlashChat (6)
Cell Customizing
새로운 파일을 하나 만든다.
일반 Swift 파일이 아닌 CocoaTouch Class 파일이며,
여기서 우린 일반적으로 UIViewController로 만들었는데, 이번에는
Subclass릂 UITableViewCell로 지정 하고 그아래 XIB file도 체크해서 같이 만들어 준다!
이렇게 2개의 파일이 새로 생성이 되었다.
*.xib은 디자인 파일이다
1
2
3
4
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
Nib은 xib의 예전 이름이다.
1. Cell Design
우리가 UIComponent 추가하듯이 추가해주고 사이즈를 맞춰준다.
그리고 배경색을 지정해주자.
UILabel도 추가를 해준다.
그리고 ImageView도 만들어준다.
사이즈를 조절해주고 StackView로 묶어준다.
그리고 ImageView의 사이즈를 40, 40으로 맞춰 주었다.
사이즈조절은?
여기서 해준다.
혹시라도 잊어버렸을까봐 리마인드겸 다시 사진으로 올려본다.
StackView의 제약을 4방향으로 10을 주고, UILabel 또한 같은값으로 4방향 모두 주자.
이렇게 나오는데 Cell을 좀 더 늘려서 맞춰주면 된다.
조절이 되었으면 StackView 의 Spacing을 20으로 늘려서 UIView와 ImageView의 간격을 준다.
그리고 ImageViewd의 이미지를 바꿔주면? 아래와 같이 된다.
2. swift 파일과 연결
우리가 StoryBoard에서 연결하듯이 Control을 누르고 드래그 해주면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import UIKit
class MessageCell: UITableViewCell {
@IBOutlet weak var messageBubble: UIView!
@IBOutlet weak var label: UILabel!
@IBOutlet weak var rightImageView: UIImageView!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
이제 사용할 준비가 모두 끝났다.
이제 ChatVC에 연결을 해주면 된다.
viewDidLoad에 연결을 해줄 것이다.
tableView의 메서드중 register를 사용 할 것이다.
파라미터는 사진과 같다.
tableView.register(UINib(nibName: <#T##String#>, bundle: <#T##Bundle?#>), forCellReuseIdentifier: <#T##String#>)
- nibName : 우리가 만든 파일명(*.xib)을 써주면 된다.
- 여기선 MessageCell 이다.
- bundle : nil로 설정
- forCellReuseIdentifier : 우리가 Cell을 만들때 썼던 그 Identifier이다.
- 여기선 ReusableCell 이다.
그리고 MessageCell의 identifier도 똑같은 이름으로 설정해준다.
이제 연결은 끝났다.
3. Cell 만들기
우리가 TableView를 만들던 그 함수로 돌아가자.
1
2
3
4
5
6
7
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: K.cellIdentifier, for: indexPath)
cell.textLabel?.text = messages[indexPath.row].body
return cell
}
바로 이 부분이다.
여태까지는 일반적인 cell을 생성해주었다.
우리가 만든 Message Cell을 사용하기 위해선
let cell = tableView.dequeueReusableCell(withIdentifier: K.cellIdentifier, for: indexPath)
이부분을 다운 캐스팅 해줘야한다.
let cell = tableView.dequeueReusableCell(withIdentifier: K.cellIdentifier, for: indexPath) as! MessageCell
이렇게 우리가 만들어준 셀의 클래스 명으로 다운캐스팅 해주자.
이젠 textLabel이 아니라 Label로 해줄 수 있다.
그리고 이젠 우리가 이전에 만들어 주었던 Prototype Cell이 필요가 없다. 지워주자.
그게 뭔지 모르겠으면? 아래 사진을 보자
이제 실행하여 확인해보자!
우리가 만든대로 잘 적용이 된걸 알 수 있다.
모서리를 약간 둥글게 하려고 한다.
우리가 코드로 UIComponents의 여러 속성을 바꾸는 것처럼.
모서리도 코드로 바꿀 수 있다.
1
2
3
4
override func awakeFromNib() {
super.awakeFromNib()
}
awakeFronNib은 VC의 ViewDidLoad와 같다고 생각하면 된다.
messageBubble.layer.cornerRadius = messageBubble.frame.size.height / 5
이렇게 해주었다. 특정한 값으로 해버리면 내용이 길어지면 이상할 수 있기에, 변화하는 높이값에 맞춰서 모서리를 준것이다.
둥글게 잘 되었다.
내용이 길어진다고 위에 언급을 해서 더 적어본다면, 현재 Cell의 label은
바로 1줄로 되어있다.
즉 길어지면 …으로 될 것이다.
우리가 어떤 메세지를 주고 받을때 장문을 보내면 … 이 안생기는것 처럼. 이 부분도 0으로 바꿔주자.
그럼 문제가 해결인가?
아니다!
위의 사진을 보면 내용이 길어지니 짤려버린다.
StackView의 Alignment를 Top으로 바꿔주자.
내용이 길어지니 자연스럽게 이렇게 된다.
