【Swift】UILabelに背景、外枠、角丸などいろいろ設定してみる

UILabelSwift

*Swift5, Xcode ver 12.1

Labelをいろいろいじってみました。たくさんあり過ぎて全てを紹介できないので、普段からよく使うコードや、あればいいなと思ったコードを紹介しています。

フォントの指定、文字サイズ

        label1.font = UIFont(name: "HelveticaNeue", size: 17)
スポンサーリンク

任意の文字指定

        label1.text = "label1"

文字の色

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

ラベルのテキストを複数行にする

        label1.numberOfLines = 1

どうやってアプリを作っていくのかがとても分かりやすいので初めてアプリを作る方はこちらの書籍ががおすすめです!

スポンサーリンク

文字がはみ出さないようにする

        label1.sizeToFit()

ラベルに背景

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

ラベルに外枠をつける

//        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

ラベルの外枠の線の太さ

        label1.layer.borderWidth = 3

ラベルの外枠を角丸にする

     label1.layer.cornerRadius = 5
スポンサーリンク

ラベルテキストに下線をつける

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
    }

コード全体



import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var label1: UILabel!
    @IBOutlet weak var label2: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //        フォント、文字サイズを指定
        label1.font = UIFont(name: "HelveticaNeue", size: 17)
        //        ラベルに任意の文字を入れる
        label1.text = "label1"
        //        テキストの色
        //        label1.textColor = UIColor.blue
        let textColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
        label1.textColor = textColor
        //        ラベルを複数行にする(1行表示)
        label1.numberOfLines = 1
        //        文字をはみ出さないようにする
        label1.sizeToFit()
        //        ラベルに背景
        //        label1.textColor = UIColor.blue
        let backGroundColor = UIColor(red: 0/255, green: 159/255, blue: 184/255, alpha: 1.0)
        label1.backgroundColor = backGroundColor
        //        ラベルに外枠
        //        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
        //        ラベルの外枠の線の太さ
        label1.layer.borderWidth = 3
        //        ラベルの外枠を角丸にする
        label1.layer.cornerRadius = 5
        ///        ラベルテキストに下線をつける
        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
    }
}

このコードを実行すると下の画像の様な感じになります

スポンサーリンク

ラベルのサブクラスを作る

全てのラベルそれぞれに同じコードを書くと面倒だし読みにくくなったりするので、そんな時はLabelのサブクラスを作ってあげると便利だし余計なコードが省けて便利です

New Fileを選択してCocoa Touch Classを選択

Classの名前は分かり易い適当な名前をつけてください
*SubclassはUILabelを選択してください

無事にFileができたら下記のコードを記述しましょう

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)
      }
}

しかし、このままではhexの所でお叱りをうけるので、UIColorをカラーコードで指定できるエクステンションも作ります

先ほどと同じでNew FileからFileを作るのですが、今回はSwift File を選択肢

無事にFileができたら下記のコードを記述しましょう

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))
    }
}

最後にStoryboardで適用させたいLabelを選択し、Custom Classから先ほど作ったクラスを選択できれば完成です!!

どうやってアプリを作っていくのかがとても分かりやすいので初めてアプリを作る方はこちらの書籍ががおすすめです!

もし参考になったらボタンひとつ”いいね”をお願いします!!😉

コメント

タイトルとURLをコピーしました