How to implement the icon radio group?

Question

I want to implement a radio group with icons representing themselves. And I've found the documentation from apple:

Icon Radio Buttons

You can also have a radio button that’s an icon button; that is, one that’s primarily identified by its icon and has little or no text. If the button’s off, it appears to be sticking in. If the button’s on, it appears to be pressed in. (An icon button cannot display the mixed state.)

You can create an group of icon radio buttons in either Interface Builder or programmatically. If you use Interface Builder, start with a matrix of push buttons. If you create it programmatically, create an matrix of buttons. Then change the matrix’s tracking mode to NSRadioModeMatrix. Change the buttons’ types to NSPushOnPushOffButton, their image positions to NSImageOnly, their bezel types to a square bezel type. Finally set their images to what you want.

So, I wrote the following code:

// self.matrix is bound in IB whose tracking mode is NSRadioModeMatrix
NSArray *cellArray = [self.matrix cells];
// Set the button type to NSPushOnPushOffButton
[[cellArray objectAtIndex:0] setButtonType:NSPushOnPushOffButton];
// Set image position to NSImageOnly
[[cellArray objectAtIndex:0] setImagePosition:NSImageOnly];
// Set bezel type to square bezel type
[[cellArray objectAtIndex:0] setBezelStyle:NSThickSquareBezelStyle];
// Finally set the image
[[cellArray objectAtIndex:0] setImage:[NSImage imageNamed:@"ImageA"]];
// Do it all over again
[[cellArray objectAtIndex:1] setButtonType:NSPushOnPushOffButton];
[[cellArray objectAtIndex:1] setImagePosition:NSImageOnly];
[[cellArray objectAtIndex:1] setBezelStyle:NSThickSquareBezelStyle];
[[cellArray objectAtIndex:1] setImage:[NSImage imageNamed:@"DensityMax"]];

But what I got is not satisfying, the button does not have a bezel border, and does not have a selected state, I mean, I cannot tell which one is pushed in currently.

So what am I doing wrong? Please point it out for me, big thanks!

Answer 1

UPDATE*

If I do not do this full programatically and do it as you have.

I realised you also need to set button cell's visual to bordered in the code

[[cellArray objectAtIndex:0] setBordered:YES];

---

Creating the Matrix fully programatically does not seem to need the border set by you :

 NSRect windowContentViewRect = NSMakeRect(_cView.frame.origin.x +10, _cView.frame.origin.y+150, _cView.frame.size.width, _cView.frame.size.height);
NSMatrix* matrix = [[NSMatrix alloc] initWithFrame:windowContentViewRect mode:NSTrackModeMatrix cellClass:[NSButtonCell class] numberOfRows:2 numberOfColumns:1];

[matrix setCellSize:NSMakeSize(100, 100)];
[matrix sizeToCells];
[matrix setNeedsDisplay:YES];

[_cView addSubview: matrix  ];

[_cView setNeedsDisplay:YES];

NSArray *cellArray = [matrix cells];
// Set the button type to NSPushOnPushOffButton
[[cellArray objectAtIndex:0] setButtonType:NSPushOnPushOffButton];
// Set bezel type to square bezel type
[[cellArray objectAtIndex:0] setBezelStyle:NSThickSquareBezelStyle];
// Set image position to NSImageOnly
[[cellArray objectAtIndex:0] setImagePosition:NSImageOnly];

// Finally set the image
[[cellArray objectAtIndex:0] setImage:[NSImage imageNamed:@"ImageA"]];


// Do it all over again
[[cellArray objectAtIndex:1] setButtonType:NSPushOnPushOffButton];
[[cellArray objectAtIndex:1] setBezelStyle:NSThickSquareBezelStyle];
[[cellArray objectAtIndex:1] setImagePosition:NSImageOnly];

[[cellArray objectAtIndex:1] setImage:[NSImage imageNamed:@"DensityMax"]];

---