post Image
【Xcode】UITableViewの区切り線のすきまについて

すきまがあるのがデフォルトです

つい先日知ったのですが、テーブルビューの区切り線は両端にすきまがあいています。

自分で開発したパンダクリンARでもテーブルビューをつかってるのに、まったく気がついていませんでした。

パンダクリンAR.png

あらためてアップルさんのアプリを見てみると、コンテンツの配置にあわせて区切り線の長さを調整しています。

というわけで、今回はテーブルビューの区切り線のすきまについて調べてみました。

すきまには二種類あります

調べてみると、じつは二種類のすきまがあることがわかりました。

ひとつがcellLayoutMarginsFollowReadableWidthで、もうひとつがseparatorInsetです。

それでは、二種類のすきまの正体を、順番に見ていきましょう。

cellLayoutMarginsFollowReadableWidthとは

まずはcellLayoutMarginsFollowReadableWidthです。

アップルの公式リファレンスによるとつぎのように説明されています。

A Boolean value that indicates whether the cell margins are derived from the width of the readable content guide.

テーブルビューのセルのマージンをreadable content guideの幅によって変更するかしないかを示すBool型のプロパティとのことです。この説明だけではわかりにくいので、実際の例を見てみましょう。

cellLayoutMarginsFollowReadableWidthの設定によるちがい

下のスクリーンショットをご覧ください。

IMG_0209 2.PNG

画面の上半分にあるテーブルビューが、cellLayoutMarginsFollowReadableWidth = trueです。そして、下半分のテーブルビューがfalseです。

trueの場合に、両端のマージンがおおきくとられていることがわかります。その理由は、readable content guideという名前のとおり、(とくに文章のコンテンツを)読みやすくするためのガイドだからです。

WWDC2015のGetting Started with Multitasking on iPad in iOS 9では、つぎのようなサンプルが紹介されています。

スクリーンショット 2017-11-18 22.29.52.png

このように、マージンをおおきくとって画面の真ん中にコンテンツを寄せることで、iPadのように広い画面でも視線をおおきく動かさずに読むことができます。

余談ですがreadable content guideはUIViewのAPIです。

スクリーンショット 2017-11-18 22.28.24.png

このような使い方のサンプルが、上であげたセッションで紹介されているので、興味がある方はご覧ください。

cellLayoutMarginsFollowReadableWidthを設定する方法

cellLayoutMarginsFollowReadableWidthをコードで設定する場合は、以下のようにviewDidLoadなどでtrueを代入します。

class ViewController: UIViewController, UITableViewDataSource {

    @IBOutlet weak var firstTableView: UITableView!
    @IBOutlet weak var secondTableView: UITableView!

    let firstData = ["dog", "cat", "lion"]
    let secondData = ["chicken", "robin"]

    override func viewDidLoad() {
        super.viewDidLoad()

        firstTableView.dataSource = self
        secondTableView.dataSource = self

        firstTableView.cellLayoutMarginsFollowReadableWidth = true
    }

    以下略
}

ストーリーボードで設定する場合は、TableViewのサイズインスペクターでFollow Readable Widthにチェックを入れます。

スクリーンショット 2017-11-18 18.55.27.png

separatorInsetとは

つぎはseparatorInsetです。

先ほどとおなじく、アップルの公式リファレンスによると、つぎのように説明されています。

Specifies the default inset of cell separators.

セルの区切り線のデフォルトインセットとのことです。

インセットは、はめ込みや挿入という意味なので、セルの区切り線にすきまをはめ込むというような意味でしょうか。readable content guideはコンテンツを読みやすくするためのマージン(余白)でしたが、インセットはコンテンツをそろえるためのすきまです。

たとえば、App Storeアプリをご覧ください。

App Store.png

コンテンツのサイズにあわせて、区切り線の長さがかわって縦のはしがそろっています。このように、そろえるためのすきまをはめ込むのがSeparator Insetなのです。

Separator Insetを設定する方法

Separator Insetをストーリーボードで設定してみましょう。

テーブルビューのアトリビュートインスペクターに、Separator Inset という設定があります。

こちらが初期値ではAutomaticになっています。この設定だと左端にすきまができるので、クリックしてCustomを選んでみましょう。

そうすると、LeftRightという項目が表示されます。よくみると、Left15になっています。これが左端のすきまの正体だったんですね。

スクリーンショット 2017-11-18 23.02.54.png

ためしにLeft0にしてみましょう。

実行すると、下のスクリーンショットのようになりました。

IMG_0213 2.PNG

画面の上半分のテーブルビューがAutomaticで、下半分がCustomLeft0にしています。下半分のテーブルビューは、左端のすきまがなくなっていますね。

コードで設定する場合は、以下のようにテーブルビューのseparatorInsetUIEdgeInsetsを代入します。

class ViewController: UIViewController, UITableViewDataSource {

    @IBOutlet weak var firstTableView: UITableView!
    @IBOutlet weak var secondTableView: UITableView!

    let firstData = ["dog", "cat", "lion"]
    let secondData = ["chicken", "robin"]

    override func viewDidLoad() {
        super.viewDidLoad()

        firstTableView.dataSource = self
        secondTableView.dataSource = self

        secondTableView.separatorInset = UIEdgeInsetsMake(0, 3, 0, 11)
    }

    以下略
}

上の例は、Left3Right11です。左右とも0にする場合はUIEdgeInsets.zeroを使って、secondTableView.separatorInset = UIEdgeInsets.zeroのように書くこともできます。

UIEdgeInsetsは上下左右の指定ができますが、separatorInsetでは左右の値だけが使用されます。また、アラビア語などのように、横書き文を右から左に表示する言語の場合は、自動的に左右の値を反転してくれるそうです。

言いたいだけのまとめ

すきま時間の活用など、現代人にとってすきまは非常に重要な要素となっています。

また、神は細部に宿るともいいますので、テーブルビューのすきまもおろそかにせず、しっかりとインセットしていきたいものですね。


『 Swift 』Article List