Label和string

【iOS】UILabel自适应宽高标签(swift)

2021-12-12  本文已影响0人  Qire_er

写在前面的:

在实际项目开发中,我们经常需要制作一些类似按钮的,带圆角边框的标签!

参考效果:

参考效果图

它们不需要响应用户交互,但是【需要根据字数】来【自适应调整】自身的尺寸!……

这里将我自己的经验写下来,供需要的人参考!

实现思路:

  1. 自定义一个继承自UILabel的子类
  2. 重写textRect(forBounds:limitedToNumberOfLines:)方法
  3. 重写drawText(in:)方法

最终效果:

最终效果图

完整代码:

UILabel的子类的定义

//
//  BtnStyleLabel.swift
//  UIKit-basic
//
//  Created by Qire_er on 2021/12/12.
//

import UIKit

class BtnStyleLabel: UILabel {

    private var edgeInsets: UIEdgeInsets!
    
    // 从【代码】生成才会调用
    init(padding: CGFloat) {
        super.init(frame: .zero) // frame 随便给一个
        
        self.edgeInsets = UIEdgeInsets(
            top: padding * 0.5,
            left: padding,
            bottom: padding * 0.5,
            right: padding
        )   // 设置edgeInsets四个方向的参数,具体可根据自己的需求调整
        
        self.layer.cornerRadius = (self.font.pointSize + padding) * 0.45 // 设置圆角边框
        self.layer.borderColor = UIColor.systemGray5.cgColor // 设置边框颜色
        self.layer.borderWidth = 1 // 设置边框粗细
    }
    
    // 从【storyboard】生成才会调用
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    // 重写textRect方法
    override func textRect(forBounds bounds: CGRect, limitedToNumberOfLines numberOfLines: Int) -> CGRect {
        var rect: CGRect = super.textRect(
            forBounds: bounds.inset(by: edgeInsets),
            limitedToNumberOfLines: numberOfLines
        )   // 根据edgeInsets,修改绘制文字的bounds
        
        rect.origin.x -= edgeInsets.left // 调整origin的X坐标
        rect.origin.y -= edgeInsets.top // 调整origin的Y坐标
        rect.size.width += edgeInsets.left + edgeInsets.right // 调整size的width
        rect.size.height += edgeInsets.top + edgeInsets.bottom // 调整size的height
        return rect
    }
    
    // 重写drawText方法
    override func drawText(in rect: CGRect) {
        super.drawText(in: rect.inset(by: edgeInsets))
    }

}

调用部分代码

//
//  BtnStyleLabelVC.swift
//  UIKit-basic
//
//  Created by Qire_er on 2021/12/12.
//

import UIKit

class BtnStyleLabelVC: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let labelPadding: CGFloat = 14 // 定义padding
        let labelFontSize: CGFloat = 12 // 定义字号
        let itemSpacing: CGFloat = 8 // 定义间距
        
        let labelText = ["经典", "中国风", "BlueStyle", "···", "+"] // 需要创建BtnStyleLabel的文字列表
        
        let labelStack = UIStackView()
        labelStack.translatesAutoresizingMaskIntoConstraints = false
        labelStack.alignment = .leading // 设置左对齐
        labelStack.spacing = itemSpacing // 设置间距
        
        for item in labelText {
            let colorLabel = BtnStyleLabel(padding: labelPadding)
            colorLabel.text = item
            colorLabel.font = .systemFont(ofSize: labelFontSize)
            labelStack.addArrangedSubview(colorLabel)
        }
        
        let space = UIView() // 用于辅助布局
        labelStack.addArrangedSubview(space)
        
        self.view.addSubview(labelStack)
        self.view.backgroundColor = .white
        
        // 设置stackView的约束
        NSLayoutConstraint.activate([
            labelStack.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            labelStack.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
            labelStack.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 15),
            labelStack.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -15)
        ])
    }
}

(==完==)

ps: 以上仅代表个人浅见,如果你有什么高见,也欢迎讨论交流!-

上一篇下一篇

猜你喜欢

热点阅读