How to increase the width of custom cells in UITableView

Question

I have created the UITableView with the custom UITableViewCell. But the problem which I am getting is the width of the cells is not the frame width though I have assigned in the CGReact. Please have a look over my code :

CustomTableViewCell Class:

import UIKit

class CustomTableViewCell: UITableViewCell {

    lazy var backView : UIView = {
        let view = UIView(frame: CGRect(x: 10, y: 6, width: self.frame.width, height: 76))
        view.backgroundColor = .red
        view.layer.applySketchShadow()
        return view
    }()

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    lazy var iconTime : UIImageView = {
        var object = UIImageView(frame: CGRect(x: 10, y: 54, width: 12, height: 12))
        object.image = #imageLiteral(resourceName: "clock")
        return object
    }()

    lazy var notification : UILabel = {
        var object = UILabel(frame: CGRect(x: 10, y: 7, width: backView.frame.width, height: 40))
        object.adjustsFontSizeToFitWidth = true
        object.minimumScaleFactor = 0.5
        object.font = object.font.withSize(28.0)
        object.numberOfLines = 3
        return object
    }()

    lazy var notificationTime : UILabel = {
        var object = UILabel(frame: CGRect(x: 30, y: 40, width: backView.frame.width, height: 40))
        object.adjustsFontSizeToFitWidth = true
        object.minimumScaleFactor = 0.5
        object.font = object.font.withSize(12.0)
        return object
    }()

    override func layoutSubviews() {
        contentView.backgroundColor = UIColor.clear
        backgroundColor = UIColor.clear
        backView.layer.cornerRadius = 5
        backView.clipsToBounds = true
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        addSubview(backView)
        [notification, notificationTime, iconTime].forEach(backView.addSubview(_:))
    }

}

And my view controller as follows :

import UIKit

class UserModal {
    var tableView = UITableView()
    var notification: String?
    var notificationTime : String?

    init(notification: String, notificationTime: String) {
        self.notification = notification
        self.notificationTime = notificationTime
    }
}

class newNotificationController : UIViewController {
    var tableView = UITableView()
    var userMod = [UserModal]()

    override func viewDidLoad() {
        super.viewDidLoad()
        setTableView()

        userMod.append(UserModal(notification: "Data ", notificationTime: "Time"))
        userMod.append(UserModal(notification: "This is some Notification which needs to be populated in the Grid view for testing but lets see what is happening here!! ", notificationTime: "12-12-1212 12:12:12"))
        userMod.append(UserModal(notification: "Data ", notificationTime: "Time"))
    }

    func setTableView() {
        tableView.frame = self.view.frame
        tableView.backgroundColor = UIColor.clear
        tableView.delegate = self
        tableView.dataSource = self
        tableView.separatorColor = UIColor.clear
        self.view.addSubview(tableView) 
        tableView.register(CustomTableViewCell.self, forCellReuseIdentifier: "cell")
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        navigationController?.setNavigationBarHidden(true, animated: animated)
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        navigationController?.setNavigationBarHidden(false, animated: animated)
    }

}

extension newNotificationController: UITableViewDelegate , UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return userMod.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? CustomTableViewCell else { fatalError("Unable to populate Notification History")}
        cell.notification.text = userMod[indexPath.row].notification
        cell.notificationTime.text = userMod[indexPath.row].notificationTime
        return cell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 85
    }

}

Please have a look over the result:

I am not getting it why the width of my cells is the width of the frame. Any help will be highly appreciated. Thanks!!

Answer 1

The problem is in this code is frame width, somehow the width of the self is not the width of a device, so because of this, you are facing this issue.

lazy var backView : UIView = {
    let view = UIView(frame: CGRect(x: 10, y: 6, width: self.frame.width, height: 76))
    view.backgroundColor = .red
    view.layer.applySketchShadow()
    return view
}()

To resolve this issue you can set frame like this

let view = UIView(frame: CGRect(x: 10, y: 6, width: UIScreen.main.bounds.size.width - 10, height: 76))

Answer 2

You set the width your view

UIView(frame: CGRect(x: 5, y: 6, width: self.frame.width - 10, height: 76))

tableView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height)

Answer 3

you need to give constraint to the tableview. Top, Leading, Trailing, Bottom.

Answer 4

put this tableView.translatesAutoresizingMaskIntoConstraints = false line in your function

func setTableView() {
        tableView.frame = self.view.frame
        tableView.backgroundColor = UIColor.clear
        tableView.delegate = self
        tableView.dataSource = self
        tableView.separatorColor = UIColor.clear
        self.view.addSubview(tableView) 
        tableView.translatesAutoresizingMaskIntoConstraints = false   //add this line
        tableView.register(CustomTableViewCell.self, forCellReuseIdentifier: "cell")
    }

and change width: UIScreen.main.bounds.size.width - 10 it.

thanks..