Custom design of UITableView in iOS

Question

I'm practicing my Swift coding and since I'm a designer I wanted to make custom design for my app. It is simple to do list app. It has 2 views. First is TableView with my to do items, and second view is about adding a new item.

My cell is rounded and has border color. How can I stylize a cell? I came across so many tuts but I haven't managed to find that answers my question.

I heard it can be done by stylizing prototype cell, but I don't really know how. I google everywhere and nothing I've found explains my question.

Here is my design:

Home Screen of To Do App

Can you guide me, please?

My code so far:

import UIKit

class FirstViewController: UIViewController, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    // Delete functionality
    func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
        if editingStyle == UITableViewCellEditingStyle.Delete {
            listItems.removeAtIndex(indexPath.row)
        }
        tableView.reloadData()
    }

    // This function calculates how many rows our table has according to listItems array
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return listItems.count
    }

    // Data in cells
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "cell")
        cell.textLabel?.text = listItems[indexPath.row] as String
        cell.backgroundColor = UIColor.clearColor()
        cell.layer.borderWidth = 2.0
        cell.layer.borderColor = UIColor.whiteColor().CGColor
        cell.layer.cornerRadius = 15

        tableView.separatorColor = UIColor.clearColor()

        // self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 10, 0);
        return cell
    }

    override func viewDidAppear(animated: Bool) {
        // Refreshing our table
        tableView.reloadData()
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        listItems = savedItems.arrayForKey("UserInputs") as! [NSString]
        tableView.reloadData()

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}
    enter code here

I've set all options od background color to blue and for tint to be white and when I go into simulation, font of cell text is black. If somebody know how to fix this, let me now.

Mat · Accepted Answer

To Obtain that result your have to put a containingView inside a custom tableViewCell and give the radius and the white color to that containingView rather than the cell.

Start from the storyboard and add your containingView and label (I don't know what font you used):

I have decided to add a view on top of your tableView to get that result but I think you can use also titleForHeaderInSection and willDisplayHeaderView to get the same result.

Your ViewContollerScene should look like this:

But you also have to make sure that you assign the constraint to your containingView otherwise you won't get that result:

then make sure that you set the identifier

and the customClass that you created for your cell

Here the code:

ToDoCustomTableViewCell

import UIKit
import QuartzCore

class ToDoCustomTableViewCell: UITableViewCell {

@IBOutlet weak var containingView: UIView!
@IBOutlet weak var customLabel: UILabel!

  override func awakeFromNib() {
    super.awakeFromNib()

    containingView.layer.borderWidth = 2
    containingView.layer.borderColor = UIColor.whiteColor().CGColor
    containingView.layer.cornerRadius = 20
    containingView.layer.masksToBounds = true

  }

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

    // Configure the view for the selected state
  }

}

and ViewController

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{

var listItems = ["item One" ,"item One","item One","item One","item One","item One" ]


@IBOutlet weak var tableView: UITableView!
// Delete functionality
func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
    if editingStyle == UITableViewCellEditingStyle.Delete {
        listItems.removeAtIndex(indexPath.row)
    }
    tableView.reloadData()
}

// This function calculates how many rows our table has according to listItems array
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return listItems.count
}

// Data in cells
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
     let cell = tableView.dequeueReusableCellWithIdentifier("customCell", forIndexPath: indexPath) as! ToDoCustomTableViewCell
     cell.customLabel.text = listItems[indexPath.row]




    return cell
}


override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

}

}

final result should be this. If you want to change the distance between your containingViews you just have to reduce the distance from the contentView. Just keep in mind that what your are seeing are the borders of your containingViews not your cell borders and that's the reason why you have to get rid of the cell separator.

Finally you can find the project on gitHub

Custom design of UITableView in iOS

Answers (2)

Related Questions