[ライブラリ] Eurekaでヘッダーにイメージを表示するには？

はじめに

本ブログに「Eurekaのリストの開始位置の変更方法を知りたい」とのコメントをいただきましたので調査しました。

Eurekaのリストの開始位置（行の表示位置）を変更するには、ヘッダーのサイズで調整することができますので、その方法を説明します。

環境

Xcode：9.4.1
Swift：4.1.2

ヘッダーサイズを変更する方法

通常、セクション（section）には以下のようにテキストを設定します。

form
    +++ Section("タイトル")

このセクションにはヘッダーを入れることができ、高さを指定することが可能です。

まずはシンプルな例を示します。

form
    +++ Section() {
        $0.header = {
            let header = HeaderFooterView<UIView>(.callback({   // (1)
                let view = UIView(frame: CGRect(x: 0, y: 0, 
                    width: self.view.frame.width, height: 300)) // (2)
                view.backgroundColor = .blue    // (3)
                return view
            }))
            return header
        }()
    }
    <<< TextRow() {
        $0.title = "テキスト入力"
        $0.value = "テスト"
}

(1) Headerは HeaderFooterView で作成する必要があります。コールバック関数で UIView を返却する必要があります。

(2) ここでは座標x:0, y:0で、幅をフレーム幅に、高さを300にしています。この高さを変更することで、以降に表示されるリストの開始位置を変更することができます。

(3) UViewの背景色を青に設定しています。

以上で、ヘッダーに高さが300の青いエリアが表示されるようになります。

ヘッダーにイメージを表示する

次に、ヘッダーにイメージを表示する方法を説明します。

先ほど、UIViewを使用してヘッダーを作成しました。UIViewはコンテナとして使用可能ですので、UIViewにUIImageViewを追加してあげれば、イメージを表示することができます。

先ほどのコードを利用して、画像を表示できるようにしたのが以下のコードです。

form
    +++ Section() {
        $0.header = {
            var header = HeaderFooterView<UIView>(.callback({
                let view = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: 300))
                let image1 = UIImage(named: "heli") // (1)
                let imageView = UIImageView(image:image1)   // (2)
                view.addSubview(imageView)  // (3)
                return view
            }))
            return header
        }()
    }
    <<< TextRow() {
        $0.title = "テキスト入力"
        $0.value = "テスト"
}

(1) アセットに登録してある「heli」というイメージを取得しています。

(2) UIImageViewのインスタンスを作成しています。このUIImageViewには(1)で取得したイメージを設定しています。

(3) コンテナのviewに、(2)で作成したUIImageViewを追加します。

以上で、ヘッダーにイメージが表示されるようになります。