[Swift/iOS] tagView, ChipView를 만들어보자!

너어어어어무 너무 오랜만입니다.

회사일이 바쁘기도했고

도움이 되는 글을 쓰자니 주제선정만 잔뜩 해두고

도무지 공부할 시간이 안나서

오랜만에 포스팅합니다..!

기다려주신분이 있을지는 모르겠지만.... 그래도.. 반성합니다..😂

 

시작할게요!!

 

사이드 프로젝트하면서 요런걸 만들게 됐는데요..!

하고나니까 넘나리 간단한데 처음에 시작할 때만 해도 어떻게 접근하는게 좋을지 고민이 많이 됐었어서

기록하고 가려고합니다!

 

 

일단 얘는 tagView, chipView 라고 부르고 구현하는데는 여러가지 방법이 있습니다!

 

ScrollView를 사용해서 전체적으로 뷰를 세팅하고

tag 배열을 돌면서 뷰를 생성하고 방식으로 해도 되지만,

 

이걸 다 자동으로 해주는 CollectionView 라는 녀석이 있으니까 이 녀석을 사용해서 구현하려고 합니다!

 

** 저는 flexLayout 과 PinLayout을 사용해서 레이아웃을 구성했습니다! 레이아웃은 편하신 방식을 선택하시죠!

 

 

먼저 각 테그를 나타내는 Cell이 있어야겠죠!!!

 

Cell

import UIKit
import PinLayout

final class TagCell: UICollectionViewCell {
    
    public var tagLabel = UILable().then {
    	// Label 속성
        ...
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()

        contentView.pin.all()
        cellLayout()
    }
    
    private func configure() {
        
        contentView.do {
            $0.layer.cornerRadius = 14
            $0.backgroundColor = UIColor.gray10
        }
    }

    func cellLayout() {
        contentView.addSubview(tagLabel)
        tagLabel.pin.all()
    }
    
}

1. UICollectionViewCell 에 들어갈 Label 을 생성해주고 contentView의 사이즈에 맞게 넣어줍니다.

2. 셀의 cornerRadius 속성과 백그라운드 칼라를 넣어줍니다.

CollectionView

import UIKit
import FlexLayout
import PinLayout
import Then

public class TagViewController: UIViewController {
    
    public let tags = ["#비즈니스 캐주얼", "#캐주얼", "#시크", "#걸리시", "#레트로","#로맨틱", "#스트릿"]
    
    lazy var tagCollectionFlowLayout = UICollectionViewFlowLayout().then {
        $0.scrollDirection = .horizontal
        $0.minimumLineSpacing = 12
    }

    public lazy var tagCollectionView = UICollectionView(frame: .zero, collectionViewLayout: tagCollectionFlowLayout).then {
        $0.showsHorizontalScrollIndicator = false
        $0.showsVerticalScrollIndicator = false
        $0.register(TagCell.self, forCellWithReuseIdentifier: TagCell.identifier)
        $0.dataSource = self
        // UILabel의 dynamic Width 생성을 위해서 delegate 처리 해주기
        $0.delegate = self
    }
    
    public override init(frame: CGRect) {
        super.init(frame: frame)
        layout()
    }
    public override func layoutSubviews() {
        super.layoutSubviews()
        self.flex.layout()
    }
    
    func layout() {
        self.flex.addItem(tagCollectionView).width(100%).height(40).direction(.row)
    }
}

1. 저는 Then 을 사용해서 미리 속성을 지정했기 때문에 flowLayout 과 collectionView 를 lazy로 생성해줬습니다.

2. layout 도 간단하게 collectionView만 넣어줬습니다.

 

Extension

extension TagViewController: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
   ...
    public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        let label = UILabel().then {
            $0.font = UIFont.body_5_B
            $0.text = tags[indexPath.item]
            $0.sizeToFit()
        }
        
        let size = label.frame.size
        return CGSize(width: size.width + 28, height: size.height + 12)
    }
}

1. 기본적인 extension 은 다 아실거라고 생각해서 생략하고.. dynamicWidth 에 대한 코드만 적었습니다

간단히 설명하자면,

 

- 사용하지 않는 Label을 하나 생성합니다.
- 각 item 에 들어갈 라벨의 내용을 넣고 sizeToFit 메서드를 사용해서 텍스트의 크기만큼 Label의 크기를 조절해 줍니다.
- 해당 Label의 size를 가져와서 collectionViewItem의 진짜 사이즈에 넣어줍니다.
- 패딩을 위해 + 값들을 넣어줬습니다.

 

여기까지 TagView를 만드는 방법을 알아봤습니다!

 

[ 참고 링크 ]

[Swift] 태그 리스트 만들기 (UICollectionView)

- GPT형님..