[PPPClub] Text 길이만큼 Label Size 동적할당

 

 

 

PPPClub 기능 구현 

in SOPT iOS

 

 

 

 

 

위에 보이는 사진처럼 Label 안에 text  가 들어가야 하는데, 글씨의 크기만큼 label 의 사이즈가 동적할당되어야 한다. 

 

 

 

- sizetoFit() 함수와 intrinsicContentSize 을 사용하여 구현

class ChangeLabelSizeViewController: UIViewController {

    private var namelabel : UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 15)
        label.textColor = .white
        label.backgroundColor = .darkGray
        label.textAlignment = .center
        label.text = "난 핸들이 고장 난 8톤 트럭"
        
        label.sizeToFit()
        
        return label
    }()
    
    private var namelabel2 : UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 15)
        label.textColor = .white
        label.backgroundColor = .darkGray
        label.textAlignment = .center
        label.text = "세상이란 학교에 입학 전 나는 꿈이라는 보물 찾아 유랑하는 해적선"
        
        label.frame.size = label.intrinsicContentSize
        
        return label
    }()
    
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .white
        view.addSubview(namelabel)
        view.addSubview(namelabel2)
        setLayout()

        // Do any additional setup after loading the view.
    }
    
    private func setLayout() {
        namelabel.snp.makeConstraints {
            $0.center.equalToSuperview()
        }
        namelabel2.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalTo(namelabel.snp.bottom).offset(50)
        }
    }
}

 

 

=> 결과

 

 

귀엽다. 근데 촌스럽다 예쁘게 바꿔보까 ,,, ? 저 상태로는 패딩을 주기 어려울 것 같아서 뒤에 view 를 하나 덧대어주기로 하자!

참고했던 블로그에서 힌트를 준 것처럼 stackView 를 사용하여 empty label 을 양 옆으로 덧대어 사용하였다.

 

 

 

- Label Class

class LabelView: UIView {
    
    let stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.alignment = .center
        stackView.distribution = .fill
        stackView.layer.cornerRadius = 20
        stackView.layer.backgroundColor = UIColor(hex: 0xE4E4E4).cgColor
        
        return stackView
    }()
    
    let label: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 18)
        label.textColor = .black
        label.textAlignment = .center
        label.frame.size = label.intrinsicContentSize
        
        return label
    }()
    
    let emptylabel1: UILabel = {
        let label = UILabel()
        
        return label
    }()
    
    let emptylabel2: UILabel = {
        let label = UILabel()
        
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        // 레이블 추가
        addSubview(stackView)
        clipsToBounds = true
        setLayout()
        
        stackView.addArrangedSubview(emptylabel1)
        stackView.addArrangedSubview(label)
        stackView.addArrangedSubview(emptylabel2)
    }
    
    required init(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setLayout() {
        
        stackView.snp.makeConstraints {
            $0.top.bottom.trailing.leading.equalToSuperview()
        }
        emptylabel1.snp.makeConstraints {
            $0.width.equalTo(18)
            $0.height.equalTo(10)
        }
        emptylabel2.snp.makeConstraints {
            $0.width.equalTo(18)
            $0.height.equalTo(10)
        }

    }
}

 

- VC

class ChangeLabelSizeViewController: UIViewController {

    let nameView: UIView = {
        let view = LabelView()
        view.label.text = "#독립서점"
        
        return view
    }()
    
    let nameView2 : UIView = {
        let view = LabelView()
        view.label.text = "#취향을 저격하는 나만의 서점"
        
        return view
    }()
    
    private var TappedButton : UIButton = {
        let button = UIButton()
        button.setTitle("Tap", for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 30)
        button.setTitleColor(.brown, for: .normal)
        button.backgroundColor = .white
        button.layer.cornerRadius = 3
        button.addTarget(self, action: #selector(TappedButtonTapped), for: .touchUpInside)
        
        return button
    }()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .white
        view.addSubview(nameView)
        view.addSubview(nameView2)
        view.addSubview(TappedButton)
        setLayout()
        
        nameView.isHidden = false
        nameView2.isHidden = true

        // Do any additional setup after loading the view.
    }
    
    private func setLayout() {
        nameView.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.height.equalTo(41)
        }
        nameView2.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.height.equalTo(41)
        }
        TappedButton.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalTo(nameView.snp.top).offset(-100)
        }
    }
    
    @objc func TappedButtonTapped() {
        nameView.isHidden.toggle()
        nameView2.isHidden.toggle()
    }
}

 

 

 

 

고냥 전체코드 다 넣었다. 

결과물은 

 

 

아주 잘나온다,, 우선은 이정도만 해두자