[iOS] TTGTagCollectionView에 대해서 알아보자.

✅ 이번 시간에는 TTGTagCollectionView에 대해서 알아보자.

 

헤더뷰에 붙여서 사용하는 코드로 사용했었는데, 기능은 다양하니까 살펴보면 좋을듯!

근데 얘는 pod init으로 만들어야지 SPM 사용시 복잡하다고 함. 

 

 

https://github.com/zekunyan/TTGTagCollectionView

GitHub - zekunyan/TTGTagCollectionView: Useful for showing text or custom view tags in a vertical or horizontal scrollable view

 

 

나는 이렇게 만들었다.

내가 만든 태그 UI

 

코드는 생각보다 간편한데, 아래를 보자.

 

✅ 헤더뷰를 만드는 코드

//
//  NewsListTableViewHeaderView.swift
//  KeywordNews
//
//  Created by Hamlit Jason on 2022/02/05.
//

import UIKit

import SnapKit
import TTGTags

protocol NewsListTableViewHeaderViewDelegate: AnyObject {
    func didSelectTag(_ selectedIndex: Int)
}

final class NewsListTableViewHeaderView: UITableViewHeaderFooterView {
    static let identifier = "NewsListTableViewHeaderView"

    private lazy var tagCollectionView = TTGTextTagCollectionView()
    
    private weak var delegate: NewsListTableViewHeaderViewDelegate?
    
    private var tags: [String] = []

    
    func setup(
        tags: [String],
        delegate: NewsListTableViewHeaderViewDelegate
    ) {
        self.tags = tags
        self.delegate = delegate
        
        contentView.backgroundColor = .systemBackground
        
        setupTagCollectionViewLayout()
        setupTagCollectionView()
    }
}


extension NewsListTableViewHeaderView: TTGTextTagCollectionViewDelegate {
    func textTagCollectionView(_ textTagCollectionView: TTGTextTagCollectionView!, didTap tag: TTGTextTag!, at index: UInt) {
        print("textTagCollectionView \(tag)")
        guard tag.selected else { return } // 태그가 셀렉 되었을 때만 불려지게끔 필터링 해주기 -> 태그가 셀렉되지 않은 상태로 조건이 변경될 때도 불려지기 때문에
        
        delegate?.didSelectTag(Int(index))
    }
    
    func textTagCollectionView(_ textTagCollectionView: TTGTextTagCollectionView!, canTap tag: TTGTextTag!, at index: UInt) -> Bool {
        print("canTap")
        
        return true
    }
    
}

private extension NewsListTableViewHeaderView {
    func setupTagCollectionViewLayout() {
        addSubview(tagCollectionView)
        
        tagCollectionView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }
    
    func setupTagCollectionView() {
        tagCollectionView.delegate = self
        tagCollectionView.numberOfLines = 1
        tagCollectionView.scrollDirection = .horizontal
        tagCollectionView.showsVerticalScrollIndicator = false
        tagCollectionView.selectionLimit = 1
        
        let insetValue: CGFloat = 16.0
        tagCollectionView.contentInset = UIEdgeInsets(
            top: insetValue,
            left: insetValue,
            bottom: insetValue,
            right: insetValue
        )
        
        let cornerRadiusValue: CGFloat = 12.0
        let shadowOpacity: CGFloat = 0.0
        let extraSpace = CGSize(width: 20.0, height: 12.0)
        let color = UIColor.systemOrange
        
        let style = TTGTextTagStyle()
        style.backgroundColor = color
        style.cornerRadius = cornerRadiusValue
        style.borderWidth = 0.0
        style.shadowOpacity = shadowOpacity
        style.extraSpace = extraSpace

        let selectedStyle = TTGTextTagStyle()
        selectedStyle.backgroundColor = .white
        selectedStyle.cornerRadius = cornerRadiusValue
        selectedStyle.shadowOpacity = shadowOpacity
        selectedStyle.extraSpace = extraSpace
        selectedStyle.borderColor = color
        
        tags.forEach { tag in
            let font = UIFont.systemFont(ofSize: 14.0, weight: .semibold)
            let tagContents = TTGTextTagStringContent(
                text: tag,
                textFont: font,
                textColor: .white
            )
            let selectedTagContents = TTGTextTagStringContent(
                text: tag,
                textFont: font,
                textColor: color
            )

            let tag = TTGTextTag(
                content: tagContents,
                style: style,
                selectedContent: selectedTagContents,
                selectedStyle: selectedStyle
            )

            tagCollectionView.addTag(tag)
        }
    }
}

 

그리고 위에서 헤더뷰를 구성했으면 헤더에 넣어주어야 겠지?

 

나는 테이블 뷰의 헤더에 넣었음으로

        // 헤더등록 코드가 조금 다르다.
        tableView.register(
            NewsListTableViewHeaderView.self,
            forHeaderFooterViewReuseIdentifier: NewsListTableViewHeaderView.identifier
        )

우선 id를 등록해주고

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let header = tableView.dequeueReusableHeaderFooterView(
            withIdentifier: NewsListTableViewHeaderView.identifier
        ) as? NewsListTableViewHeaderView
            
        header?.setup(tags: tags, delegate: self)
        
        return header
    }

가장 기본적으로 이렇게 세팅하면 사용할 수 있다.

 

자세한 옵션들에 대한 설명은 깃허브에 가서 보고, 사실 코드만 봐도 직관적으로 이해 가능하니까 참고할 것!