NativeScriptのListView(iOS)でセル選択時の背景色をカスタムする

何がしたいのか

NativeScriptのListViewでは、セルをタップすると、背景がグレーになる。
この色を変更したい。

テスト環境

NativeScript v3.3 + Angular 4
iOS 11のエミュレーターで動作を確認

ダメだった方法

CSSをいじって、ListView:hover とか ListView:highlighted といった擬似クラスを付けてみたが、見事にすべて動かなかった。擬似クラスでは、タップ時の背景色を変えることはできないようだ。

そもそも、iOSのネイティブアプリではどうやるのか

NativeScriptで困ったときには、ネイティブのノウハウを調べるのが早道だ。
iOSのUITableViewでセルの背景色を変更する方法を調べると、色々出てくる。

http://furodrive.com/2016/01/change_uitableviewcell_selection_color/
https://stackoverflow.com/questions/18823808/uitableviewcell-change-selectedbackgroundview-alpha

背景色用のUIViewを生成して、セルオブジェクトの selectedBackgroundView というプロパティに、そのUIViewをセットすれば良さそうである。実際に試したところ、以下の方法で背景色を変えることができた。

うまくいった方法

component.html

        <ListView [items]="items" (itemLoading)="onItemLoading($event)">
            <ng-template let-item="item" let-i="index">
            </ng-template>
        </ListView>

component.ts

    onItemLoading(args: ItemEventData){
        // iOS: セルをタップ時の背景をうすいグレーに設定
        if ( args.ios ) {
            let view : UIView = UIView.alloc().init();
            view.backgroundColor = new Color(10, 0, 0, 0).ios;
            let cell = <UITableViewCell>args.ios;
            cell.selectedBackgroundView = view;
        }
    }

おわりに

問題が起きた時、ネイティブアプリ開発のノウハウが活かせるのがNativeScriptの素晴らしいところだ。ネイティブとのブリッジは少々難解な部分もあるが、使えると確実に出来ることの幅が広がる。以下の公式ドキュメントも参考になる。