[UI部品] Table Viewの基礎

今回はTable Viewの使用方法についてみていきます。

Xcode:9.2
Swift:4.0.3

Table Viewを使用すると、データをリスト形式で表示することができます。例えば、リマインダーアプリではTable Viewが使用されていることがわかります。

1.TableViewを配置する

はじめにSingle View Applicationのプロジェクトを作成して、Table Viewを貼り付けます。配置したら、サイズを任意の大きさに変更してください。

2.Table View Cellを配置する

Table Viewに項目を表示する為にはセルが必要です。先ほど配置したTable Viewの上にTable View Cellを1つ配置します。もしくは左側のView Controller SceneのTable Viewの下にTable View Cellをドラッグして配置してもOKです。

3.dataSourceとdelegateの設定

Table Viewのにデータを表示したり操作する為にはdataSourceとdelegateの設定が必要です。

View Controller Sceneの下にあるTable Viewを[control]キーを押しながらドラッグして、View Controllerの上で離します。

すると、メニューが表示されるのでdataSourceを選択します。同様にしてdelegateも選択します。

3.Table View CellをViewController.swiftから操作するための設定

今度はTable View CellをViewController.swiftから操作できるようにします。

はじめにView Controller SceneにあるTable View Cellを選択します。続いて、Show the Attributes inspectorを選択し、最後にIdentifierに「myCell」よ入力します。ここに入力する名前は「myCell」でなくても構いません。

4.ViewController.swiftへの実装

デザインは以上で完了ですので、ViewController.swiftへのコードの実装をしていきます。

はじめに、セルに表示するデータを準備します。ここでは、ライオン、シマウマ、キリンの3つの文字列を表示するようにするため、override func viewDidLoad()の上あたりに、以下のコードを挿入してください。

let animals = ["ライオン","シマウマ","キリン"]

次に、ViewControllerクラスにdataSourceとdelegateを実装します。以下のようにUIViewControllerの右側に、UITableViewDelegateとUITableViewDataSourceを記述します。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

すると、エラーが表示されるので[Fix]を押して解決させます。

[Fix]を押すと、以下のように2つのメソッドが実装されます。この2つは必須のメソッドなので、「実装されていないよ」という意味でエラーが表示されていたわけです。

上のメソッドはTable Viewに何個のセルを表示するかを指定するためのものです。animalsのデータ全てが表示できるようにする為に、以下のように編集します。

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return animals.count
}

もう1つのメソッドは、セルに表示する値を設定するためのものです。

// セルに表示する値を設定する
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    // データを表示するセルを取得する
    let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)
    
    // セルに表示する値を設定する
    cell.textLabel!.text = animals[indexPath.row]
    
    // データを設定したセルを返却する
    return cell
}

以上で実装は完了です。実行をしてみると、以下のようにanimalsに設定したデータが一覧となって表示されます。

最後にViewController.swiftの全ソースを以下に示します。

import UIKit

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
    let animals = ["ライオン","シマウマ","キリン"]
    
    // Table Viewにいくつのセルを表示するかを指定する
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return animals.count
    }
    
    // セルに表示する値を設定する
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // データを表示するセルを取得する
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)
        
        // セルに表示する値を設定する
        cell.textLabel!.text = animals[indexPath.row]
        
        // データを設定したセルを返却する
        return cell
    }
      
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

コードはGithubに置いておきます

https://github.com/HIRO-NET/Swift4-Sample/tree/master/TableViewSample1

[Navigation Controller] NavigationControllerを使用する

今回はNavigation Controllerを使用する方法をみていきます。

Xcode:9.2
Swift:4.0.3

本記事のサンプルは以下に置いておきます。

https://github.com/HIRO-NET/Swift-UI/tree/master/NavigationControllerSample

Navigation Controllerは、画面の上部にナビゲーションを表示して、複数のページを行ったり来たりできるようにします。

例えば、カレンダーアプリを見ると(下図)、画面の上部には「<2018」や検索ボタン、追加ボタンなどがあります。Navigation Controllerを使用するとこのようなナビゲーション付きのアプリを作成することができます。

 

 

Navigation Controllerの例

Navigation Controllerの配置

はじめにSingle Viewのプロジェクトを作ります。

次に、Main.storyboardを開き、View Controllerをクリックして選択しておきます。 

続いて Xcodeのメニューから[Editor]-[Embed In]-[Navigation Controller]を選択します。すると、Main.storyboardにはNavigation Controllerの画面が追加され、既存のView Controllerへと接続されます。追加されたNavigation Controllerの画面は、アプリ起動時に表示されることはありません。あくまでも表示されるのは、既存のView Controllerになります。

次に、もう1つView Controllerを追加して、既存のView Controllerとの行き来をできるようにします。

新しくView Controllerを追加したら、既存のView Controllerにボタンを一つ追加してみます。ここでは、Navigation Controllerの右上に追加をしてみましょう。

Navigation ControllerにはBar Button Itemというボタンを配置します。

続いて、配置したBar Button Itemをアイコンに変更してみましょう。Bar Button Item を選択して、System Itemを「Add」にします。すると、Bar Button Itemが「+」アイコンに変更されます。この他にも使用可能なアイコンがありますので試してみてください。

次に、「+」がタップされた時に、新しく追加されたView Controllerに遷移するように設定をします。「+」ボタンの上を[Control]キーを押しながら、遷移先のViewまでドラッグして離します。するとメニューが表示されるので「Show」を選択します。

新しく追加したView Controllerの上部には、Navigation Barが表示され、既存のView ControllerとSegueで接続されます。

以上でNavigation Controllerの設定は完了です。もう1つView Controllerを追加する場合も同様の手順で作業をします。

あとは実行をして動作を確認してみてください。複数画面で行き来ができるはずです。

 

[Realm] CarthageとRealmのインストール

Swiftで軽量データベースRealmを使用するにはCarhage(カーセージ)のインストールが必要です。

そこで、Carthageをインストールしてみたので覚え書きとして手順を残しておきます。

2018/07/31追記

RealmはCocoaPodsでもインストールが可能です。

[Tips] CocoaPodsによるRealmのインストール」の記事を追加しましたので、そちらも参照ください。

1.Carthageのインストール

はじめに https://github.com/Carthage/Carthage/releases にアクセスします。

Charthageのpkgファイルがあるので、ダウンロードして実行します。

2.Cartfileの作成

目的のライブラリをインストールするには、はじめにCartfileと呼ばれるファイルを作成する必要があります。

terminal.appを開いて、プロジェクトフォルダへ移動し以下のコマンドを実行します。

touch Cartfile

すると、以下のようにCartfileが作成されます。

Realmのインストール

次に作成したCartfileを編集して、Realmをインストールする準備をします。

Cartfileは以下のように編集します。

github "realm/realm-cocoa"

続いて、terminal.appでプロジェクトのディレクトリに移動し、以下のコマンドを実行します。

carthage update

成功すると、プロジェクトフォルダ配下に以下のファイルが作成されます。

  • Cartfile.resolved
  • Cartage/Build

プロジェクの設定

続いてプロジェクトを開いてRealmを使用できるように設定をしていきます。

はじめに、プロジェクトナビゲータでプロジェクトを選択したら、「Build Phases」を選択して、左側にある[+]ボタンをクリックします。メニューが表示されるので

Run Scriptの欄に以下を追加します。

/usr/local/bin/carthage copy-frameworks

Input Filesに以下を追加します。

$(SRCROOT)/Carthage/Build/iOS/Realm.framework
$(SRCROOT)/Carthage/Build/iOS/RealmSwift.framework

次に「General」タブを選択して、「Linked Frameworks Libraries」の中にある[+]ボタンをクリックします。

ライブラリの選択画面になるので、[Add Others]ボタンをクリックして以下の2つのファイルを追加します。

  • Carthage/Build/(対象デバイス)/RealmSwift.framework
  • Carthage/Build/(対象デバイス)/Realm.framework

 

以上でライブラリの追加が完了です。

あとは、Realmを使用したいファイル内で以下を記述して使用します。

import RealmSwift