3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【swift】 要素を画面幅の中央に配置する方法

Posted at

前置き

画面を作る際、storyboardを使っているのですが、文字列を画面幅の中央に配置したい時に、いちいち要素を画面幅いっぱいに広げたうえでXXX.textAlignment = .centerみたいなコトするのもちょっとアナログでブサイク。
そこで、要素にセットされた文字列の長さに合わせて要素の幅を広げ、なおかつ画面幅の中央に配置できるようなロジックを考えました。
(調べたらすんなり見つかるかと思いきや、全然見つからなかった。探し方悪いんですかね。)

開発環境

端末:MacBook Pro/MacOS 10.14.5(Mojave)
Xcode:10.2.1
Swift:5

画面イメージ

「この文字列を画面幅の中央に表示」の部分

ロジック

下記ロジック見てもらえれば分かるように、「(画面幅 - 文字列の幅)/2」の値を、UILabelの表示位置(X軸、左上)として設定しています。

ViewController.swift

    func editLabel() {
        let width = Float(UIScreen.main.bounds.size.width)
        lblTitleLat.text = "この文字列を画面幅の中央に表示"
        lblTitleLat.textColor = .black
        lblTitleLat.font = UIFont.boldSystemFont(ofSize: 20)
        // 文字列をUILabelに中央揃えで表示(一応)
        lblTitleLat.textAlignment = .center
        // 文字列の長さに合わせて、UILabel自体の大きさを調整
        lblTitleLat.sizeToFit()
        // ラベルの表示位置(X軸、左上)の値を算出
        let widthGap = (width - Float(lblTitleLat.frame.width)) / 2
        lblTitleLat.frame = CGRect.init(x: CGFloat(widthGap),
                                        y: lblTitleLat.frame.minY,
                                        width: lblTitleLat.frame.width,
                                        height: lblTitleLat.frame.height)

        // 下の行にも同じ処理を入れてみただけ。
        lblLat.text = "文字列幅:" + (NSString(format: "%.2f", lblTitleLat.frame.width) as String)
        lblLat.sizeToFit()
        let widthGap2 = (width - Float(lblLat.frame.width)) / 2
        lblLat.frame = CGRect.init(x: CGFloat(widthGap2),
                                   y: lblLat.frame.minY,
                                   width: lblLat.frame.width,
                                   height: lblLat.frame.height)
    }

ハマりポイントなど

ハマったというより、こういうのは他の人がいくらでもやってると思ったので、意外とサンプル見つからなかったコト自体が苦労しました。
あと、数学がものすごくニガテなので、「(画面幅 - 文字列の幅)/2」の値を、UILabelの表示位置(X軸、左上)として設定すればよい、という方法論にたどり着くのが大変でした。

なんにせよ、想定通りできてよかったです。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?