🔖

iOS | テキストの長さに合わせて自動的にサイズを調整してくれる角丸ボタンを作る

2022/09/11に公開

はじめに

表示するテキストの長さがわからいとき、うまいことサイズを調整してくれるメソッドとして sizeToFit() が UIView に用意されています。ボタンを動的に生成して sizeToFit() を使えば綺麗なボタンが表示されるはず...。

button.setTitle("タイトル", for: .normal)
button.backgroundColor = UIColor.systemBlue
button.setTitleColor(UIColor.white, for: .normal)
button.sizeToFit()
centerView.addSubview(button2)

結果はこちら。

幅がピッタリですね...。

さらに角丸ボタンにしようと思うと...。

美しくない...。

ということで、うまいこと調整してくれるボタンを作りたいと思います。

（※もっと良い方法があればぜひコメントください🙇‍♂️）

サイズを自動調整してくれるボタン

UIButton を継承した RoundedButton というクラスを作りました。

import UIKit

class RoundedButton: UIButton {
    convenience init(title: String, fontSize: CGFloat) {
        self.init(frame: CGRect(origin: .zero, size: CGSize()))
        
        setTitle(title, for: .normal)
        titleLabel?.font = UIFont.systemFont(ofSize: fontSize)
        
        adjustSize() // サイズの調整
        roundCorners() // 角を丸くする
        configureColor() // 色をつける
    }
    
    private func adjustSize() {
        sizeToFit()
        let width = self.frame.width
        let height = self.frame.height
	// sizeToFit() を実行しても幅が狭いので、高さは変えずに
	// 幅だけ +30 します。この数値は好みで変更してください。
        frame.size = CGSize(width: width + 30, height: height)
    }
    
    private func roundCorners() {
        clipsToBounds = true
        layer.cornerRadius = bounds.height / 2
        layer.borderWidth = 0.0
    }
    
    private func configureColor() {
        backgroundColor = UIColor.systemBlue
        setTitleColor(UIColor.white, for: .normal)
    }
}

（角の丸み具合や色については好みで調整してください。）

ポイントは adjustSize() です。一度 sizeToFit() を実行しますが、冒頭で見たとおりこれだけでは幅が狭い状態なので、幅を広くするために「現在の幅 +30」をセットしています。

また、convenience init() を用意して表示するテキストと文字サイズをセットできるようにしました。

RoundedButton(title: "タイトル", fontSize: 16)

このように生成すればいい感じの角丸ボタンが出来上がります。

RoundedButton(title: "タイトルが長くても大丈夫", fontSize: 16)

RoundedButton(title: "でっかい文字", fontSize:30)

はじめに

サイズを自動調整してくれるボタン

Discussion