CodeZine(コードジン)

特集ページ一覧

iOSアプリできれいなグリッドやグラフを表示しよう

業務アプリ開発に使えるUIが満載、「Xuni(ズーニー)」で作るAndroid/iOSアプリ 第3回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/04/05 14:00

 本連載では、表計算ソフトのような表示が可能なモバイルアプリを開発できる「Xuni」について解説します。前回までは、AndroidでXuniを使用して、グリッドやグラフの表示したり、クラウド上のデータと連携したりといった機能をご紹介しました。今回は、iOSでXuniを動かしていきます。

目次

必要環境

 今回の記事における筆者の環境は下記の通りです。実際は、これより新しくても動作すると思われます。

  • 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からの各画面への線が張り巡らされています。

StoryBoard
StoryBoard
StoryBoardの詳細
StoryBoardの詳細

 実装の詳細を見てみると、画面名ごとに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
        }
    }
}
  1. FlexGridの各カラムを設定する。
  2. itemSourceに対してFlexGridに表示するデータソースを設定する。
  3. 読み取り専用にする
  4. スターサイズ機能を使用して列のサイズを横スクロールしないように調整する
  5. ビューにFlexGridを追加する

 XuniのAndroid版と見比べてどうでしょうか? JavaとSwiftの文法の細かい違いはありますが、FlexGrid自体の使用方法はそれほど変わらないと思います。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • 山本 誠樹(ヤマモト マサキ)

     スマホアプリからクラウドアプリまで作成するフリーのデベロッパー。記事へ質問などあればお気軽にご連絡ください。 Twitter:@nnasaki blog:http://blog.nnasaki.com

バックナンバー

連載:業務アプリ開発に使えるUIが満載、「Xuni(ズーニー)」で作るAndroid/iOSアプリ
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5