テーブルビューの応用(1) 表のスタイルを変更する
macOS Mojava 10.15.7 / Xcode 11.3.1 / Swift 5.0
本章では次のことを行う。
・行の高さを変更する
・文字のサイズ、色、フォントを変更する
・罫線をひく
・水平方向の表示位置を調整する
・垂直方向の表示位置を調整する
・選択行の外観を変更する
・列見出しのサイズ、色、フォントを変更する
以上全てに対応した完成形は次のようになる。
データ構造などの基本的な仕様は、テーブルビューの基本と同じである。
![[image1.png]](image1.png)
行の高さを変更する
行の高さをデフォルトの 17ピクセルから 40ピクセルに変更するために、次のプロパティを変更する。
・NSTableVIewオブジェクトの高さ(rowHeightプロパティ)
・NSTextFieldオブジェクトの高さ(frame.sizeの heightプロパティ)
・NSTextFieldオブジェクトの縦方向の表示位置の起点(frame.originの yプロパティ)
増分だけ下方向にずらす。
文字のフォント、サイズ、色、水平方向の表示位置を変更する
属性付き文字列(NSAttributedStringオブジェクト)を作成し、NSTextFieldオブジェクトの attributedStringValueプロパティに代入する。あとはテーブルビューが自動的に表示する。
列1から列3の文字のサイズとフォントを変更し、列3は文字の色も変更する。
罫線をひく
これ以降の処理は、NSTextFieldクラスのサブクラスを作成し、その中で NSBezierPathオブジェクトにより図形の描画を行ったり、drawメソッドをオーバーライドし文字列を表示したりする。サブクラスを作成することにより、独自の操作をかなり自在に行うことができる。本例ではサブクラスとして UANextFieldクラスを定義する。作成したサブクラスを利用するには、インタフェースビルダーで TableViewCellオブジェクトのクラスをこれに変えれば良い。
![[image2.png]](image2.png)
NSBezierPathオブジェクトで、テキストフィールドの矩形に枠線を描画する。moveメソッド、lineメソッドを使って枠線ではなく、直線を引いて罫線をひくこともできる。
なお、セル間の間隔をゼロにして罫線の間に隙間ができないようにする。デフォルでは、横方向で 3ピクセル、縦方向で 2ピクセルの間隔が設定されている。
垂直方向の表示位置を調整する
テキストフィールドに文字列を表示するとデフォルトでは上端に表示される。本例では、これを中央に表示するようにしている。
文字列の垂直方向の位置の調整は、サブクラスの中で、drawメソッドをオーバーライドすることで可能である。メソッドの in引数に文字列を表示する矩形(NSRect構造体)を指定するが、これの y方向の起点を変更すれば垂直方向の調整ができる。属性付き文字列の高さは size関数で取得できるので、これをもとに中央に表示するための位置を算出する。
また、細かい話だが、文字列を左揃えにしたとき、左の罫線から文字列の先頭までほとんど隙間がなく、見た目があまり良くない。
文字列を右揃えにしたとき、文字列の末尾と右の罫線との間でも同様。これを改善するために、文字列の先頭または末尾に若干の余白(いわゆる margin)を設定するようにしてみた。
なお、余白を設定するのは左右揃えの場合だけで中央揃えのときは何もしない。これは、属性付き文字列から paragraphStyle属性を読み込み TextAlignmentの設定値から判定している。
選択行の外観を変更する
本例では、選択行の背景色を黄色にしている。NSTableRowViewクラスのサブクラスを作成し、drawSelectionメソッドをオーバーライドする。ビューに対する描画であれば、できることは何でもできる。
次のデリゲートメソッドを実装する。サブクラスのオブジェクトを作成して戻り値として返す。
なお、デフォルトの動きでは、青い選択行の矩形とベースのテーブルビューの行の矩形が微妙にずれていたが、この対応をとるときれいに合う。
列見出しの文字のフォント、サイズ、色を変更する
文字のサイズを大きくし、フォントを変え、水平方向の表示位置を中央にした。headerCellオブジェクトの fontプロパティへの変更がなぜか反映されないので、属性付き文字列を作成し、attributedStringValueプロパティに設定するようにした。