この記事は2018年11月05日に投稿しました。
目次
- はじめに
- 前提
- XLFormのボタンを使用する
3-1. XIBファイルを追加する
3-2. ViewControllerを実装する
3-3. 画面を表示する - おわりに
![[改訂新版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 (WEB+DB PRESS plus) [改訂新版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 (WEB+DB PRESS plus)](https://images-fe.ssl-images-amazon.com/images/I/51WsZJ6wtIL._SL160_.jpg)
[改訂新版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 (WEB+DB PRESS plus)
- 作者: 石川洋資,西山勇世
- 出版社/メーカー: 技術評論社
- 発売日: 2018/01/17
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
1. はじめに
こんにちは、iOSのエディタアプリPWEditorの開発者の二俣です。
今回はPWEditorで使用しているXLFormライブラリのボタンの使用方法です。
2. 前提
この記事を参考にXLFormを使用できるようにしておいてください。
また画面はストーリボードではなく、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. おわりに
今後テキスト入力やスイッチなど他のコントロールを紹介します。
フォームやセクションの作成方法は今回紹介した方法になります。

- 作者: 荻原剛志
- 出版社/メーカー: 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