Swift Tag 모양 UI 만들기 (with UICollectionView 활용)

안녕하세요. 

오늘은 조금 가벼운(?) 이야기를 정리해볼까합니다. 

(요즘 문서 정리만 하다보니 개발이 그리워지네요)

 

오늘 만들 거는 바로 아래 처럼 생긴 UI 입니다.

예시가 이상하지만 아무튼 이거 만들꺼에요

 

참고로 여러가지 방법이 있습니다만 

만약 Cocapod 을 사용하시는 분들은 아래 링크를 통해 쉽게 만드시는 방법도 있습니다. 

https://github.com/ElaWorkshop/TagListView

GitHub - ElaWorkshop/TagListView: Simple and highly customizable iOS tag list view, in Swift.

위 방법도 물론 편하긴 하지만 

하지만 저는 스토리보드에다가 만들어서 사용해 보겠습니다. 

(Cocoapod 이 다 좋은데 가끔 Xcode 와 싸움(?)나더라고요)

 

일단 우리들의 영원한 동반자인 스토리보드에서 기본 틀 부터 만듭시다

오늘 사용될 스토리보드입니다

 

저 하단의 버튼의 용도(?)는 나중에 알려드릴께요.

그리고 셀 안에 저희가 원하는 모양이 나오도록 라벨을 추가해 줍시다.

(저는 여기서 기본 Constraints 로 5 정도의 여유를 두고 만들었습니다.)

저는 이렇게 넣었습니다.

저는 이 셀 이름을 TagCollectCell 이라고 하겠습니다. 

마찬가지로 이름을 바꿔주세요

클래스를 만들어 주어야 사용이 가능하겠죠? (셀 안에 만들었던 라벨이랑 연결 해주셔야합니다!)

 

TagCollectCell

import Foundation
import UIKit
class TagCollectCell: UICollectionViewCell {
    // Component
    @IBOutlet weak var tagLbl: UILabel! // 라벨이랑 연결해 주세요
    // ColotSet
    let onColor = UIColor(red: 0.36, green: 0.25, blue: 0.61, alpha: 1.0)
    let offColor = UIColor(red: 0.90, green: 0.94, blue: 1.0, alpha: 1.0)
    //Func
    func setCell(text: String, isOn: Bool){
        self.layer.cornerRadius = 5
        self.tagLbl.text = text
        self.tagLbl.textColor = isOn ? UIColor.white : UIColor.black
        self.backgroundColor = isOn ? onColor : offColor
    }
}

이렇게 만들어 두고 ViewController 로 넘어갑시다. 

 

기본적인 UICollectionView 작업을 먼저 해주도록 합시다 

(저는 선택하면 색상을 바뀌게 하고 싶어서 [Bool]을 넣었습니다만 불필요시 빼주시면 됩니다.)

 

ViewController

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
   

    // Tag 를 보여줄 뷰
    @IBOutlet weak var tagCollectionTotalView: UICollectionView!

    // 먹고싶다(?)
    let tagList = ["쿠앤크","메로나","아몬드 빼빼로","콘칩","나쵸","꼬깔콘","빙그레 바나나","액셀런트","더위사냥","꿀꽈배기","버터와플","새우칩","스프링클","하리보","새콤달콤","푸딩","에이스","홈런볼","바밤바","허쉬","ABC 초콜릿"]
    
    var tagOnOffArray : [Bool] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.setBasicTag()
    }
	// Delegate 선언 및 선택 배열 자동 생성
    func setBasicTag(){
        self.tagCollectionTotalView.delegate = self
        self.tagCollectionTotalView.dataSource = self
        self.createBtnArray() // 선택한 셀을 확인하기 위해 제작 
    }
    // Tag 갯수 만큼 제작
    func createBtnArray(){
        for _ in 0..<self.tagList.count{
            self.tagOnOffArray.append(false)
        }
    }
    
    // MARK: 콜렉션 뷰 데이터
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.tagList.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TagCollectCell", for: indexPath) as! TagCollectCell
        cell.setCell(text: self.tagList[indexPath.item], isOn: self.tagOnOffArray[indexPath.item])
        return cell
    }
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        self.tagOnOffArray[indexPath.item] = !self.tagOnOffArray[indexPath.item]
        collectionView.reloadItems(at: [indexPath]) // 해당 셀만 변경
    }
        
    //MARK: 결과값 출력
    @IBAction func clickSubmit(_ sender: Any) {
        let alert = UIAlertController(title: "먹고싶어요!", message: self.getClickList(), preferredStyle: .alert)
        alert.addAction(UIAlertAction.init(title: "확인", style: .cancel))
        self.present(alert, animated: true)
    }
    func getClickList()->String{
        var result : String = ""
        for i in 0..<self.tagList.count{
            if(self.tagOnOffArray[i]){
                result += (" " + self.tagList[i])
            }
        }
        return result
    }
    
    
}

 사실 여기까지만 해도 아래처럼 보이게 됩니다. 

기본 CollectionView 을 사용해 만들었습니다. 

근데 이게 지금 리스트가 짧은게 여러개라 티가 잘안나지만 

리스트에 따라서는 조금 이상하게 보일 수 도 있습니다.

 

예를 들면 아래처럼요 

뭔가 어색하죠?

기본적으로 UICollectionView는 중앙 정렬이 기본이라 이렇게 보이게 됩니다. 

하지만 저렇게 되어있으면 묘하게 신경쓰이게 되니 

왼쪽 정렬로 바꿔주도록 합시다. 

 

방법은 아래 링크를 참고해서 제작했습니다. 

https://stackoverflow.com/questions/22539979/left-align-cells-in-uicollectionview

Left Align Cells in UICollectionView

 

LeftAlignedCollectionViewFlowLayout

import Foundation
import UIKit
// from : https://stackoverflow.com/questions/22539979/left-align-cells-in-uicollectionview
class LeftAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)

        var leftMargin = sectionInset.left
        var maxY: CGFloat = -1.0
        attributes?.forEach { layoutAttribute in
            if layoutAttribute.frame.origin.y >= maxY {
                leftMargin = sectionInset.left
            }

            layoutAttribute.frame.origin.x = leftMargin

            leftMargin += layoutAttribute.frame.width + minimumInteritemSpacing
            maxY = max(layoutAttribute.frame.maxY , maxY)
        }
        // 아래 줄을 추가안하시면 네모네모(?)하고 이상한 Cell을 목격할수있습니다.
        self.estimatedItemSize = UICollectionViewFlowLayout.automaticSize // 해당 줄만 추가했습니다.
        return attributes
    }
}

위 클래스를 추가해주신 후 아래처럼 사용중인 UICollectionView에 추가해주시면 됩니다. 

 func setBasicTag(){
    self.tagCollectionTotalView.delegate = self
    self.tagCollectionTotalView.dataSource = self
    // 아래 한줄 추가
    self.tagCollectionTotalView.collectionViewLayout = LeftAlignedCollectionViewFlowLayout()
    self.createBtnArray()
}

그러면 아래처럼 왼쪽으로 정렬된 Cell들을 확인할 수 있습니다.

짜잔

오늘은 비교적 가벼운 내용으로 정리해봤는데 

처음 하신 분들에게 도움이 되었으면 좋겠네요

 

그럼 오늘도 파이팅입니다.