【Swift4/ストリーボード無し】UILabel、UIButtonに下線を引く

ウェブだとaタグとかで自然と下線がついたりする。

UILabelとUIButtonに下線を引こうと思ったら意外とネット上に情報が少なかったのでメモ。

確かにアプリだとリンクみたいな概念がないから実装してる人が少ないのかもしれない。

とりあえず、強調したい場合やボタンまでにするつもりはないけど、遷移するテキストだと主張したい場合などに使えるかと思います。

 

  • Swift version 4.2.1
  • Xcode Version 10.1

UILabelとUIButtonに下線をつけるサンプルコード

class ViewController: UIViewController {

    let sampleUILabel:UILabel   = UILabel()
    let sampleUIButton:UIButton = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = .white

        let text = "Hello World!"
        
        // テキストをカスタマイズするために、NSMutableAttributedStringにする
        let attributeText = NSMutableAttributedString(string: text)
        // styleをunderLineに。valueをrawValueに。該当箇所を0-text.count文字目まで
        attributeText.addAttribute(
            NSAttributedString.Key.underlineStyle,
            value: NSUnderlineStyle.single.rawValue,
            range: NSMakeRange(0, text.count)
        )

        self.sampleUILabel.frame = CGRect(x: 150, y: 200, width: 200, height: 20)
        self.sampleUILabel.attributedText = attributeText
        self.view.addSubview(self.sampleUILabel)

        self.sampleUIButton.frame = CGRect(x: 100, y: 300, width: 200, height: 20)
        self.sampleUIButton.setAttributedTitle(attributeText, for: .normal)
        self.view.addSubview(self.sampleUIButton)
    }
}

UILabelとUIButtonに下線をつけ、遷移するサンプルコード

ただ下線をつけるだけもいいんだけれど、せっかくなので遷移するバージョンも追加しておく。

とは言っても

UILabelには、addGestureを追加して、

UIButtonにはaddTarget追加してそれぞれの関数を作るだけ。

 

class ViewController: UIViewController {

    let sampleUILabel:UILabel   = UILabel()
    let sampleUIButton:UIButton = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = .white

        let text = "Hello World!"
        
        // テキストをカスタマイズするために、NSMutableAttributedStringにする
        let attributeText = NSMutableAttributedString(string: text)
        // styleをunderLineに。valueをrawValueに。該当箇所を0-text.count文字目まで
        attributeText.addAttribute(
            NSAttributedString.Key.underlineStyle,
            value: NSUnderlineStyle.single.rawValue,
            range: NSMakeRange(0, text.count)
        )

        self.sampleUILabel.frame = CGRect(x: 150, y: 200, width: 200, height: 20)
        self.sampleUILabel.attributedText = attributeText
        // uilabelをタップできるように
        sampleUILabel.isUserInteractionEnabled = true
        // uilabelに追加するためのtapgestureインスタンスを生成
        let gesture = UITapGestureRecognizer(
            target: self,
            action: #selector(self.uiLabelTapEvent(_:))
        )
        // 生成したインスタンスをuilabelにadd
        sampleUILabel.addGestureRecognizer(gesture)

        self.view.addSubview(self.sampleUILabel)

        self.sampleUIButton.frame = CGRect(x: 100, y: 300, width: 200, height: 20)
        // タップされたとき(touchUpInside)に関数が実行されるように追加
        self.sampleUIButton.addTarget(
            self,
            action: #selector(self.uiButtonTapEvent(_:)),
            for:.touchUpInside
        )

        self.sampleUIButton.setAttributedTitle(attributeText, for: .normal)
        
        
        self.view.addSubview(self.sampleUIButton)
    }
    // uilabelがタップされたときに動く関数
    @objc func uiLabelTapEvent(_ sender:UITapGestureRecognizer) {
        print("tapped uilabel")
    }
    
    // uibuttonがタップされたときに動く関数
    @objc func uiButtonTapEvent(_ sender:UITapGestureRecognizer) {
        print("tapped uibutton")
    }
}

 

以上!