LoginSignup
13
14

More than 5 years have passed since last update.

AutolayoutでCellの横幅いっぱいに画像を複数枚並べる

Last updated at Posted at 2016-02-12

やること

複数デバイスサイズでも1枚のstoryboardで横幅いっぱいで同じアスペクト比で画像を並べる

対応バージョン

  • iOS8以上

セルに画像を設置

均等に、いい感じに並べる

起点となる左の画像にオートレイアウトを設定する

d99c9fcc-f21e-3f20-0355-d68b2ffcdd85.png

設定する条件

  • Top Space 上の余白
  • Leading Space 左の余白
  • AspectRate 画像の比率

真ん中の画像にオートレイアウトを設定する

b6f25361-afb7-1cd0-fb0a-04b960304be6.png

設定する条件

  • Align Top 左の画像と合わせる
  • Align Bottom 左の画像と合わせる
  • Leading Space 左の余白
  • AspectRate 画像の比率

右の画像にオートレイアウトを設定する

ccbf8617-8d9f-38b8-84f2-ec0e0d8aebc8.png

  • Tailing Space 右の余白
  • Align Top 左の画像と合わせる
  • Align Bottom 左の画像と合わせる
  • Leading Space 左の余白
  • AspectRate 画像の比率

 出来た(けど高さがずれてる)

スクリーンショット 2016-02-12 18.45.28.png

下の余白を設定する

a97a253b-9efd-137e-df52-1746ba3f7fbb.png

BottomSpace この時Priorityを750(Height)にしないとトンデモナイことになる

コード側の対応

    func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return UITableViewAutomaticDimension
    }

    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return UITableViewAutomaticDimension
    }

完璧!!

スクリーンショット 2016-02-12 18.46.53.png

おさらい

  1. Cellに好きにレイアウトする
  2. 一番下にあるオブジェクトからContentViewに対してBottomをPriority750で指定する
  3. delegateでUITableViewAutomaticDimensionを返す

サンプルコード

yo1106/TableViewCellAutolayoutSample

参考リンク

13
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
14