2016年12月2日金曜日

[iOS]UITableViewCellにpaddingを実装しようとしてハマった

やりたいこと
リスト表示している項目の間に隙間を作りたい

Androidならxmlで簡単に設定できるから、iOSもstoryboardだけで簡単にできる方法があるのではと探したけど、結局コード書きました。

やったこと1(項目の下だけPadding)


  • UITableViewCellのframeをオーバライドし、setされるときにframe.size.height - padding してframeを更新する
  • tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) で戻り値をCellの高さ + paddingの値で返す

import UIKit

class ListCell : UITableViewCell {

    static let paddingBottom : CGFloat = 20
    static let height : CGFloat = 478 + paddingBottom

    class func getHeight() -> CGFloat {
        return height
    }

    override var frame: CGRect {
        get {
            return super.frame
        }
        set (newFrame) {
            var frame = newFrame
            frame.size.height -= ListCell.paddingBottom
            super.frame = frame
        }
    }
}

class ListViewController: UITableViewController {

    //・・・

    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return ListCell.getHeight()
    }
}

やったこと2(項目の上下にPadding)


  • storyboardのAutoLayoutで、上下に隙間を作るConstainsを追加
  • tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) で戻り値をCellの高さ + paddingの値で返す

import UIKit

class ListCell : UITableViewCell {
    class func getHeight() -> CGFloat {
        return 518
    }
}

class ListViewController: UITableViewController {

    //・・・

    override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return ListCell.getHeight()
    }
}

参考

http://stackoverflow.com/questions/19649144/ios-add-horizontal-padding-to-tableview-cells

Objective-C
http://stackoverflow.com/questions/2539021/how-to-set-the-width-of-a-cell-in-a-uitableview-in-grouped-style

Swift
https://www.reddit.com/r/swift/comments/2fr849/uitableviewcell_with_custom_width_in_swift/?st=iw6l44mk&sh=fd1d9a6e