前回の続き。今回はセルの間に間隔を開けたい時の説明です。

サンプル: https://github.com/stack3/UICollectionViewSample

サンプルを起動してSpacingを選択すると以下の画面が表示されます。

01

前回のSectionのサンプルにセルの間隔を設けたものになっています。

間隔とセルのサイズの計算

Interface Builderで配置した時、Subview間のピクセル値は通例8pxになっています。今回もこれに従ってセル間の間隔を8pxとしています。

02

間隔が決まったら次に1行にセルをいくつ並べるかを決めます。今回は4つです。4ということは空白が5つ必要です。

03

  • iPhoneの画面幅320px – (8px × 5) = 280px(4つのセルの合計幅)
  • 280px ÷ 4 = 70px(1つのセルの幅)

となります。

STSpacingSampleViewController.xib

間隔の設定はxibファイルで行なっています。

UICollectionViewを選択してSize Inspectorを見ると以下のようになっています。

04

 

Cell Sizeは、先ほど計算したように幅70px、高さはCaption分余分に必要なので86pxにしています。

MinSpacingのFor Cellsがセルの水平方向の間隔、For Linesは垂直方向の間隔。先ほど決めたように8pxを両方に指定します。

06

Section Insetsは、セクションの間隔です。

05

今回はすべて8pxにします。

 

以上、セルの間隔についての説明でした。