必要環境
今回の記事における筆者の環境は下記の通りです。実際は、これより新しくても動作すると思われます。
- Xcode Version 7.2(7C68)
- Mac OS X Yosemite 10.10.5
- Xuni 2015J v3
まずは動かしてみよう
Xuniの概要やインストールについては、第1回で説明していますので省略します。早速サンプルプログラムを動かしてみましょう。
サンプルプログラムはAndroidと同様の場所に保存されています。
~/Documents/XuniJp/iOS/Samples
Androidでも試したFlexGridのサンプルを見ていきます。
Xcodeからプロジェクトを開く
iOS版は、従来からあるObjective-Cと比較的新しいSwiftの2種類の言語を選択できます。今回は新しいSwiftを使用します。次のサンプルプロジェクトをXcodeにて開きます。
~/Documents/XuniJp/iOS/Samples/Swift/FlexGrid101

アプリを実行する
Runボタンをクリックして実行します。

シミュレーターが立ち上がり、アプリが起動します。「列の定義」をタッチしましょう。

Android同様スワイプでスクロール、タップで選択が出来ます。ダブルタップで編集は「セル内容の編集」の画面で出来ます。

アプリの実装を見る
iOSのアプリの画面はStoryBoardで組み立てます。各画面の遷移は線をつなげて関連を表します。今回は最初のMenuから各画面に遷移するので、Menuからの各画面への線が張り巡らされています。


実装の詳細を見てみると、画面名ごとにControllerがあります。例えば先の「列の定義」であれば、「ColumnDefinitionController.swift」になります。どのような実装になっているか見てみましょう。
class ColumnDefinitionController: UIViewController { var _flex = FlexGrid() override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. _flex.autoGenerateColumns = false //(1) let c1 = FlexColumn() c1.binding = "customerID" c1.header = NSLocalizedString("ID", comment: "") c1.width = 100 let c2 = FlexColumn() c2.binding = "firstName" c2.header = NSLocalizedString("First name", comment: "") let c3 = FlexColumn() c3.header = NSLocalizedString("Last name", comment: "") c3.binding = "lastName" let c4 = FlexColumn() c4.binding = "orderTotal" c4.header = NSLocalizedString("Total orders", comment: "") c4.format = "N1" _flex.columns.addObject(c1) _flex.columns.addObject(c2) _flex.columns.addObject(c3) _flex.columns.addObject(c4) //(2) _flex.itemsSource = CustomerData.getCustomerData(100) //(3) _flex.isReadOnly = true //(4) self.starSizing(_flex) //(5) self.view.addSubview(_flex) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() _flex.frame = CGRectMake(0, 65, self.view.bounds.size.width, self.view.bounds.size.height - 65) _flex.setNeedsDisplay() } func starSizing(g: FlexGrid){ for var i : UInt = 0; i < g.columns.count; i++ { var c = FlexColumn() c = g.columns.objectAtIndex(i) as! FlexColumn c.widthType = FlexColumnWidth.Star c.width = (i == 0) ? 3 : (i == 3) ? 3 : 4 } } }
- FlexGridの各カラムを設定する。
- itemSourceに対してFlexGridに表示するデータソースを設定する。
- 読み取り専用にする
- スターサイズ機能を使用して列のサイズを横スクロールしないように調整する
- ビューにFlexGridを追加する
XuniのAndroid版と見比べてどうでしょうか? JavaとSwiftの文法の細かい違いはありますが、FlexGrid自体の使用方法はそれほど変わらないと思います。