storyboardで配置したUIButtonの下にコードで位置指定したUIButtonを配置する

※この記事はstoryboardで配置したUIButtonの下にコードで位置指定したUIButtonを配置する - Qiitaの記事をエクスポートしたものです。内容が古くなっている可能性があります。

今までUILabelやUIButtonをコードで表示する事が怖くて（？）分かりやすいstoryboardを使っていましたが、今回コードで表示することに挑戦してみました。

完成形

黒背景のButtonが(centerButtonと命名)storyboardで配置したもので、赤背景のButton(underButtonと命名)がコードで表示したButtonです。Viewの中心に配置したcenterButtonの8ポイント下にunderButtonを配置します。

centerButtonをViewControllerと紐付け

// ViewController.swift
 import UIKit

class ViewController: UIViewController {

@IBOutlet weak var centerButton: UIButton!

override func viewDidLoad() {
   super.viewDidLoad()
}

centerButtonのサイズ、座標を調べる

// ViewController.swift
//centerButtonの幅
let centerButtonWidth = self.centerButton.frame.width 
//centerButtonの高さ
let centerButtonHeight = self.centerButton.frame.height 
//centerButtonの左端の座標
let centerButtonX = self.centerButton.frame.minX 
//centerButtonの下端の座標
let centerButtonY = self.centerButton.frame.maxY 

iPhoneの座標は左上がx: 0,y: 0なので ・minX = 左端 ・maxX = 右端 ・minY = 上端 ・maxY = 下端 となります。

【iOSアプリ開発】Viewの座標やサイズを取得するノウハウから引用

underButtonをインスタンス化し、位置指定

// ViewController.swift
let underButton = UIButton()

underButton.frame = CGRect(x: centerButtonX, y: centerButtonY + 8,
                           width: centerButtonWidth, height: centerButtonHeight)

あとは背景色などを書き足してViewに追加すれば完成

// ViewController.swift
// ボタンのタイトルを設定
underButton.setTitle("Button", for:UIControl.State.normal)
                
// タイトルの色
underButton.setTitleColor(UIColor.white, for: .normal)
                
// ボタンのフォントサイズ
underButton.titleLabel?.font =  UIFont.systemFont(ofSize: 36)
                
// 背景色
underButton.backgroundColor = UIColor.red
        
// Viewにボタンを追加
self.view.addSubview(underButton)

全体のコード

// ViewController.swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var centerButton: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let underButton = UIButton()
        let centerButtonWidth = self.centerButton.frame.width
        let centerButtonHeight = self.centerButton.frame.height
        let centerButtonX = self.centerButton.frame.minX
        let centerButtonY = self.centerButton.frame.maxY
        
        underButton.frame = CGRect(x: centerButtonX, y: centerButtonY + 8, width: centerButtonWidth, height: centerButtonHeight)
        
        // ボタンのタイトルを設定
        underButton.setTitle("Button", for:UIControl.State.normal)
                
        // タイトルの色
        underButton.setTitleColor(UIColor.white, for: .normal)
                
        // ボタンのフォントサイズ
        underButton.titleLabel?.font =  UIFont.systemFont(ofSize: 36)
                
        // 背景色
        underButton.backgroundColor = UIColor.red
        
        // Viewにボタンを追加
        self.view.addSubview(underButton)
    }

}