UIBezierPath fill with an offset in a custom UIView in a UITableViewCell

Question

I have a custom UIView that draws a filled rounded rect in the view. The issue is when I place the view in my UITableViewCell and place constraints, when ran, it doesn't draw the rounded rect in the spot I placed it.

Here are the images for reference: http://imgur.com/a/XwCHS

The first 2 are in Xcode, while the 3rd is when ran on the iPhone 5 emulator.

My custom UIView:

import UIKit

@IBDesignable class AlertRoundedView: UIView {

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
    override func drawRect(rect: CGRect) {
        // Drawing code

        let color : UIColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1)

        color.setFill()

        let path : UIBezierPath = UIBezierPath(roundedRect: CGRectInset(self.frame, 0, 0), cornerRadius: 20)

        path.fill()

    }


}

My TableViewController (Just used for testing right now):

import UIKit

class AlertsViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{

    @IBOutlet weak var emptyAlertsView: UIView!
    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

        var alerts : [Int] = [4, 6, 3, 4]

        if(alerts.count > 0){
            //Show table
            tableView.hidden = false
            emptyAlertsView.hidden = true

            tableView.delegate = self
            tableView.dataSource = self
            tableView.allowsSelection = false
            tableView.reloadData()
        }else{
            //Show empty view
            tableView.hidden = true
            emptyAlertsView.hidden = false
        }



    }

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


    // MARK: - Table view data source

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return 4
    }


    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("AlertCell", forIndexPath: indexPath)
        print(cell)
        // Configure the cell...

        return cell
    }
}

Answer 1

It may be that your constraints are not set correctly. Try laying out the rounded rect in Interface Builder and setting constraints before running.

1. Clear all existing constraints on the rounded rect
2. Layout the rounded rect on screen the way you want it
3. Add Missing Constraints

Give that a shot.

Answer 2

replace

let path : UIBezierPath = UIBezierPath(roundedRect: CGRectInset(self.frame, 0, 0), cornerRadius: 20)

with

let path : UIBezierPath = UIBezierPath(roundedRect: CGRectInset(rect, 0, 0), cornerRadius: 20)

See if that works