さようなら全てのStoryboard

StoryBoardから脱出をしたいけど、SwiftUIは自由度がまだ低すぎて、という方や初心者の方でとりあえず動く何かが見たいという方向けの記事です。

なんだかんだUIKit書きますよね

今年のWWDCも終わってついにSwiftUIの時代が！！くるわけでもないので、StoryBoardの取っ掛かりの良さに惹かれてiOS開発をし始めてしまった私が、UIkitだけでコードを書く時の雛形のようなものを置いておきます。

レスポンシブなViewを作りたい。でもコードで書きたい。

StoryBoardではautolayoutなどを使って書いたり、レスポンシブなviewがコードでかける、ライブラリなどもありますが、UIkitで完結するなら簡潔でいいですよね。ということで、今回はレスポンシブなviewをUIkitで書く方法を置いていきたいと思います。

捌いていく！

プロジェクトはデフォルトのUIkit + Storyboardのものを使用しています。

Xcodeの新規プロジェクトを作成してやる場合のスクリーンショット

登録画面を例に解説

今回は例として登録画面を作っていきます。このての画面は、実際に使えるように書こうと思うと案外めんどくさいです。
ユーザー名とパスワードだけで登録するようなサービスの雛形を作っていきます。

完成図

ViewControllerとViewに分けて書く

View全体の情報などを一元管理するのがViewControllerで、Viewについて記載していくファイルをViewと考えて、overrideにViewの詳細はそのまま書かずに、新規ファイルを作成、extensionをして、ViewファイルのUISetUp()関数に詳細を書いていくというやり方を私はとっています。

ViewController

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {
    
    let DescriptionLabel = UILabel()
    let SubDescriptionLabel = UILabel()
    
    var PasswordTextField = UITextField()
    var NameTextField =  UITextField()

    let AuthButton = UIButton()
    
     override func viewDidLoad() {
         super.viewDidLoad()
        UISetUp()
      
        PasswordTextField.delegate = self
        NameTextField.delegate = self
       
     }
    
    @objc func click(_ sender: UIButton) {
        print("登録処理")
    }
        
}

レスポンシブ対応

Viewファイルで各UIのセッティングをしていきます。
基本的には

.frame = CGRect(x:, y:, width:, height:)

の中に比率の指定で書いていくのですが、その中で、肝となるのが、画面の縦幅＊横幅、すなわち画面の全体の面積を使って、定義していくことです。

⚠️今回のテーマは、さようなら全てのStoryboardなので、一般的に必要になりそうな、Storyboard上で定義する設定(例えばフォントサイズなど)もここに書いてあります。

View

import UIKit
extension ViewController{
func UISetUp(){
    
    let Height = self.view.frame.height
    let Width = self.view.frame.width
    let SafeArea = self.view.safeAreaInsets.top
    let Area = Height * Width/3100
    
    //DescriptionLabel
        let DescriptionLabelArea = Height/10
        let DescriptionLabelBeforeArea = SafeArea + DescriptionLabelArea
        DescriptionLabel.frame = CGRect(x:0, y:DescriptionLabelArea , width: Width, height:Height/11)
        DescriptionLabel.text = "ログイン"
        DescriptionLabel.textColor = UIColor.white
        DescriptionLabel.font =  UIFont.boldSystemFont(ofSize: 40)
        DescriptionLabel.textAlignment = .center
        self.view.addSubview(DescriptionLabel)
    
     //SubDescriptionLabel
        let SubDescriptionLabelArea = Height/11
        let SubDescriptionLabelBeforeArea = DescriptionLabelBeforeArea + SubDescriptionLabelArea
        SubDescriptionLabel.frame = CGRect(x:0, y:SubDescriptionLabelBeforeArea   , width: Width, height:35)
        SubDescriptionLabel.text = "ユーザー名,パスワードを入力"
        SubDescriptionLabel.textColor = UIColor.white
        SubDescriptionLabel.font =  UIFont.systemFont(ofSize: 20)
        SubDescriptionLabel.textAlignment = .center
        self.view.addSubview(SubDescriptionLabel)
    
      //NameTextField
        let NameTextFieldArea = Height/11
        let NameTextFieldBeforeArea = SubDescriptionLabelBeforeArea + NameTextFieldArea
    
        NameTextField.frame = CGRect(x: 0, y:NameTextFieldBeforeArea , width:Width , height: NameTextFieldArea)
        NameTextField.font = .boldSystemFont(ofSize: 27)
        NameTextField.placeholder = "ユーザー名"
        NameTextField.keyboardType = .default
        NameTextField.borderStyle = .roundedRect
        NameTextField.returnKeyType = .done
        NameTextField.clearButtonMode = .always
        NameTextField.textContentType = .username
        self.view.addSubview(NameTextField)
    
        //PasswordTextField
        let PasswordTextFieldArea = Height/11
        let PasswordTextFieldBeforeArea = NameTextFieldBeforeArea + PasswordTextFieldArea
                
        PasswordTextField.frame = CGRect(x:0, y:PasswordTextFieldBeforeArea ,width:Width, height:PasswordTextFieldArea)
        PasswordTextField.font = .boldSystemFont(ofSize: 27)
        PasswordTextField.placeholder = "パスワード"
        PasswordTextField.keyboardType = .default
        PasswordTextField.borderStyle = .roundedRect
        PasswordTextField.returnKeyType = .done
        PasswordTextField.clearButtonMode = .always
        PasswordTextField.autocapitalizationType = .none
        PasswordTextField.textContentType = .newPassword
        PasswordTextField.textContentType = .oneTimeCode
        PasswordTextField.isSecureTextEntry = true
        self.view.addSubview(PasswordTextField)
        
        //AuthButton
        AuthButton.frame = CGRect(x:0, y:Height - Area*1.5,width:Width, height:Area*1.5)
        AuthButton.setTitle("登録する", for: UIControl.State.normal)
        AuthButton.addTarget(self, action: #selector(click(_:)), for: UIControl.Event.touchUpInside)
        self.view.addSubview(AuthButton)
        
        //BackgroundColor
        self.view.backgroundColor = UIColor(displayP3Red: 12/255, green: 31/255, blue: 68/255, alpha: 1)
	
	
    }

    }

iPhoneSE1での完成図

さようなら全てのStoryboard

Storyboardはとっつきやすさは抜群ですが、しっかり作ろうと思うと、全体の認識や詳細なTextFieldの設定などが難しいので、私はコードで書くのを好んでいます。
この記事のコードはデフォルトのプロジェクトファイルにView.swiftだけを作成してコピペで使用もできますので、ぜひお役立てください。