Swift

UITableviewに文字列センターのフッターを作る

佐藤 剛士

• 3 min read

UITableviewに文字列センターのフッターを作るTipsです。
アプリを作っていく中で、UITableViewの一番最後のセルにセンタリングで、アプリ情報を表示しようと思いました。

UITableViewのデータを管理するプロトコルUITableViewDataSource には`

  • tableView:titleForFooterInSection:というメソッドがあって、文字列を指定するとフッターに文字を表示してくれます。 始めはこのメソッドで事足りるかなと思ったのですが、なんと- tableView:titleForFooterInSection:`文字のセンタリングはしてくれないんですね。
    必ず左詰めになってしまいます。

でもセンター、中央揃えでテキストを表示したいときもあります。

そのやり方を見ていきましょう！

目次

  • 実行環境
  • UITableviewを作る
  • - tableView:titleForFooterInSection:を使ってみる
  • - tableView:viewForFooterInSection:を使ってみる
  • まとめ
  • サンプルコード

実行環境

  • OSX Yosemite 10.10.5
  • Xcode7.2
  • Swift2.1

UITableviewを作る

プロジェクトを作って、はじめに読み込まれるrootのViewControllerにUITableviewを置きましょう

キャプチャー1

まずはじめにMain.storyboardにいってもともとあるViewControllerを削除して新しくTableViewControllerを置きます

TableViewControllerにIs Initial View Controllerにチェックを入れて、最初に読み込まれるようにします。

UITableViewのサブクラスを作りましょう。メニューからFile > New > Fileを選択して、iOS > Source > Cocoa Touch Classを選びます。 Choose options for your new file:にはclass名をFooterTableViewController
SubclassにUITableViewControllerを指定してNextを押します。
保存場所を指定してファイルを作成します

Main.storyboardに戻って先ほど作ったTableViewのCustomClassにFooterTableViewControllerを指定しましょう

キャプション2

また、CellのIdentifierをcellにします

最低限のテーブル表示のコードを書いていきましょう。
FooterTableViewController.swiftに


    //サンプルのデータ
    let  datas = ["サンプル1", "サンプル2", "サンプル3"]
    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        
        return 1
    }

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

    
    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)

        // Configure the cell...

        cell.textLabel?.text = datas[indexPath.row]
        
        return cell
    }

これで準備は終わりです。

- tableView:titleForFooterInSection:を使ってみる

まずUITableViewのプロトコルUITableViewDataSourceの- tableView:titleForFooterInSection:を使ってみましょう。

このメソッドを実装して文字列を返せば、テーブルビューのフッターに左詰めでテキストを表示してくれます

override func tableView(tableView: UITableView, titleForFooterInSection section: Int) -> String? {
    return "フッターの文字を書く"
}

ビルドをするとこんな風になります

リターンで返した文字が左詰めで表示されてます。

- tableView:viewForFooterInSection:を使ってみる

次にUITableViewDelegateの- tableView:viewForFooterInSection:を使ってフッターの文字をセンターにしていきたいと思います。

- tableView:viewForFooterInSection:はフッターになるViewを指定するメソッドです。
これを実装してリターンにフッターに表示したいViewを返すことで、フッターにそのViewが表示されるようになります。

フッターのViewはUITextViewで作ることにします。

Xibファイルを新規作成します。
名前はFooterView.xibとします。

TextViewを配置してAttributes inspectorから以下のようにプロパティを設定します

  • Text View > Textに任意の文字列
  • Alignment にセンター指定
  • BehaviorのSelectableにチェック(URLを表示する場合)
  • DetectionのLinksにチェック(URLを表示する場合)

footerView.xib

FooterTableViewController.swiftに戻って、- tableView:viewForFooterInSection:を実装します

//FooterTableViewController.swift
override func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
        
    let footerView:UITextView = UINib(nibName: "FooterView", bundle: nil).instantiateWithOwner(self, options: nil)[0] as! UITextView
            
    return footerView
}

解説をすると、Xibファイルをオブジェクトとして生成するには、init(nibName name: String,bundle bundleOrNil: NSBundle?)を実行します。
nibNameにXibファイルの名前、bundleにはここではnilを指定します。
そして、そこから帰ってきたNibのオブジェクトに対して、- instantiateWithOwner:options:を実行します。
第一引数にselfを指定して、オブジェクトのオーナーをselfにします。返ってくるのは配列なので[0]で一番始めの要素を取得しています。
またUITextViewになるように as文でキャストします。

これで、XibファイルからUITextViewを取り出すことができました。

一度実行してみましょう。

footerView

xibのTextViewが表示されているみたいです。
でも高さが足りず一行目の文字が見きれてしまっています。
文字列の高さにフッターの高さを合わせる必要があります。

フッターの高さは同じくUITableViewDelegateのメソッド`

  • tableView:heightForFooterInSection:`が管理しています

このメソッドを実装して、Xibで作ったテキストビューの高さを指定しましょう

override func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
        
    //XibのUITextViewを生成
    let footerView:UITextView = UINib(nibName: "FooterView", bundle: nil).instantiateWithOwner(self, options: nil)[0] as! UITextView
        
    //UITextViewの高さを返す
    return footerView.bounds.height
}

XibからUITextViewを生成して、その高さを返す実装です。
ビルドをしてみましょう

フッターの高さを調整

高さがあってますね！
やりました！

- tableView:titleForFooterInSection:と - tableView:viewForFooterInSection:の関係性

今回使った - tableView:titleForFooterInSection:と - tableView:viewForFooterInSection:は、同じテーブルビューには併用できないみたいです。
優先は- tableView:viewForFooterInSection:が強いので、
こちらを実装したら- tableView:titleForFooterInSection:に実装したものは効果がなくなります。

まとめ

  • テーブルビューのフッターにただ文字を表示したいなら、- tableView:titleForFooterInSection:を実装しよう
  • 中央揃えをしたいなら- tableView:viewForFooterInSection:を使おう！
  • フッタービューの高さも忘れちゃいけない。`
  • tableView:heightForFooterInSection:`でビューの高さを設定しよう！

ソースコード

今回作ったソースコードをGithubにあげておきます。
参考にしてください。

サンプル