SwiftでXLFormのボタンを使用する。 - プログラムを書こう！

この記事は2018年11月05日に投稿しました。

f:id:paveway:20190914064630j:plain

1. はじめに

こんにちは、iOSのエディタアプリPWEditorの開発者の二俣です。
今回はPWEditorで使用しているXLFormライブラリのボタンの使用方法です。

目次へ

2. 前提

この記事を参考にXLFormを使用できるようにしておいてください。

paveway.hatenablog.com

また画面はストーリボードではなく、XIBファイルを使用します。
ストーリーボードを使用する場合は、その部分は読み替えてください。

目次へ

3. XLFormのボタンを使用する

3-1. XIBファイルを追加する

プロジェクトを作成した状態ではストーリーボードを使用する前提になっています。
そのためViewControllerのXIBファイルがないため、以下の手順でXIBファイルを追加します。

Xcodeでプロジェクトを開きます。
画面左側のProject navigatorでプロジェクトフォルダを選択し、ポップアップメニューでNew fileを選択します。
Choose a template for your file画面が開くので、User interfaceのViewを選択し、Nextボタンを押下します。
ファイル作成画面が開くので、Save asにViewControllerのファイルを入力します。
フォルダ選択で保存先を選択し、Createボタンを押下します。
画面左側のProject navigatorで作成した、XIBファイルを選択します。
画面右上のInspectorボタンを押下し、画面右側にInspector画面を開きます。
画面中央のPlacefolders->File's Ownerを選択します。
画面右側のIdentity inspectorタブを選択し、Custom class->ClassにViewControllerのクラス名を入力します。
画面中央のView(図)にUITableViewを追加し、Safe areaいっぱいに配置します。
ViewとUITableViewをOutlet接続します。
UITableViewはAssistant editorで2画面表示し、Manual->Pods->Pods->XLForm->XLFormViewContorller.hを開き、XLFormVIewControllers.hのtableViewプロパティと接続します。

目次へ

3-2. ViewContollerを実装する

この手順はXLFormのHow to create a formを参考にしました。

importにXLFormを追加します。
XLFormViewControllerを継承するようにします。
init(coder:)、init(nibName: bundle:)のイニシャライザを実装し、フォームの初期化処理メソッドinitializeForm(後述)を呼び出します。
フォームの初期化処理メソッドinitializeFormでは、
- フォームの作成
- セクションの作成
- セル(row)の作成
を行います。
フォーム、セクション、セル(row)はそれぞれ、View、UITableViewのセクション、UITableViewのセル(row)に該当します。
セクション、セル(row)は複数作成できます。
そのため各作成処理はメソッド化します。

各作成処理の詳細はコメントを参照してください。

import UIKit
import XLForm // 1. XFormを追加します。

 // 2. XLFormViewControllerを継承します。
class ViewController: XLFormViewController {

    // MARK: - Initializer
    
    /**
     3. イニシャライザ
     */
    required init?(coder aDecoder: NSCoder) {
        // スーパークラスのイニシャライザを呼び出す。
        super.init(coder: aDecoder)
        
        // フォームの初期化処理を行う。
        initializeForm()
    }
    
    /**
     3. イニシャライザ
     */
    override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
        // スーパークラスのイニシャライザを呼び出す。
        super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
        
        // フォームの初期化処理を行う。
        initializeForm()
    }
    
    // MARK: - UIViewController
    
    /**
     インスタンスが生成された時に呼び出されます。
     */
    override func viewDidLoad() {
        // スーパークラスのメソッドを呼び出します。
        super.viewDidLoad()
        
        // 区切り線を表示しない。
        tableView.tableFooterView = UIView()
    }
    
    // MARK: - XLForm
    
    /**
     XLFormの初期化処理を行います。
     */
    func initializeForm() {
        // フォームを作成します。
        let form = createForm()
        
        var section: XLFormSectionDescriptor!
        var row: XLFormRowDescriptor!
        
        // セクションを作成し、フォームに追加します。
        section = createSection()
        form.addFormSection(section)
        
        // セルを作成し、セクションに追加します。
        row = createButtonRow()
        section.addFormRow(row)
        
        //self.form = form
    }
    
    /**
     フォームを作成します。
     */
    func createForm() -> XLFormDescriptor {
        // 画面タイトルを指定してフォームを作成します。
        let form = XLFormDescriptor(title: "XLFormサンプル")
        return form
    }
    
    /**
     セクションを作成します。
     */
    func createSection() -> XLFormSectionDescriptor {
        // セクション名を指定してセクションを作成します。
        // セクション名を表示しない場合は空文字列を指定してください。
        let section = XLFormSectionDescriptor.formSection(withTitle: "セクション")
        return section
    }
    
    /**
     ボタンセルを作成します。
     */
    func createButtonRow() -> XLFormRowDescriptor {
        // タグを設定します。
        // 複数のボタンやコントロールを作成した場合の識別に使用します。
        // 全コントロールで一意の名前を設定してください。
        let tag = "button"

        // XLFormRowDescriptorのタイプを指定します。
        // これで作成するコントロールを決定します。
        // 今回はボタンとして作成します。
        let type = XLFormRowDescriptorTypeButton
        
        // ボタンのタイトルを設定します。
        let title = "ボタン"
        
        // ボタンを作成します。
        let row = XLFormRowDescriptor(tag: tag, rowType: type, title: title)

        // ボタン押下のイベントハンドラを設定します。
        row.action.formSelector = #selector(buttonPressed(_:))

        // cellConfigによりボタンの属性を変更できます。
        // 設定できる属性はコントロールで異なります。
        // 今回紹介した属性はサンプルコードやXLFormソースを参考に調査しました。
        // ボタンもこの他に設定できる属性がある可能性はあります。
        // どんな属性が設定できるかは、各自調査してください。

        // ボタンのラベルの表示位置を変更する場合、設定します。
        // デフォルトは中央に表示されます。
        //row.cellConfig["textLabel.textAlignment"] = NSTextAlignment.left.rawValue
        
        // アクセサリを表示する場合、設定します。
        // 例はインディケーター(セルの右端に”>"を表示)を表示します。
        //row.cellConfig["accessoryType"] = UITableViewCell.AccessoryType.disclosureIndicator.rawValue
        
        // ラベルの文字色を変更する場合、設定します。
        // デフォルトは青色です。
        //row.cellConfig["textLabel.textColor"] = UIColor.black
        
        return row
    }
    
    /**
     ボタンを押下した時に呼び出されます。
     */
    @objc func buttonPressed(_ sender: XLFormRowDescriptor) {
        // セルの選択状態を解除します。
        deselectFormRow(sender)
        
        // 以降にボタンが押下された時の処理を記述してください。
    }
}

目次へ

3-3. 画面を表示する

画面をXIBファイルで作成したため、画面はコードで表示します。
以下が手順です。

windowオブジェクトを作成します。
画面を生成します。
画面を表示します。

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        // 1. windowオブジェクトを生成します。
        let frame = UIScreen.main.bounds
        window = UIWindow(frame: frame)
        guard let window = window else {
            return false
        }
        
        // 2. 画面を生成します。
        let vc = ViewController(nibName: nil, bundle: nil)
        let nc = UINavigationController(rootViewController: vc)
        
        // 3. 画面を表示します。
        window.rootViewController = nc
        window.makeKeyAndVisible()
        return true
    }
    ...
}

目次へ

3. おわりに

今後テキスト入力やスイッチなど他のコントロールを紹介します。
フォームやセクションの作成方法は今回紹介した方法になります。

ITエンジニアの無料カウンセリング【ポテパンフリーランス】

詳解 Swift 第4版

作者: 荻原剛志
出版社/メーカー: SBクリエイティブ
発売日: 2017/12/26
メディア: 単行本
この商品を含むブログ (1件) を見る

紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。

目次へ

私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッドOS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOSモバイルアプリやウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。

また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。

EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688

目次へ