[Swift 4] Messenger, Chatting UI, Bubble 1. TableView, Custom Cell AutoLayout

#TableView Cell #Custom TableView Cell #Messenger #Chatting UI #Chatting Room #XIB #Bubble #Bubble Cell

프로젝트 코드 : https://github.com/LeeGwangYong/iOS_swift/tree/master/FaceBook

1. NavigationController 추가 및 NavigationBar 수정

2. TableViewController 및 Input View 추가, AutoLayout 설정

ㄱ. 입력창이 될 UIView 추가

leading, trailing, bottom, height 설정

ㄴ. 메세지 로그를 보여줄 UITableView 추가

TableView와 UIView의 'Vertical Spacing'을 0으로 부여

ViewController에 TableView의 Outlet 생성

ㄷ. 입력 UIView의 Bottom Constraint의 Outlet을 ViewController에 추가

키보드가 올라올 때 Constraint를 이용하여 입력창을 올리기 위한 기초작업

2. ViewController 수정

import UIKit
 
class ViewController: UIViewController {
    @IBOutlet weak var bottomConstraint: NSLayoutConstraint!
    @IBOutlet weak var messageLogTableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        messageLogTableView.separatorStyle = .none
        messageLogTableView.dataSource = self
        messageLogTableView.delegate = self
    }
}
 
extension ViewController: UITableViewDelegate
{
    //Transparent Cell Background
    func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        cell.backgroundColor = UIColor.clear
    }
}
 
extension ViewController: UITableViewDataSource
{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        return UITableViewCell()
    }
}
 
 

3. Message Bubble Cell

ㄱ. UITableViewCell (XIB 포함) 파일 생성

ㄴ. Cell AutoLayout 설정

• 시간을 나타낼 TextField의 leading >= 30

• 메세지의 내용이될 TextField의 Lines는 0. leading = 10, trailing = -20, bottom = -10, top = 10 (좌표의 시작점은 좌측상단)

1. Identity, Reuse Identifier 부여

2. Cell 등록

   override func viewDidLoad() {
           super.viewDidLoad()
           messageLogTableView.separatorStyle = .none
           messageLogTableView.dataSource = self
           messageLogTableView.delegate = self
           self.messageLogTableView.register(UINib(nibName: "MyBubbleCell", bundle: nil), forCellReuseIdentifier: "MyBubbleCell") //ViewController에서 Cell 등록
       }

3. TableView DataSource 수정

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "MyBubbleCell", for: indexPath)
        return cell
    }

• 메세지의 버블 형태를 나타낼 ImageView의 Stretching x = 0.5, y = 0.5, width = 0 , height = 0