How to set left and right margin for UITableView in Swift

0
votes

I am using UITableView inside my controller that displays cells with some informations (title, subtitle and image). I would like to add some padding to the tableView, but I can't find the right solution. This is my code for table view:

private let tableView: UITableView = {
    let tableView = UITableView(frame: .zero, style: .grouped)
    tableView.translatesAutoresizingMaskIntoConstraints = false
    tableView.backgroundColor = .clear
    tableView.separatorStyle = .none
    tableView.allowsSelection = false
    tableView.showsVerticalScrollIndicator = false
    tableView.estimatedRowHeight = 44.0
    tableView.rowHeight = UITableView.automaticDimension
    return tableView
}()

Inside viewDidLoad() I setup constraints for that tableView

NSLayoutConstraint.activate([
    tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    tableView.topAnchor.constraint(equalTo: view.topAnchor),
    tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

Right now my view looks like this:

enter image description here

Now when I try to configure contentInset property inside my tableView closure by adding this:

tableView.contentInset = .init(top: 0, left: 23.5, bottom: 0, right: -23.5)

As you can see it only added space on the left side, but looking at the debug view hierarchy I can say that it moved that contentView to the right side (It's still have the same width as its superview) enter image description here

enter image description here

Info from view debugger. TableView:

<UITableView: 0x7fba82016000; frame = (0 0; 390 844); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x60000023de90>; layer = <CALayer: 0x600000c4b9e0>; contentOffset: {-23.333333333333332, -47}; contentSize: {390, 635.66666666666663}; adjustedContentInset: {47, 23.5, 34, -23.5}; dataSource: <Myapp.WelcomeViewController: 0x7fba81c08f60>>

and First cell:

<UITableViewCellContentView: 0x7fba84021250; frame = (0 0; 390 87); gestureRecognizers = <NSArray: 0x6000002cf900>; layer = <CALayer: 0x600000c2b900>>

TableView has the same width as cell (390 vs 390). How can I add my paddings to the left and right to the tableView, without making constraints on that tableView (I want that area to also be scrollable)

3
iosswiftuitableview
Have you tried changing the right inset to 23.5 instead of -23.5? – boa_in_samoa
@boa_in_samoa I have already tried with tableView.contentInset = .init(top: 0, left: 23.5, bottom: 0, right: 23.5), and with that configuration new problem appears. TableView is also scrollable in vertical and horizontal directions, which I don't want because padding to the right goes behind the view +23.5. – ShadeToD
@ShadeToD - I don't think you'll get what you want that way... it sets the tableView's scrollView inset. You probably need to set the cell's .contentView.layoutMargins, using a positive value for both Left and Right insets. – DonMag
I put this method inside cellForRowAt() and it works! – ShadeToD

3 Answers

2
votes

You can do this either by setting the .layoutMargins on the cell's contentView (either in the cell class itself or in cellForRowAt:

cell.contentView.layoutMargins = .init(top: 0.0, left: 23.5, bottom: 0.0, right: 23.5)

or on the table view itself:

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.layoutMargins = .init(top: 0.0, left: 23.5, bottom: 0.0, right: 23.5)
    // if you want the separator lines to follow the content width
    tableView.separatorInset = tableView.layoutMargins
}
0
votes

You may try this:

Add the constant while adding the constraints

NSLayoutConstraint.activate([
tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
   tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 20),
tableView.topAnchor.constraint(equalTo: view.topAnchor),
tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
0
votes

Try this

override var frame: CGRect {
        get {
            return super.frame
        }
        set (newFrame) {
            var frame = newFrame
            frame.origin.x += 10
            frame.size.width -= 2 * 10
            super.frame = frame
        }
    }