[Swift] Try setting various settings such as background, outer frame, rounded corners in UILabel

* Swift5, Xcode ver 12.1

I played around with Label. There are too many to introduce all of them, so I’m introducing the codes that I often use and the codes that I wish I had.

Font specification, font size
Arbitrary character specification
Text color
Label text multiple lines
Prevent the characters from sticking out
Background of label
Border to the label
Border width of the label
Corner radius of the label
Underline the label text
Create a label subclass

Font specification, font size

        label1.font = UIFont(name: "HelveticaNeue", size: 17)

[Swift] iOS font list

[Swift] [Xcode] List of iOS fonts. I refer to it so that I can compare it with different fonts.

Arbitrary character specification

        label1.text = "label1"

Text color

//        label1.textColor = UIColor.blue
        let textColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
        label1.textColor = textColor

【Swift】How to change the color of Text

The code changes the Text color in System color, RGB, and color code. Please refer to it when changing the text color of labels and text.

Label text multiple lines

        label1.numberOfLines = 1

Prevent the characters from sticking out

        label1.sizeToFit()

Background of label

//        label1.textColor = UIColor.blue
        let backGroundColor = UIColor(red: 0/255, green: 159/255, blue: 184/255, alpha: 1.0)
        label1.backgroundColor = backGroundColor

Border to the label

//        label1.textColor = UIColor.blue
        let borderColor = UIColor(red: 255/255, green: 0.0/255, blue: 0.0/255, alpha: 1.0).cgColor
        label1.layer.borderColor = borderColor

Border width of the label

        label1.layer.borderWidth = 3

Corner radius of the label

　　　　　label1.layer.cornerRadius = 5

Underline the label text

let labelString = "label2"
       let textColor2: UIColor = .blue
        let underLineColor: UIColor = .red
        let underLineStyle = NSUnderlineStyle.single.rawValue
        let labelAtributes:[NSAttributedString.Key : Any]  = [
            NSAttributedString.Key.foregroundColor: textColor2,
            NSAttributedString.Key.underlineStyle: underLineStyle,
            NSAttributedString.Key.underlineColor: underLineColor
        ]
        let underlineAttributedString = NSAttributedString(string: labelString,
                                                           attributes: labelAtributes)
        
        label2.attributedText = underlineAttributedString
    }

Whole code



import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var label1: UILabel!
    @IBOutlet weak var label2: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //        Font specification, font size
        label1.font = UIFont(name: "HelveticaNeue", size: 17)
        //        Arbitrary character specification
        label1.text = "label1"
        //        Text color
        //        label1.textColor = UIColor.blue
        let textColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
        label1.textColor = textColor
        //        Label text multiple lines
        label1.numberOfLines = 1
        //        Prevent the characters from sticking out
        label1.sizeToFit()
        //        Background of label
        //        label1.textColor = UIColor.blue
        let backGroundColor = UIColor(red: 0/255, green: 159/255, blue: 184/255, alpha: 1.0)
        label1.backgroundColor = backGroundColor
        //        Border to the label
        //        label1.textColor = UIColor.blue
        let borderColor = UIColor(red: 255/255, green: 0.0/255, blue: 0.0/255, alpha: 1.0).cgColor
        label1.layer.borderColor = borderColor
        //        Border width of the label
        label1.layer.borderWidth = 3
        //        Corner radius of the label
        label1.layer.cornerRadius = 5
        ///        Underline the label text
        let labelString = "label2"
        let textColor2: UIColor = .blue
        let underLineColor: UIColor = .red
        let underLineStyle = NSUnderlineStyle.single.rawValue
        let labelAtributes:[NSAttributedString.Key : Any]  = [
            NSAttributedString.Key.foregroundColor: textColor2,
            NSAttributedString.Key.underlineStyle: underLineStyle,
            NSAttributedString.Key.underlineColor: underLineColor
        ]
        let underlineAttributedString = NSAttributedString(string: labelString,
                                                           attributes: labelAtributes)
        
        label2.attributedText = underlineAttributedString
    }
}

When I run this code, it looks like the image below

Create a label subclass

If you write the same code for each label, it will be troublesome and difficult to read, so in such a case it is convenient to create a subclass of Label and it is convenient to omit unnecessary Code

Select New File and select Cocoa Touch Class

Please give the class a suitable name that is easy to understand.
*Select UILabel in Subclass

Let’s write the following code when File is successfully created

import UIKit

class CustomLabel: UILabel {

    override init(frame: CGRect) {
        super.init(frame: frame)
        customDesign()
      }
      required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        customDesign()
      }
      
      override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        customDesign()
      }
      
      private func customDesign() {
        layer.borderColor =  UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1).cgColor
        layer.borderWidth = 2
        layer.cornerRadius = 5
        layer.backgroundColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1).cgColor
        textColor = UIColor(hex: "333333", alpha: 1.0)
        font = UIFont(name: "Helvetica Neue Bold", size: 17)
      }
}

However, as it is, I will be scolded at hex, so I will also make an extension that can specify UIColor with a color code

Same as before, create a File from New File, but this time select Swift File

Let’s write the following code when File is successfully created

import UIKit

extension UIColor {
    convenience init(hex: String, alpha: CGFloat = 1.0) {
        let v = Int("000000" + hex, radix: 16) ?? 0
        let r = CGFloat(v / Int(powf(256, 2)) % 256) / 255
        let g = CGFloat(v / Int(powf(256, 1)) % 256) / 255
        let b = CGFloat(v / Int(powf(256, 0)) % 256) / 255
        self.init(red: r, green: g, blue: b, alpha: min(max(alpha, 0), 1))
    }
}

Finally, select the Label you want to apply in Storyboard, and select the class you created earlier from Custom Class, and you’re done!!!

that’s all! Was it helpful? If you find it helpful, please like one button! !! 😉