[Swift/Clone] 카카오톡 대화창 클론 코딩2

저번 글에서 카카오톡 대화창 텍스트 입력창을 텍스트 뷰로 구현했었다.

https://eunduk2.tistory.com/34

[Swift/Clone] 카카오톡 대화창 클론 코딩1

 

이번에는 입력한 텍스트를 보내는 기능을 구현해 보도록 하겠다!

 

 

결과화면

 

 

일단 보내기 버튼을 누를 때마다 톡이 생겨야되기 때문에 테이블 뷰로 구성했다.

텍스트를 감싸고 있는 노란바탕은 새로운 뷰로 구성했고 그 안에 레이블을 넣었다.

그리고 노란 쉼표모양을 붙여주고 오토레이아웃을 적용하면 끝!

(글자 수의 따라 레이블과 뷰의 크기가 동적으로 변한다.)

 

 

보내기 버튼 액션 함수

// 톡을 담을 배열
var text: [String]? = ["test"]
// 시간을 담을 배열
var time: [String]? = ["18:48"]

@IBAction func onSend(_ sender: Any) {
    // 텍스트 뷰 레이아웃 default값
    numberOfLines = 1
    bottomBarHeight.constant = 78
    textBarHeight.constant = 36

    // 텍스트뷰의 텍스트 배열에 추가
    text?.append(textView.text)
    // 현재 시간을 시간 배열에 추가
    time?.append(currentTime())

    textView.text = ""
    btn.isHidden = false
    btnSend.isHidden = true

    // 톡이 생길 때마다 테이블 뷰 높이를 조절하여 올라가게함
    tableTop.constant -= 45
    // 테이블 뷰가 맨위까지 올라가면 스크롤로 전환된다.
    if(tableTop.constant < 0) {
        tableTop.constant = 0
    }

    table.reloadData()
}

// 현재시간 시간:분 형식으로 반환
func currentTime() -> String {
    let dateFormatter = DateFormatter()
    dateFormatter.dateFormat = "HH:mm"

    let currentTime = Date()
    let currentTimeString = dateFormatter.string(from: currentTime)

    return currentTimeString
}

톡을 보낼 때마다 위로 올라가는 효과를 주기 위해

처음에는 테이블 뷰 높이를 낮게 하고 톡이 생길때 마다 높이를 높여주었다.

 

 

테이블 뷰 코드

extension ViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        // 톡 개수 반환
        if let txtCount: Int = text?.count {
            return txtCount
        }

        return 0
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell
        
        if let tmpText = text, let tmpTime = time {
            // 텍스트 할당
            cell.lblText.text = tmpText[indexPath.row]
            
            // 시간 텍스트 할당
            cell.lblTime.text = tmpTime[indexPath.row]
            
        }
        
        return cell
    }
}

 

 

마지막으로 하잖은 네비게이션 바 추가해주고..ㅎ

func navigationSetting() {
    let navigationBarAppearance = UINavigationBarAppearance()
    navigationBarAppearance.backgroundColor = UIColor(red: 38/255, green: 38/255, blue: 39/255, alpha: 1)
    navigationController!.navigationBar.standardAppearance = navigationBarAppearance
    navigationController!.navigationBar.scrollEdgeAppearance = navigationBarAppearance

    navigationItem.title = "은덕이"
}

 

 

끝~!

 

 

 

여기까지 해서 카톡 대화창 클론 코딩을 해보았다.

볼 때는 쉬워보였는데 생각보다 쉽지 않았고

새로운 기능을 접하거나 배울 때마다 정말 나는 우물 안 개구리인걸 항상 느낀다.

그리고 오토레이아웃의 위대함(?)도 다시 한번 느낄 수 있었다.ㅋㅅㅋ