Change color of row programmatically in WatchKit

Question

I'd like to change the color of a row in a WKInterfaceTable if it has been selected. I've done these steps but don't know how I can go further:

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

    let row = tableView.rowControllerAtIndex(rowIndex) as! TableRowObject

}

I hope someone of you guys can help me to do this.

Dhaval Panchal · Answer 1 · 2015-06-02T11:29:49.690

5

You can change colour as per row selection,

Create IBOutlet of WKInterfaceGroup in rowController and set it to Storyboard with DefaultGroup which is created when you drag Table to storyboard (no need to add new WKInterfaceGroup).

@property (weak, nonatomic) IBOutlet WKInterfaceGroup *rowGroup;

Create a BOOL property to track selection status in rowController.

@property (nonatomic, readwrite) BOOL isSelected;

Add this to didSelectRow,

- (void)table:(WKInterfaceTable *)table didSelectRowAtIndex:(NSInteger)rowIndex {

    TableRowObject *row = [self.interfaceTable rowControllerAtIndex:rowIndex];

    if (row.isSelected) {
        row.isSelected = NO;
        [row.rowGroup setBackgroundColor:[UIColor clearColor]];
    }
    else {
        row.isSelected = YES;
        [row.rowGroup setBackgroundColor:[UIColor blueColor]];
    }
}

edited Jun 02 '15 at 11:29

answered Jun 02 '15 at 08:04

Dhaval Panchal

2,529
1
25
36

This is just a simple didSelectRowAtIndex method and if-else loops So you can convert them to swift. – Dhaval Panchal Jun 04 '15 at 07:39
This no longer works. Xcode will give you a "illegal Configuration - The rowGroup outlet from the MultiPickerInterfaceController to the WKInterfaceGroup is invalid. Outlets cannot be connected to repeating content." – BlueskyMed Jan 26 '19 at 18:27
1

@BlueskyMed I had the same error. I removed the outlets associated with the rowGroup and cleaned my project. Added the outlets again and it worked. I believe the trigger was that I had placed my outlet in multiple places, even though I removed one it continued to cast an error. – Mark Mar 05 '20 at 05:55

score 1 · Answer 2 · answered May 30 '15 at 16:46

You can do this by adding a WKInterfaceGroup to your row controller. Make the group's width and height "relative to container" with a size of 1. This ensures that the group completely fills your row. Then, you can set the background color using the setBackgroundColor: method on WKInterfaceGroup. Add all of the other controls within this new group.

score 1 · Answer 3 · answered Jun 14 '17 at 10:00

@property (weak, nonatomic) IBOutlet WKInterfaceGroup *groupCellContainer;
Create above property in your custom cell for the Group in your cell and connect it with watch interface storyboard.

Add below code in your didSelectRowAtIndex method, this code will set Red background color to selected cell & set Gray color to other cells.
- (void)table:(WKInterfaceTable *)table didSelectRowAtIndex:(NSInteger)rowIndex {
for (int row=0; row < Array.count; row++) {
    CustomCell *customCell = [table rowControllerAtIndex:row];
    if (rowIndex == row) {
        [customCell.groupCellContainer setBackgroundColor:[UIColor redColor]];
    } else {
        [customCell.groupCellContainer setBackgroundColor:[UIColor grayColor]];
    }
}

}

score 0 · Answer 4 · answered May 30 '15 at 12:00

I think you have to set the background colors in Storyboard.

Highly theoretical, never done this myself:

If you have a more dynamic app, your could potentially create two prototype rows and give them ids (Normal, Highlighted). Then use insertRowsAtIndexes(_:) and removeRowsAtIndexes(_:) to "switch" the row against a highlighted one...

Not the best solution, but the only one that comes to mind with WatchKit still being very limited.

Change color of row programmatically in WatchKit

4 Answers4

Linked