Search code examples
swiftwatchkitwatchos-2

WatchOS2 - How to make all row groups or each row group a different color when selected?


I'm trying to make it so a row (a group in a row) changes to purple when clicked and when a new row is clicked it turns purple and the previous one reverts back to the default OS color.

When I select a row it turns purple correctly but when I tap another row the previous row doesn't revert to the normal black row.

I'd also like to take it a step further and make the 5 rows each turn a different color. With each row group reverting back to the default watchOS black color when a new row is selected.

It's interesting because the default color doesn't seem to be dark grey or black. Black is essentially the same as clear since the main view bg is black. Dark grey is lighter than the default.

class TableInterfaceController: WKInterfaceController {

@IBOutlet var tableOutlet: WKInterfaceTable!

override func awakeWithContext(context: AnyObject?) {
    super.awakeWithContext(context)

    let arrayOfObjects = ["ORANGE","PURPLE","BLUE","GRAY","YELLOW"]

    tableOutlet.setNumberOfRows(arrayOfObjects.count, withRowType: "row")

    for (var i = 0; i < arrayOfObjects.count; i++) {

        let row = tableOutlet.rowControllerAtIndex(i) as? RowController
        let labelValue = arrayOfObjects[i]

        row?.labelOutlet.setText(labelValue)   
    } 
}

override func table(table: WKInterfaceTable, didSelectRowAtIndex rowIndex: Int) {

    let row = tableOutlet.rowControllerAtIndex(rowIndex) as? RowController

    row?.groupOutlet.setBackgroundColor(UIColor.purpleColor())

    if (row!.isSelected) {
        row!.isSelected = false
        row?.groupOutlet.setBackgroundColor(UIColor.blackColor())

    }
    else {
        row?.isSelected = true
        row?.groupOutlet.setBackgroundColor(UIColor.purpleColor())
    }
}


class RowController: NSObject {
@IBOutlet var labelOutlet: WKInterfaceLabel!
@IBOutlet var groupOutlet: WKInterfaceGroup!
var isSelected : Bool = false

}

enter image description here

I want it like this

enter image description here


Solution

  • You need to implement the following changes.

    let arrayOfObjects = [["text":"ORANGE", "color":UIColor.orangeColor(),"status":false] as NSMutableDictionary ,["text":"PURPLE", "color":UIColor.purpleColor(),"status":false] as NSMutableDictionary,["text":"BLUE", "color":UIColor.blueColor(),"status":false] as NSMutableDictionary,["text":"GRAY", "color":UIColor.grayColor(),"status":false] as NSMutableDictionary,["text":"YELLOW", "color":UIColor.yellowColor(),"status":false] as NSMutableDictionary];
    
    override func awakeWithContext(context: AnyObject?) {
        super.awakeWithContext(context)
    
        tableOutlet.setNumberOfRows(arrayOfObjects.count, withRowType: "row")
    
        for (var i = 0; i < arrayOfObjects.count; i++) {
    
            let row = tableOutlet.rowControllerAtIndex(i) as? RowController
            row?.updateData(arrayOfObjects[i] as NSMutableDictionary);
        }
    
    }
    
    override func table(table: WKInterfaceTable, didSelectRowAtIndex rowIndex: Int) {
    
        let selectedRow = tableOutlet.rowControllerAtIndex(rowIndex) as? RowController
    
        for (var i = 0; i < arrayOfObjects.count; i++) {
    
            let row = tableOutlet.rowControllerAtIndex(i) as? RowController
    
            //-- 
            let data = arrayOfObjects[i] as NSMutableDictionary
            data["status"] = (row == selectedRow);
    
            row?.updateData(arrayOfObjects[i] as NSMutableDictionary);
        }
    }
    
    
    class RowController: NSObject {
    
    @IBOutlet var labelOutlet: WKInterfaceLabel!
    @IBOutlet var groupOutlet: WKInterfaceGroup!
    
       func updateData(data:NSMutableDictionary){
    
        let labelValue = data["text"] as! String
        let color = data["color"] as! UIColor
        let status = data["status"] as! Bool
    
        //--
        self.labelOutlet.setText(labelValue)
        self.groupOutlet.setBackgroundColor(status ? color :  UIColor.blackColor());
    
       }//F.E
    }