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

Question

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

}

I want it like this

You need to go through all the rows and set their isSelected property accordingly. In your RowController class , implement the get , set property for isSelected and in its set property change the bg color based on the newValue. Once you done with that , in your didSelectRowAtIndex, loop through all rows, if its is the current selected row set isSelected property to TRUE and for rest set the proper to FALSE. — Muneeba, Jan 18 '16 at 05:27
Hi. I'm pretty new so could you please show me an example using my code? I'm comfortable with syntax but not fully comfortable with logic yet so I would like an opportunity to see how it's done in code. After that I can mark your answer as correct. Btw, this sounds a bit different than how it's done in iOS. Is it? Thanks — TokyoToo, Jan 19 '16 at 19:53

score 0 · Accepted Answer · answered Jan 20 '16 at 07:24

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
}

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

1 Answers1