[iOS/Swift] UILabel에 Padding 값 주기, Label 동적으로 text 크기에 맞게 늘어나게 하기 - 코드베이스, Snapkit, then

나의 미션 

1. 동그랗게 만들어야함

2. padding 값으로 글씨 leading, trailing에 4의 여백을 줘야함

3. top, bottom 도 2 정도의 여백

 

안의 글씨가 늘어날때마다, 글씨가 늘어날 수 있도록!

 

Label에 Padding 값을 줄 수는 없다!!

커스텀 해서 만들어야해용!

 

 

BasePaddingLabel.swift 파일을 생성해준다.

import UIKit

class BasePaddingLabel: UILabel {
    
    private var padding = UIEdgeInsets(top: 2.0, left: 4.0, bottom: 2.0, right: 4.0)
    
    convenience init(padding: UIEdgeInsets) {
        self.init()
        self.padding = padding
    }
    
    override func drawText(in rect: CGRect) {
        super.drawText(in: rect.inset(by: padding))
    }
    
    //안의 내재되어있는 콘텐트의 사이즈에 따라 height와 width에 padding값을 더해줌
    override var intrinsicContentSize: CGSize {
        var contentSize = super.intrinsicContentSize
        contentSize.height += padding.top + padding.bottom
        contentSize.width += padding.left + padding.right
        
        return contentSize
    }
}

 

BasePaddingLabel을 상속받은 Label을 생성해준다.

 

    private let ifSuccessLabel = BasePaddingLabel(padding: UIEdgeInsets(top: 2, left: 4, bottom: 2, right: 4)).then {
        $0.backgroundColor = .lightGray
        $0.font = .systemFont(ofSize: 10, weight: .semibold)
        $0.textColor = .white
        $0.clipsToBounds = true // 요소가 삐져나가지 않도록 하는 속성
        $0.layer.cornerRadius = 8 // 둥글게 만드는 정도
        $0.textAlignment = .center
    }

 

1. LabelContainerView안에 Label을 집어넣기

// MARK: Properties
    
private let ifSuccessLabelContainerView = UIView().then {
    $0.makeRounded(cornerRadius: 8.adjusted)
    $0.backgroundColor = .grey_5
    $0.clipsToBounds = true
}
    
private let ifSuccessLabel = UILabel().then {
    $0.setLabel(text: "gggg", color: .white, size: 10, weight: .semiBold)
    $0.textAlignment = .center
}

만들어놓은 UIView에 UILabel을 집어넣어줍니다 ~ ..

/// UIView 안에 UILabel 넣기
ifSuccessLabelContainerView.addSubview(ifSuccessLabel)

/// 간격 조정
ifSuccessLabelContainerView.snp.makeConstraints {
            $0.centerY.equalTo(privateImageView)
            $0.leading.equalTo(goalTitleLabel.snp.trailing).offset(6)
}
ifSuccessLabel.snp.makeConstraints {
            $0.centerX.equalTo(ifSuccessLabelContainerView)
            $0.centerY.equalTo(ifSuccessLabelContainerView)
            $0.leading.trailing.equalTo(ifSuccessLabelContainerView).inset(4)
            $0.top.bottom.equalTo(ifSuccessLabelContainerView).inset(2)
}

둘다 라벨에 따라서 겉의 테두리가 늘어나게 됩니다 ~