Dynamic Shapes in UITableView Cell (Swift) - ios

Question

I am new to Swift and having fits with the UIView class. I have a TableView (below) with a View object (left) and Label (right). The table itself works fine and the labels appear as expected.
Where I am having trouble is that I want the View object next to the label to contain various shapes and colors depending on the values in the array that support the table...
var tArray = [["Row 1","Row 2", "Row 3", "Row 4", "Row 5"],
["Circle","Circle","Square","Square","Diamond"],
["Blue","Red","Green","Red","Purple"]]
So next to "Row 1", I want to have a blue circle, etc. I have linked the View object to a custom class. But I need an approach to dynamically create the shapes and fill with appropriate colors.
In the TableViewController, I have the following, which is calling the Symbol class, and I am getting back a black circle (I hard-coded circle for now)...
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)
cell.cellLabel.text = tArray[0][indexPath.row]
cell.cellSymbol = Symbol.init()
return cell
}
In my custom Symbol class:
import UIKit
class Symbol: UIView {
var inColor: String
var inShape: String
init (in_color: String, in_shape: String) {
self.inColor = in_color
self.inShape = in_shape
super.init(frame: CGRect(x: 0, y: 0, width: 70, height: 70))
}
override func drawRect(rect: CGRect) {
let path = UIBezierPath(ovalInRect: rect)
switch self.inColor {
case "Green" : UIColor.greenColor().setFill()
case "Blue" : UIColor.blueColor().setFill()
case "Yellow" : UIColor.yellowColor().setFill()
case "Cyan" : UIColor.cyanColor().setFill()
case "Red" : UIColor.redColor().setFill()
case "Brown" : UIColor.brownColor().setFill()
case "Orange" : UIColor.orangeColor().setFill()
case "Purple" : UIColor.purpleColor().setFill()
case "Grey" : UIColor.darkGrayColor().setFill()
default: UIColor.blackColor().setFill()
}
path.fill()
}
required init?(coder aDecoder: NSCoder) {
self.inColor = ""
self.inShape = ""
super.init(coder: aDecoder)
}
override init(frame: CGRect) {
self.inColor = ""
self.inShape = ""
super.init(frame: frame)
}
}
I may be going about this all wrong and am open to other approaches entirely. In order to compile, I had to add the required init? and override init(frame: CGRect) entires. I also had to put in the initialization of the self.inColor and .inShape to compile, but since I'm not passing in the parameters to those, I have nothing to assign.
So what I get is a black circle every time. I hard-coded circle for now to keep it simple. The switch self.inColor is nil every time, so it is going down to the default case.
Any suggestions would be greatly appreciated!!!!

Answer 1

When you set the cellSymbol, you are creating a new instance of the Symbol class. You never modify any of the properties of cellSymbol, so it is always black.
Try:
cell.cellSymbol.inColor = self.tArray[2][indexPath.row]

Answer 2

The "always black" error in your code has been addressed by https://stackoverflow.com/a/35049741/218152. Below are suggested improvements.
#IBInspectable
Less code, more features
Replace your entire Symbol class with this:
#IBDesignable class Symbol: UIView {
var color = UIColor.blackColor()
#IBInspectable var inColor: String = "Black" {
didSet {
switch inColor {
case "Green" : color = UIColor.greenColor()
case "Blue" : color = UIColor.blueColor()
case "Yellow" : color = UIColor.yellowColor()
case "Cyan" : color = UIColor.cyanColor()
case "Red" : color = UIColor.redColor()
case "Brown" : color = UIColor.brownColor()
case "Orange" : color = UIColor.orangeColor()
case "Purple" : color = UIColor.purpleColor()
case "Grey" : color = UIColor.darkGrayColor()
default: color = UIColor.blackColor()
}
}
}
override func drawRect(rect: CGRect) {
color.setFill()
let path = UIBezierPath(ovalInRect: rect)
path.fill()
}
}
Use it just the same way you would use the previous one (cell.cellSymbol.inColor = ...). It will have the advantage of also being visually editable from Interface Builder. It also does not require special initialization (no init).
This implementation has the added advantage to accept a UIColor directly, as in cell.cellSymbol.color = ...
Further improvements include using the tintColor instead of creating your own instance, case-insensitive colors, enum instead of names.

Answer 3

Thanks to #SwiftArchitect for most of this. I added in the shapes portion. As #SwiftArchitect noted, there are other improvements to be made, but it works perfectly!
import UIKit
#IBDesignable class Symbol: UIView {
var color = UIColor.blackColor()
#IBInspectable var inShape: String = "Circle"
#IBInspectable var inColor: String = "Black" {
didSet {
switch inColor {
case "Green" : color = UIColor.greenColor()
case "Blue" : color = UIColor.blueColor()
case "Yellow" : color = UIColor.yellowColor()
case "Cyan" : color = UIColor.cyanColor()
case "Red" : color = UIColor.redColor()
case "Brown" : color = UIColor.brownColor()
case "Orange" : color = UIColor.orangeColor()
case "Purple" : color = UIColor.purpleColor()
case "Grey" : color = UIColor.darkGrayColor()
default: color = UIColor.blackColor()
}
}
}
override func drawRect(rect: CGRect) {
var path = UIBezierPath()
switch shape {
case "Circle": path = UIBezierPath(ovalInRect: rect)
case "Square" : path = UIBezierPath(roundedRect: rect, cornerRadius: 5.0)
case "Triangle" :
path.moveToPoint(CGPoint(x: frame.width / 2, y: 0))
path.addLineToPoint(CGPoint(x: 0, y: frame.height))
path.addLineToPoint(CGPoint(x: frame.width, y: frame.height))
case "Diamond" :
path.moveToPoint(CGPoint(x: frame.width / 2, y: 0))
path.addLineToPoint(CGPoint(x: 0, y: frame.height / 2))
path.addLineToPoint(CGPoint(x: frame.width / 2, y: frame.height))
path.addLineToPoint(CGPoint(x: frame.width, y: frame.height / 2))
default: print("unknown shape")
}
color.setFill()
path.fill()
}
}