번역기 앱 - 4. 기록화면의 cell 구현

안녕하세요. Skillist입니다

 

아침에 눈 뜨고 창밖을 바라보니, 눈이 소복이 쌓여있네요.

오늘도 활기차게 시작해봅니다.

 

이번에 구현해볼 cell입니다.

왼쪽은 다크모드 + 영어

오른쪽은 라이트모드 + 한글 입니다.

라이트 모드를 고려하여 배경색상도 구성하였고,

다국어도 고려했습니다.

 

참고로, cell에대한 RxSwift 바인딩을 적용하고 싶었는데, viewModel을 사용하지 않았습니다.

좀 더 공부하여 추후에 적용해볼게요.

 

———————————————————————————————————————————————————

 

11라인 : cell의 ientify를 cell이 가지도록 했습니다. 덕분에, 오타로 인한 에러에 대해 안정적입니다.

12라인 : cell은 history 정보를 가지고 있습니다.

14라인 : view입니다. ui컴포넌트들을 view 안에 추가할거에요. 다크모드 대응을 위해 systemBackground로 설정합니다.

22라인 : 번역할(source) 언어에 대한 label입니다.

31라인 : copy버튼 입니다. addTarget으로, 터치 이벤트를 추가했어요.

39라인 : 저장(보관) 버튼입니다. 역시 addTarget을 사용했어요.

47라인 : 번역할(source) Text에 대한 Label입니다.

 

55라인 : source와 target을 구분짓는 미세한 라인입니다.

61라인 : 번역된(target) 언어에 대한 라벨입니다

70라인 : 변역된(target) text 라벨입니다.

78라인 : 이니셜라이저에서, cell 기본 설정과 레이아웃을 구성합니다.

 

레이아웃은 스냅킷으로 구성합니다.

 

95라인 : contentView에 기본이 될 view를 추가합니다.

101라인 : 기본view에 추가합니다.

124~134라인 : 스냅킷으로 제약사항을 구성합니다.

 

136~153라인 : 스냅킷으로 제약사항을 구성합니다. 스냅킷으로 레이아웃 구성하기가 익숙해지고, 너무 편해졌어요.

156라인 : 데이터를 설정합니다.

 

addTarget에 사용되는 func을 private extension으로 빼서 구현해봤어요. 코드를 분리하여 더 깔끔해지고 가독성도 늘어났습니다.

 

———————————————————————————————————————————————————

 

이번엔 익숙한 cell 구현이라, 쉬웠죠?

 

다음엔 보관함VC를 구현해보겠습니다. 고생하셨어요

 

잘못되거나 부족한 내용 등, 피드백 감사합니다!

 

https://github.com/DeveloperSkillist/TranstorKing

GitHub - DeveloperSkillist/TranstorKing

 

 

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓  전체 코드  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

import UIKit

class HistoryTableViewCell: UITableViewCell {
    static let identify = "HistoryTableViewCell"    //오타 방지를 위한, cell identify 상수
    var history: HistoryModel?
    
    private var uiView: UIView = {
        let uiView = UIView()
        uiView.backgroundColor = .systemBackground
        uiView.layer.cornerRadius = 10
        uiView.clipsToBounds = true
        return uiView
    }()
    
    private var sourceLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 17, weight: .bold)
        label.textColor = .systemGray
        label.text = Language.ko.title
        label.numberOfLines = 1
        return label
    }()
    
    private lazy var copyButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(systemName: "doc.on.doc"), for: .normal)
        button.tintColor = .systemGray
        button.addTarget(self, action: #selector(copyBookmark), for: .touchUpInside)
        return button
    }()
    
    private lazy var bookmarkButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(systemName: "square.and.arrow.down"), for: .normal)
        button.tintColor = .systemGray
        button.addTarget(self, action: #selector(saveBookmark), for: .touchUpInside)
        return button
    }()
    
    private lazy var sourceTextLabel: UILabel = {
        let label = UILabel()
        label.backgroundColor = .systemBackground
        label.font = .systemFont(ofSize: 20)
        label.numberOfLines = 0
        return label
    }()
    
    private lazy var lineView: UIView = {
        var view = UIView()
        view.backgroundColor = .secondarySystemBackground
        return view
    }()
    
    private lazy var targetLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 17, weight: .bold)
        label.textColor = .systemGray
        label.text = Language.en.title
        label.numberOfLines = 1
        return label
    }()
    
    private lazy var translatedTextLabel: UILabel = {
        let label = UILabel()
        label.backgroundColor = .systemBackground
        label.font = .systemFont(ofSize: 20)
        label.numberOfLines = 0
        return label
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        attribute()
        layout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func attribute() {
        self.backgroundColor = .secondarySystemBackground
    }
    
    private func layout() {
        
        contentView.addSubview(uiView)
        uiView.snp.makeConstraints {
            $0.top.bottom.equalToSuperview().inset(8)
            $0.leading.trailing.equalToSuperview().inset(16)
        }
        
        [
            sourceLabel,
            copyButton,
            bookmarkButton,
            sourceTextLabel,
            lineView,
            targetLabel,
            translatedTextLabel
        ].forEach {
            uiView.addSubview($0)
        }
        
        sourceLabel.snp.makeConstraints {
            $0.top.leading.equalToSuperview().inset(16)
            $0.trailing.equalTo(copyButton.snp.leading).offset(-16)
        }
        
        bookmarkButton.snp.makeConstraints {
            $0.top.bottom.equalTo(sourceLabel)
            $0.trailing.equalToSuperview().inset(16)
            $0.width.height.equalTo(sourceLabel.snp.height)
        }
        
        copyButton.snp.makeConstraints {
            $0.top.bottom.equalTo(sourceLabel)
            $0.trailing.equalTo(bookmarkButton.snp.leading).offset(-8)
            $0.width.height.equalTo(sourceLabel.snp.height)
        }
        
        sourceTextLabel.snp.makeConstraints {
            $0.top.equalTo(sourceLabel.snp.bottom).offset(8)
            $0.leading.equalTo(sourceLabel)
            $0.trailing.equalTo(bookmarkButton)
        }
        
        lineView.snp.makeConstraints {
            $0.top.equalTo(sourceTextLabel.snp.bottom).offset(16)
            $0.leading.trailing.equalToSuperview()
            $0.height.equalTo(1)
        }
        
        targetLabel.snp.makeConstraints {
            $0.top.equalTo(lineView.snp.bottom).offset(16)
            $0.leading.equalTo(sourceLabel)
            $0.trailing.equalTo(bookmarkButton)
        }
        
        translatedTextLabel.snp.makeConstraints {
            $0.top.equalTo(targetLabel.snp.bottom).offset(8)
            $0.leading.equalTo(sourceLabel)
            $0.trailing.equalTo(bookmarkButton)
            $0.bottom.equalToSuperview().inset(16)
        }
    }
    
    func setup(historyModel: HistoryModel) {
        history = historyModel
        sourceLabel.text = historyModel.sourceLanguage.title
        sourceTextLabel.text = historyModel.sourceText
        targetLabel.text = historyModel.targetLanguage.title
        translatedTextLabel.text = historyModel.targetText
    }
}

private extension HistoryTableViewCell {
    @objc func copyBookmark() {
        guard let history = history else {
            return
        }
        
        UIPasteboard.general.string = history.targetText
    }
    
    @objc func saveBookmark() {
        guard let history = history else {
            return
        }
        
        UserDefaults.standard.addBookmark(historyModel: history)
    }
}