[UIKit] label크기를 계산해서 CollectionView cell 크기에 넣어주기

🟣 하고자 하는 것

지금 해당 뷰에 있는 카테고리 버튼은 collectionView로 구현중이다. 일단 내부 cell에 임시 값을 넣어서 이렇게 만들어줬다.

그냥 글자 크기에 상관 없이 일정한 버튼 크기를 갖는다. 하지만 내가 구현해야하는 화면은 아래처럼 글자 크기에 맞춰서 버튼의 크기도 바뀌는 것,, 이렇게 하고싶다.

 

🟣 Cell의 크기를 상수값으로 만들면 안돼!

💡 cell 내부에 들어가는 label의 크기를 계산해서 cell의 크기로 지정해주자.

요모조모 프로젝트를 진행할때 button을 만들때 이런 방식을 사용했었다. 이 부분이 생각나서 바로 실행에 옮겨봤다.

label의 크기를 구하는 코드

아무래도 버튼 등 다양한 방면에서 사이즈를 구하는 코드를 사용할 것 같아서, size를 구하는 매니저를 만들어주고 그 내부에 함수로 구현해주었다.

enum Frame {
	case widthAnchor, heightAnchor
}

struct CalculateSizeManager {
    func calculateCategoryButton(_ anchor: Frame, with buttonTitle: String) -> CGFloat {
        let label = UILabel()
        label.text = buttonTitle
        label.sizeToFit()

        switch anchor {
        case .widthAnchor:
            return label.frame.width + 24
        case .heightAnchor:
            return label.frame.height + 10
        }
    }
}

cell 내부에 text를 변경해줄때 width를 같이 변경

cell 내부에 들어가는 카테고리 글자 크기를 알아야 크기 지정을 할 수 있어서 setData라는 함수로 카테고리를 넣어주는 함수 내부에 계산하고, width를 계산해주었다.

func setData(with category: String) {
    categoryLabel.text = category
    categoryLabel.constraint(.widthAnchor,
                             constant: CalculateSizeManager().calculateCategoryButton(.widthAnchor, with: category))
    categoryLabel.constraint(.heightAnchor,
                             constant: CalculateSizeManager().calculateCategoryButton(.heightAnchor, with:category))
}

🚨 아니 근데 width만 지정했을때는 잘 나오는데, height까지 적용하면, 이렇게 화면이 깨져나오고, 콘솔창이 단단히 화가나는 것이다.

이렇게,,, 맨 앞에 5만큼의 cell 사이 간격이 생기고, height가 뭔가 잘려나오는 현상이 발생한다. 무슨일이냐아아아아도대체가!

✅ 와 해결할거같은 느낌쓰

콘솔창을 보니 화내고 있는 것중에 하나가 이거였다.

🚫 the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.

아! 높이가 문제구나!!

왜냐면!!! 내가 UICollectionView의 height를 26으로 고정해놨기 때문이지~~~ >,<🫠⭐️

private func setupLayout() {
    view.addSubviews(descriptionLabel, categoryCollectionView)
    NSLayoutConstraint.activate([
        descriptionLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 8),
        descriptionLabel.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 16),

        categoryCollectionView.topAnchor.constraint(equalTo: descriptionLabel.bottomAnchor, constant: 16),
        categoryCollectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
        categoryCollectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16)
        categoryCollectionView.heightAnchor.constraint(equalToConstant: 26)
    ])
}

짜잔, 이렇게 레이아웃이 잡혀있었다. 여기서 보면, 맨 마지막에 height를 26고정값으로 설정해두었는데, 이것 때문인것 같다. 수정해보자

여기서 잠깐, 근데

cell의 크기에 따라서 collectionView의 height를 지정할 수는 없는걸까? 오토레이아웃에서 먼저 height를 지정해야한다고 나오는데… (오토레이아웃으로 height설정안해주면 모호하다고 보라색에러뜸)

자동으로 못하는건가ㅠㅠ

일단 야매의 방법으로,, calculate된 값을 collectionView의 height에 넣어주었다.

categoryCollectionView.heightAnchor.constraint(equalToConstant: CalculateSizeManager().calculateCategoryButton(.heightAnchor, with: "temp"))

내가 구성해놓은 CalculateCategoryButton 함수 내부에서는 with에 들어오는 텍스트의 크기에 따라서 높이를 정해주었다. 저기다가 “temp” 넣어서 사이즈 주는거 너무 이상한데,, 싶었다.

✅ 아니 그럼 text 값을 입력안해도 되도록 매개변수를 옵셔널로 수정해보자

지금 내가 구현해놓은 코드르 보면, manager에서는 textStyle을 고려하지 않는다. 만약 매개변수로 textStyle까지 입력받아서, 그 폰트의 크기 높이를 기준으로 길이를 정해주면?? 이거다!!

struct CalculateSizeManager {
    func calculateCategoryButton(_ anchor: Frame, with buttonTitle: String?) -> CGFloat {
        let label = UILabel()
        label.text = buttonTitle ?? "temp"
        label.sizeToFit()
        switch anchor {
        case .widthAnchor:
            return label.frame.width + 24
        case .heightAnchor:
            return label.frame.height + 8
        }
    }
}

이렇게 입력받는 buttonTitle은 옵셔널값으로 처리해줘서, 오토레이아웃을 설정해줄때 굳이 ‘text’값이 없어도 되게끔 만들어주었다.

그럼, collectionView의 오토레이아웃은 아래처럼 바꿀 수 있다.

categoryCollectionView.topAnchor.constraint(equalTo: descriptionLabel.bottomAnchor, constant: 16),
categoryCollectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
categoryCollectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
categoryCollectionView.heightAnchor.constraint(equalToConstant: CalculateSizeManager().calculateCategoryButton(.heightAnchor, with: nil))

 

성 공..🫶