Change highlighting color in NSTableView in Cocoa? - objective-c

I am developing a Cocoa application and encountered a problem with highlighting. Standard highlighting color in MAC OS X applications is blue, but it doesn't suit my app, since because of design concepts, I need a green color for highlighting.
I tried to subclass NSTableview and override method
- (void)highlightSelectionInClipRect:(NSRect)clipRect
but it didn't help.
How to fix this problem?

I am using this, and so far works perfectly:
- (void)highlightSelectionInClipRect:(NSRect)theClipRect
{
// this method is asking us to draw the hightlights for
// all of the selected rows that are visible inside theClipRect
// 1. get the range of row indexes that are currently visible
// 2. get a list of selected rows
// 3. iterate over the visible rows and if their index is selected
// 4. draw our custom highlight in the rect of that row.
NSRange aVisibleRowIndexes = [self rowsInRect:theClipRect];
NSIndexSet * aSelectedRowIndexes = [self selectedRowIndexes];
int aRow = aVisibleRowIndexes.location;
int anEndRow = aRow + aVisibleRowIndexes.length;
NSGradient * gradient;
NSColor * pathColor;
// if the view is focused, use highlight color, otherwise use the out-of-focus highlight color
if (self == [[self window] firstResponder] && [[self window] isMainWindow] && [[self window] isKeyWindow])
{
gradient = [[[NSGradient alloc] initWithColorsAndLocations:
[NSColor colorWithDeviceRed:(float)62/255 green:(float)133/255 blue:(float)197/255 alpha:1.0], 0.0,
[NSColor colorWithDeviceRed:(float)48/255 green:(float)95/255 blue:(float)152/255 alpha:1.0], 1.0, nil] retain]; //160 80
pathColor = [[NSColor colorWithDeviceRed:(float)48/255 green:(float)95/255 blue:(float)152/255 alpha:1.0] retain];
}
else
{
gradient = [[[NSGradient alloc] initWithColorsAndLocations:
[NSColor colorWithDeviceRed:(float)190/255 green:(float)190/255 blue:(float)190/255 alpha:1.0], 0.0,
[NSColor colorWithDeviceRed:(float)150/255 green:(float)150/255 blue:(float)150/255 alpha:1.0], 1.0, nil] retain];
pathColor = [[NSColor colorWithDeviceRed:(float)150/255 green:(float)150/255 blue:(float)150/255 alpha:1.0] retain];
}
// draw highlight for the visible, selected rows
for (aRow; aRow < anEndRow; aRow++)
{
if([aSelectedRowIndexes containsIndex:aRow])
{
NSRect aRowRect = NSInsetRect([self rectOfRow:aRow], 1, 4); //first is horizontal, second is vertical
NSBezierPath * path = [NSBezierPath bezierPathWithRoundedRect:aRowRect xRadius:4.0 yRadius:4.0]; //6.0
[path setLineWidth: 2];
[pathColor set];
[path stroke];
[gradient drawInBezierPath:path angle:90];
}
}
}

I searched for hours for an answer on this as well, and although I found many fragments, none of them were complete. So here I submit another approach, which I am using with success.
1) Set your NSTableView selectionHighLightStyle to None
This is necessary to ensure that OSX does not simply apply it's own highlights over the top of yours, leaving you with a blue highlight.
You can do this either through IB or via code.
2) Subclass NSTableView, and override drawRow.
This will set the background color for your selected rows to primary (active window) and secondary (inactive).
- (void)drawRow:(NSInteger)row clipRect:(NSRect)clipRect
{
NSColor* bgColor = Nil;
if (self == [[self window] firstResponder] && [[self window] isMainWindow] && [[self window] isKeyWindow])
{
bgColor = [NSColor colorWithCalibratedWhite:0.300 alpha:1.000];
}
else
{
bgColor = [NSColor colorWithCalibratedWhite:0.800 alpha:1.000];
}
NSIndexSet* selectedRowIndexes = [self selectedRowIndexes];
if ([selectedRowIndexes containsIndex:row])
{
[bgColor setFill];
NSRectFill([self rectOfRow:row]);
}
[super drawRow:row clipRect:clipRect];
}
3) Implement an NSTableViewDelegate, attach it to your NSTableView, and implement willDisplayCell.
This will allow you to change the textColor of the rows on selection/deselection, in case your selection colors make the text hard to read.
- (void)tableView:(NSTableView *)aTableView willDisplayCell:(id)aCell forTableColumn:(NSTableColumn *)aTableColumn row:(NSInteger)rowIndex
{
// check if it is a textfield cell
if ([aCell isKindOfClass:[NSTextFieldCell class]])
{
NSTextFieldCell* tCell = (NSTextFieldCell*)aCell;
// check if it is selected
if ([[aTableView selectedRowIndexes] containsIndex:rowIndex])
{
tCell.textColor = [NSColor whiteColor];
}
else
{
tCell.textColor = [NSColor blackColor];
}
}
}
And you are done.

- (void)drawInteriorWithFrame:(NSRect)frame inView:(NSView *)controlView
{
if ([self isHighlighted])
{
NSRect bgFrame = frame;
[[NSColor redColor] set];
NSRectFill(bgFrame);
}
}
I use this code to deal with the height, the code is in my custom cell file

Related

How to change NSTableView header background color in MAC OS X app?

I've tried all found suggested solutions but ended up with this as the closest:
The target is to have custom color for:
complete header background (e.g. green)
text (e.g. white)
sort control color (e.g. white)
Currently I can only set the interior bg and text color properly while leaving the header borders and sort controls in default white color.
I use the approach of custom NCTableHeaderCell.
// <C> changing the bgColor doesn't work this way
[self.tv.headerView setWantsLayer:YES];
self.tv.headerView.layer.backgroundColor = NSColor.redColor.CGColor;
for (NSTableColumn *tc in self.tv.tableColumns) {
// <C> this only helps to change the header text color
tc.headerCell = [[NCTableHeaderCell_customizable alloc]initTextCell:#"Hdr"];
// <C> this changes the bgColor of the area of the headerCell label text (the interior) but it leaves border and sort controls in white color;
tc.headerCell.drawsBackground = YES;
tc.headerCell.backgroundColor = NSColor.greenColor;
// <C> changing the textColor doesn't work this way
// <SOLUTION> use NCTableHeaderCell_customizable as done above;
tc.headerCell.textColor = NSColor.redColor;
}
My custom class look like this:
#implementation NCTableHeaderCell_customizable
// <C> this works as expected
- (NSColor *) textColor
{
return NSColor.whiteColor;
}
// <C> this only sets the interior bgColor leaving the borders in standard color
//
//- (NSColor *) backgroundColor
//{
// return NSColor.redColor;
//}
- (void) drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView;
{
// <C> this only sets the interior bgColor leaving the borders in standard color
//
//self.backgroundColor = NSColor.orangeColor;
[super drawWithFrame:cellFrame inView:controlView];
// <C> this draws the red bg as expected but doesn't show the interior;
//
// [NSColor.redColor set];
// NSRectFillUsingOperation(cellFrame, NSCompositingOperationSourceOver);
// <C> this draws the red bg as expected but
// 1) doesn't layout the interior well (I could fix this);
// 2) doesn't show the sort controls (it's over-drawn with the code bellow);
//
// [NSColor.redColor setFill];
// NSRectFill(cellFrame);
// CGRect titleRect = [self titleRectForBounds:cellFrame];
// [self.attributedStringValue drawInRect:titleRect];
}
- (void) drawInteriorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView;
{
[super drawInteriorWithFrame:cellFrame inView:controlView];
}
- (void) drawFocusRingMaskWithFrame:(NSRect)cellFrame inView:(NSView *)controlView;
{
[super drawFocusRingMaskWithFrame:cellFrame inView:controlView];
}
- (void) drawSortIndicatorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView ascending:(BOOL)ascending priority:(NSInteger)priority;
{
[super drawSortIndicatorWithFrame:cellFrame inView:controlView ascending:ascending priority:priority];
//NSTableHeaderView *v = (NSTableHeaderView *)controlView;
}
I'm quite close to the solution but I don't know how to draw correctly the custom header cell to archive the goal.
Create the NSTableHeaderCell like below and play with the header cell's frame sizes and origins:
#import <Cocoa/Cocoa.h>
#interface CustomTableHeaderCell : NSTableHeaderCell {
NSMutableDictionary *attrs;
}
#import "CustomTableHeaderCell.h"
#implementation CustomTableHeaderCell
- (id)initTextCell:(NSString *)text
{
if (self = [super initTextCell:text]) {
if (text == nil || [text isEqualToString:#""]) {
[self setTitle:#"One"];
}
/* old_
self.textColor = [NSColor blackColor];
*/
// new_
self.textColor = [NSColor whiteColor];
attrs = [[NSMutableDictionary dictionaryWithDictionary:
[[self attributedStringValue]
attributesAtIndex:0
effectiveRange:NULL]]
mutableCopy];
// self.font = [NSFont fontWithName:appleeH8GhKr0 size:12];
return self;
}
return nil;
}
- (void)drawWithFrame:(NSRect)cellFrame
highlighted:(BOOL)isHighlighted
inView:(NSView *)view
{
CGRect fillRect, borderRect;
CGRectDivide(NSRectToCGRect(cellFrame), &borderRect, &fillRect, 1.0, CGRectMaxYEdge);
// sets the origin and frame for header's title
// fillRect.size.height = 25;
if (fillRect.origin.x == 0)
{
// fillRect.origin.y += 5;
// for adding left margin to first column title try to add spaces in text of header title
// try to play with the numbers of fillRect rect
}
else if (fillRect.origin.x == 239)
{
// fillRect.size.width -= 80;
}
// setting the background color of tableview's header view
NSGradient *gradient = [[NSGradient alloc]
initWithStartingColor:[NSColor greenColor]
endingColor:[NSColor greenColor]];
[gradient drawInRect:NSRectFromCGRect(fillRect) angle:90.0];
[self drawInteriorWithFrame:NSRectFromCGRect(CGRectInset(fillRect, 0.0, 1.0)) inView:view];
}
- (NSRect)adjustedFrameToVerticallyCenterText:(NSRect)frame
{
// super would normally draw text at the top of the cell
NSInteger offsetY = floor((NSHeight(frame) -
([[self font] ascender] - [[self font] descender])) / 2);
return NSInsetRect(frame, 20, offsetY);
}
-(void)drawInteriorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView{
[super drawInteriorWithFrame:[self adjustedFrameToVerticallyCenterText:cellFrame]
inView:controlView];
}
- (void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)view
{
[self drawWithFrame:cellFrame highlighted:NO inView:view];
}
- (void)highlight:(BOOL)isHighlighted
withFrame:(NSRect)cellFrame
inView:(NSView *)view
{
[self drawWithFrame:cellFrame highlighted:isHighlighted inView:view];
}
Set the header cell for column like below:
NSArray *columns = nil;
if(self.tblVc)
columns = [self.tblVc tableColumns];
NSEnumerator *cols = [columns objectEnumerator];
NSTableColumn *col = nil;
CustomTableHeaderCell *headerCell;
while (col = [cols nextObject]) {
NSString *key = [[col headerCell] stringValue];
headerCell = [[CustomTableHeaderCell alloc]
initTextCell:key];
NSRect rectHeader =self.tblVc.headerView.frame;
rectHeader.size.height = 25;
self.tblVc.headerView.frame=rectHeader;
[col setHeaderCell:headerCell];
}
and use disclosure button on top of table view's header like below:
It will show the results like this:
I don't find other ways to do it, just have to draw everything. Hope it's helpful.
CGRect outCellFrame;
- (void) drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView;
{
// <C> this only sets the interior bgColor leaving the borders in standard color
outCellFrame = cellFrame;
[super drawWithFrame:cellFrame inView:controlView];
// <C> this draws the red bg as expected but doesn't show the interior;
//
// <C> this draws the red bg as expected but
// 1) doesn't layout the interior well (I could fix this);
// 2) doesn't show the sort controls (it's over-drawn with the code bellow);
//
// [NSColor.redColor setFill];
// NSRectFill(cellFrame);
// CGRect titleRect = [self titleRectForBounds:cellFrame];
// [self.attributedStringValue drawInRect:titleRect];
}
-(NSRect *) outer:(NSRect)rect fromInner: (NSRect)innerRect {
NSRect * list = (NSRect *) malloc(sizeof(rect) * 4);
NSRect rem;
NSDivideRect(rect, &list[0], &rem, innerRect.origin.x - rect.origin.x, NSRectEdgeMinX);
NSDivideRect(rect, &list[1], &rem, - innerRect.origin.x - innerRect.size.width + rect.origin.x + rect.size.width , NSRectEdgeMaxX);
NSDivideRect(rect, &list[2], &rem, innerRect.origin.y - rect.origin.y, NSRectEdgeMinY);
NSDivideRect(rect, &list[3], &rem, -innerRect.origin.y - innerRect.size.height + rect.origin.y + rect.size.height , NSRectEdgeMaxY);
return list;
}
-(void) updateBackground:(CGRect) cellFrame and:(CGRect) innerCellFrame{
[self.backgroundColor set];
NSRect * list = [self outer:cellFrame fromInner:innerCellFrame];
NSRectFillListUsingOperation(list, 4, NSCompositingOperationSourceOver);
free(list);}
- (void) drawInteriorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView;
{
[self updateBackground:outCellFrame and:cellFrame];
[super drawInteriorWithFrame:cellFrame inView:controlView];
}
- (void) drawSortIndicatorWithFrame:(NSRect)cellFrame inView:(NSView *)controlView ascending:(BOOL)ascending priority:(NSInteger)priority;
{
[self.backgroundColor set];
NSImage * image = ascending ? [NSImage imageNamed:#"NSDescendingSortIndicator"]:[NSImage imageNamed:#"NSAscendingSortIndicator"] ;
// use your image here. If you need to change color, try to make a colored templated image here.
CGRect frame = [self sortIndicatorRectForBounds:cellFrame];
[self.backgroundColor set];
CGRect res = NSMakeRect(frame.origin.x, cellFrame.origin.y, cellFrame.size.width - frame.origin.x, cellFrame.size.height);
NSRectFillUsingOperation(res , NSCompositingOperationSourceOver);
[NSColor.blueColor setFill];
[NSColor.blueColor setStroke];
[image drawInRect: [self sortIndicatorRectForBounds:frame]];
}
Thanks guys for your help. I've ended up with this simple solution which also solves the sort indicators. I've gave up on custom NSHeaderCell and resolved everything in single custom NSTableHeaderRowView method:
- (void)drawRect:(NSRect)dirtyRect
{
[NSGraphicsContext saveGraphicsState];
// Row: Fill the background
//
[NSColor.whiteColor setFill];
const CGRect headerRect = CGRectMake(0.0, 1.0, self.bounds.size.width, self.bounds.size.height-1.0);
[[NSBezierPath bezierPathWithRect:headerRect] fill];
// Columns
//
for (NSUInteger i = 0; i < self.tableView.numberOfColumns; ++i) {
NSRect rect = [self headerRectOfColumn:i];
// separator on left
//
if (i != 0) {
[[NSColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.35] setFill];
[[NSBezierPath bezierPathWithRect:NSMakeRect(rect.origin.x, rect.origin.y+4.0, 1.0, rect.size.height-8.0)] fill];
}
NSTableColumn *tableColumn = self.tableView.tableColumns[i];
NSSortDescriptor *col_sd = tableColumn.sortDescriptorPrototype;
NSTableHeaderCell *tableHeaderCell = tableColumn.headerCell;
// text
//
NSString *columnText = tableHeaderCell.stringValue;
[columnText drawInRect:NSInsetRect(rect, 5.0, 4.0) withAttributes:nil];
// sort indicator
//
for (NSInteger priority = 0; priority < self.tableView.sortDescriptors.count; ++priority) {
NSSortDescriptor *sortDesciptor = self.tableView.sortDescriptors[priority];
// <C> there is no way to get column from sortDesciptor so I use this trick comparing sortDesciptor with current column.sortDescriptorPrototype;
// <C> not sure why sel_isEqual() dosn't work so I compare its string representation;
if ([NSStringFromSelector(sortDesciptor.selector) isEqualToString:NSStringFromSelector(col_sd.selector)] == YES && [sortDesciptor.key isEqualToString:col_sd.key] == YES) {
SDEBUG(LEVEL_DEBUG, #"sort-hdr", #"MATCH: sel=%#", NSStringFromSelector(sortDesciptor.selector));
// <C> default implementation draws indicator ONLY for priority 0; Otherwise the indicator would have to graphically show the prio;
// <C> it is a support for multi-column sorting;
// <REF> shall you need it: https://stackoverflow.com/questions/46611972/sorting-a-viewbased-tableview-with-multiple-sort-descriptors-doesnt-work
[tableHeaderCell drawSortIndicatorWithFrame:rect inView:self ascending:sortDesciptor.ascending priority:priority];
}
}
}
[NSGraphicsContext restoreGraphicsState];
}

Do windows get loaded differently from 10.10 -> 10.11?

We have a window we want to display, and in 10.11, it displays as we expect.
we set all the properties of the views within the window in -windowDidLoad, and when the window is displayed, these buttons have the right colors:
- (void)windowDidLoad
{
[super windowDidLoad];
LightTheme *lightTheme = [[LightTheme alloc] init];
_cancelButton.backgroundColor = lightTheme.controlColor;
_stopButton.backgroundColor = lightTheme.controlColor;
_cancelButton.textColor = lightTheme.textColor;
_stopButton.textColor = lightTheme.textColor;
}
But, with this same code in 10.10, the colors are set to the default values for this button subclass
What's interesting is that if you interact with the buttons, they immediately redraw and have the right white background
However, if we move the code to -awakeFromNib, it looks good on both OSs, as soon as the window is displayed
- (void)awakeFromNib
{
[super awakeFromNib];
LightTheme *lightTheme = [[LightTheme alloc] init];
_cancelButton.backgroundColor = lightTheme.controlColor;
_stopButton.backgroundColor = lightTheme.controlColor;
_cancelButton.textColor = lightTheme.textColor;
_stopButton.textColor = lightTheme.textColor;
}
Did they change when the window is displayed from 10.10->10.11?
Or are we missing something else?
It seems like it used to be:
-awakeFromNib -> Display Window
Now it looks like:
-windowDidLoad -> Display Window
EDIT: Here is the how the backgroundColor property is used:
First, get a color depending on button state
-(NSColor*)effectiveBackgroundColor
{
NSColor *result = ([self isOn] && self.backgroundAlternateColor) ? self.backgroundAlternateColor : self.backgroundColor;
if ( !self.enabled && result ) // if disabled, dim the background
result = [result colorWithAlphaComponent:self.disabledOpacity];
return result;
}
Then in the -drawRect, call this method:
-(void)drawBackground
{
NSSize inset = [self buttonInset];
NSRect bodyRect = self.bounds;
bodyRect = NSInsetRect(bodyRect, inset.width, inset.height);
NSBezierPath* buttonPath = [NSBezierPath bezierPathWithRoundedRect:bodyRect xRadius:self.cornerRadius yRadius:self.cornerRadius];
NSColor* effectiveBackgroundColor = [self effectiveBackgroundColor];
if (effectiveBackgroundColor)
{
[NSGraphicsContext saveGraphicsState];
[[self effectiveBackgroundShadow] set];
[effectiveBackgroundColor setFill];
[buttonPath fill];
[NSGraphicsContext restoreGraphicsState];
if( [[self cell] isHighlighted] )
{
[[[NSColor blackColor] colorWithAlphaComponent:self.highlightOpacity] setFill];
[buttonPath fill];
}
}
}

UILabel inside UIView produces rounded corner with "square corner"

I have an UIView which I created and set background color to white. This view contains UILabel, which is a class called BubbleView. (Sorry I cannot add a picture because you need reputation 10+ :(
PROBLEM:
1. The following code produces a gray Label with rounded corner with gray-border square corner tips. This is because the UIView produces the square corner tips. The UILabel is rounded. Please note that I already set the background of UIView to white.
2. My text string of the UILabel is hiding behind UIView, so it is not displayed.
I'd love to show you pictures, but I am new and I cannot add pictures until I get to 10+ reputations.
http://i.stack.imgur.com/CdRjy.png
http://i.stack.imgur.com/zCdCV.png
Here is my code for setting the text and the view:
BubbleView:
- (void)drawRect:(CGRect)rect
{
const CGFloat boxWidth = self.bubbleWidth;
const CGFloat boxHeight = self.bubbleHeight;
NSLog(#"text, width, height: %#, %f, %f", self.text, self.bubbleWidth, self.bubbleHeight);
CGRect boxRect = CGRectMake(
roundf(self.bounds.size.width - boxWidth) / 2.0f,
roundf(self.bounds.size.height - boxHeight) / 2.0f,
boxWidth,
boxHeight);
UIBezierPath *roundedRect = [UIBezierPath bezierPathWithRoundedRect:boxRect cornerRadius:14.0f];
[[UIColor colorWithWhite:0.3f alpha:0.8f] setFill];
[roundedRect fill];
NSDictionary *attributes = #{
NSFontAttributeName : [UIFont systemFontOfSize:16.0f],
NSForegroundColorAttributeName : [UIColor whiteColor]
};
CGPoint textPoint = CGPointMake(
self.center.x+boxWidth/2,
self.center.y+boxHeight/2);
NSLog(#"text point origin: %f, %f", textPoint.x, textPoint.y);
[self.text drawAtPoint:textPoint withAttributes:attributes];
}
Main View Controller:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor whiteColor];
[self setText];
}
-(void) viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
[self setText];
}
- (void) setText
{
NSString *textR = #"I need this text to show up on autolayout so that i could continue working";
UIFont* font = [UIFont fontWithName:#"HelveticaNeue" size:14.0f];
CGSize constraint = CGSizeMake(250,9999);
CGRect textRect = [textR boundingRectWithSize:constraint
options:NSStringDrawingUsesLineFragmentOrigin
attributes:#{NSFontAttributeName:font}
context:nil];
BubbleView *hostView = [[BubbleView alloc] initWithFrame:CGRectMake(20.0f, 160.0f, textRect.size.width+20, textRect.size.height+20)];
hostView.bubbleWidth = textRect.size.width+20;
hostView.bubbleHeight = textRect.size.height+20;
hostView.text = textR;
hostView.layer.cornerRadius = 10.0f;
self.view.layer.masksToBounds = TRUE;
[hostView drawRect:textRect];
hostView.backgroundColor = [UIColor whiteColor];
self.detailsView = hostView;
//self.detailsView.backgroundColor = [UIColor whiteColor];
NSLog(#"size: %f, %f", textRect.size.width, textRect.size.height);
NSLog(#"origin: %f, %f - size: %f, %f, backgroundColor: #%#", self.detailsView.frame.origin.x, self.detailsView.frame.origin.y, self.detailsView.frame.size.width, self.detailsView.frame.size.height, self.detailsView.backgroundColor);
[self.view addSubview:self.detailsView];
self.hostSays.text = textR;
self.hostSays.textColor = [UIColor blueColor];
[self.view layoutSubviews];
}
SOLUTION (ONLY 1 PART):
OK so I managed to solve half of my problems. I had to add the following code in my BubbleView class (inside - (id)initWithFrame:(CGRect)frame). This got rid of the square angles! (I think Wain was the one who suggested this but I might've misunderstood him)...
[self setOpaque:NO];
[self setBackgroundColor:[UIColor clearColor]];
So...still have the other part 2 of problem to solve and I'm hoping someone has run into this issue before!
Set the background colour of the view and add the label as a subview. Set the frame to get your required padding. Do not implement drawRect.
Now, the view will draw the background colour and the label automatically and the label will draw the text (with its background colour and border settings).
I know when I create custom buttons I need to setMasksToBounds
+ (void) addBorderToButtons:(UIButton *) btn
{
// Round button corners
CALayer *btnLayer = [btn layer];
[btnLayer setMasksToBounds:YES];
[btnLayer setCornerRadius:15.0f];
// Apply a 1 pixel, black border around Buy Button
[btnLayer setBorderWidth:1.5f];
[btnLayer setBorderColor:[[UIColor blackColor] CGColor]];
}
Setting this changes
To this
If you want to save your coding approach you strongly need to add [super drawRect:rect] in your drawRect: method
- (void)drawRect:(CGRect)rect{
[super drawRect:rect];
YOUR CODE
}
In this case you will see your text in UILabel.
Also you should not call drawRect: directly. It will be called automatically in runtime:
BubbleView *hostView =
[[BubbleView alloc] initWithFrame:CGRectMake(20.0f,
160.0f,
textRect.size.width+20,
textRect.size.height+20)];
hostView.bubbleWidth = textRect.size.width+20;
hostView.bubbleHeight = textRect.size.height+20;
hostView.text = textR;
// hostView.layer.cornerRadius = 10.0f;
// self.view.layer.masksToBounds = TRUE;
// [hostView drawRect:textRect];
// hostView.backgroundColor = [UIColor whiteColor];
self.detailsView = hostView;

NSTextField with rounded corners?

I'm trying to draw rounded corners around an NSTextField.
I've subclassed NSTextField, tried the code below, but without any result...
Any ideas?
- (void)drawRect:(NSRect)dirtyRect
{
// black outline
NSRect blackOutlineFrame = NSMakeRect(0.0, 0.0, [self bounds].size.width, [self bounds].size.height-1.0);
NSGradient *gradient = nil;
if ([NSApp isActive]) {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.24 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.374 alpha:1.0]];
}
else {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.55 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.558 alpha:1.0]];
}
[gradient drawInBezierPath:[NSBezierPath bezierPathWithRoundedRect:blackOutlineFrame xRadius:5 yRadius:5] angle:90];
}
It is better to subclass NSTextFieldCell to draw rounded corners to preserve NSTextField functionality, e.g:
- (void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView {
NSBezierPath *betterBounds = [NSBezierPath bezierPathWithRoundedRect:cellFrame xRadius:CORNER_RADIUS yRadius:CORNER_RADIUS];
[betterBounds addClip];
[super drawWithFrame:cellFrame inView:controlView];
if (self.isBezeled) {
[betterBounds setLineWidth:2];
[[NSColor colorWithCalibratedRed:0.510 green:0.643 blue:0.804 alpha:1] setStroke];
[betterBounds stroke];
}
}
Yields a nice rounded text field that works perfectly (if you had set it to draw a rectangle bezel in the first place, at least):
You are doing almost everything correct. You just need to change the textField's cell and radius which match. Take a look at this:
-(void)awakeFromNib {
[[self cell] setBezelStyle: NSTextFieldRoundedBezel];
}
- (void)drawRect:(NSRect)dirtyRect
{
NSRect blackOutlineFrame = NSMakeRect(0.0, 0.0, [self bounds].size.width, [self bounds].size.height-1.0);
NSGradient *gradient = nil;
if ([NSApp isActive]) {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.24 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.374 alpha:1.0]];
}
else {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.55 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.558 alpha:1.0]];
}
[gradient drawInBezierPath:[NSBezierPath bezierPathWithRoundedRect:blackOutlineFrame xRadius:10 yRadius:10] angle:90];
}
This is working for me nicely.
Swift 3 version of #Verious codes, with properties editable in Interface Builder:
class RoundedTextFieldCell: NSTextFieldCell {
#IBInspectable var borderColor: NSColor = .clear
#IBInspectable var cornerRadius: CGFloat = 3
override func draw(withFrame cellFrame: NSRect, in controlView: NSView) {
let bounds = NSBezierPath(roundedRect: cellFrame, xRadius: cornerRadius, yRadius: cornerRadius)
bounds.addClip()
super.draw(withFrame: cellFrame, in: controlView)
if borderColor != .clear {
bounds.lineWidth = 2
borderColor.setStroke()
bounds.stroke()
}
}
}
I did like this and it is working like charm.
yourLableName.wantsLayer = YES;
yourLableName.layer.cornerRadius = yourLableName.frame.size.width/2;
The easiest one is to do with interface builder, unless you want the corners rounded by some units:
Simply select the border as rounded one :

Objective C - Help with changing background color when UIButton is pressed

I am new to programing and any help is appreciated. I am trying to change the background color of a button once it has been pressed. I have tried setBackgroundColor without success. I am not sure that it is compatible with UIButton. Is there any way to programatically accomplish such a task? All thoughts and suggestions are appreciated.
I woudl suggest creating a simple image that contains the background color you want and setting that via the existing methods in the UIButton. (check Wrights Answer for the doc link).
UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
NSString* fileLocation = [[NSBundle mainBundle] pathForResource:#"buttonBG" ofType:#"png"];
UIImage* bgImage = [UIImage imageWithContentsOfFile:fileLocation];
if (bgImage != nil) { // check if the image was actually set
[button setBackgroundImage:bgImage forState:UIControlStateHighlighted];
} else {
NSLog(#"Error trying to read the background image");
}
That should do the trick. There might be an even better way to create the necessary image on the fly, but that's stuff I'm not firm in.
[edit: a bit more verbose code ]
Assuming you have an unadorned custom button with a title of "On" for the normal state:
- (IBAction) toggleButtonState {
if ([toggleButton titleForState:UIControlStateNormal] == #"On") {
[toggleButton setTitle: #"Off" forState:UIControlStateNormal];
[toggleButton setBackgroundColor:[UIColor redColor]];
}
else {
[toggleButton setTitle: #"On" forState:UIControlStateNormal];
[toggleButton setBackgroundColor:[UIColor greenColor]];
}
}
All the other buttons have an image placed in front of the view, so at most you'll see the corners change if the image doesn't completely fill the space.
I'd also suggest using an image, but for learning purposes, this will work.
Ive just been having the same issue and ended up using a UIButton subclass to tackle the issue. I used gradients simply because it looked a bit better if you have no need for them you can simply remove them. I have explained the process I used and included the full code at the bottom of the post.
Firstly add properties for the layers.I created two layers one for the base gradient and one for a gloss to add a little bit of style.
#interface gradientButton()
#property (nonatomic, strong) CAGradientLayer* gradientLayer;
#property (nonatomic, strong) CAGradientLayer* glossyLayer;
#end
Then either in -(void)awakeFromNib or in -(id)initWithFrame:(CGRect)frame
,depending on if you will load from storyboard or code respectively, configure the gradients and add the layers, round your corners off and customize the font highlight color.
-(void)awakeFromNib
{
_gradientLayer = [[CAGradientLayer alloc] init];
_gradientLayer.bounds = self.bounds;
_gradientLayer.position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);
[self.layer insertSublayer:_gradientLayer atIndex:0];
self.layer.cornerRadius = 5.0f;
self.layer.masksToBounds = YES;
self.layer.borderWidth = 1.0f;
_glossyLayer = [[CAGradientLayer alloc] init];
_glossyLayer.bounds = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height/2);
_glossyLayer.position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/4);
[self.layer addSublayer:_glossyLayer];
[self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[self setTitleColor:[UIColor yellowColor] forState:UIControlStateHighlighted];
}
Next, override - (void)drawRect:(CGRect)rect to apply your layers and define your colors.
#define GRADIENT_TOP [UIColor colorWithRed:38.0/255.0 green:78.0/255.0 blue:54.0/255.0 alpha:1]
#define GRADIENT_BOTTOM [UIColor colorWithRed:44.0/255.0 green:71.0/255.0 blue:56.0/255.0 alpha:1]
#define GLOSS_TOP [UIColor colorWithRed:0.70f green:0.70f blue:0.70f alpha:0.95f]
#define GLOSS_BOTTOM [UIColor colorWithRed:0.70f green:0.70f blue:0.70f alpha:0.35f]
#define GRADIENT_SELECTED_TOP [UIColor colorWithRed:138.0/255.0 green:178.0/255.0 blue:154.0/255.0 alpha:1]
#define GRADIENT_SELECTED_BOTTOM [UIColor colorWithRed:114.0/255.0 green:171.0/255.0 blue:156.0/255.0 alpha:1]
- (void)drawRect:(CGRect)rect
{
[_gradientLayer setColors:#[(id)[GRADIENT_TOP CGColor],(id)[GRADIENT_BOTTOM CGColor]]];
[_glossyLayer setColors:#[(id)[GLOSS_TOP CGColor], (id)[GLOSS_BOTTOM CGColor]]];
[super drawRect:rect];
}
Finally, and the bit we've all been waiting for, override -(void)setHighlighted:(BOOL)highlighted{
so we can apply the highlight effect were looking for.
-(void)setHighlighted:(BOOL)highlighted{
[super setHighlighted:highlighted];
if(highlighted)
[_gradientLayer setColors:#[(id)[GRADIENT_SELECTED_TOP CGColor],(id)[GRADIENT_SELECTED_BOTTOM CGColor]]];
else
[_gradientLayer setColors:#[(id)[GRADIENT_TOP CGColor],(id)[GRADIENT_BOTTOM CGColor]]];
}
There we have it, now just drag out a UIButton modify the class and your all good. Heres the full Implementation so you can copy it straight out. http://pastebin.com/nUVeujyp
Check out the UIButton Class Reference.
Regular UIButtons do not have the backgroundColor option.
My suggestion would to use the UISegmentedControl, which has the tinColor option.
I have created a subclass which get background color and creates an UIImage for each state.
For me it's more useful a subclass instead a category, so that's up to you.
#implementation ROCRoundColorButton
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
UIColor *darkColor;
darkColor = [self darkColorFromBackgroundColor];
[self setBackgroundImage:[self imageWithColor:self.backgroundColor withSize:self.frame.size] forState:UIControlStateNormal];
[self setBackgroundImage:[self imageWithColor:darkColor withSize:self.frame.size] forState:UIControlStateSelected];
}
return self;
}
-(id)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if (self) {
UIColor *darkColor;
darkColor = [self darkColorFromBackgroundColor];
[self setBackgroundImage:[self imageWithColor:self.backgroundColor withSize:self.frame.size] forState:UIControlStateNormal];
[self setBackgroundImage:[self imageWithColor:darkColor withSize:self.frame.size] forState:UIControlStateSelected];
}
return self;
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
}
*/
#pragma mark -
#pragma mark Private methods
- (UIColor *)darkColorFromBackgroundColor
{
const float* components = CGColorGetComponents( self.backgroundColor.CGColor );
CGFloat red = components[0];
CGFloat green = components[1];
CGFloat blue = components[2];
CGFloat alpha = components[3];
if (red > 0) {
red -= 0.1;
}
if (green > 0) {
green -= 0.1;
}
if (blue > 0) {
blue -= 0.1;
}
UIColor *darkColor = [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
return darkColor;
}
- (UIImage *)imageWithColor:(UIColor *)color withSize:(CGSize)size
{
UIGraphicsBeginImageContext(size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
//CGContextFillRect(context, CGRectMake(0, 0, size.width, size.height));
UIBezierPath *roundedRect = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, size.width, size.height) cornerRadius:5];
[roundedRect fillWithBlendMode: kCGBlendModeNormal alpha:1.0f];
[color setFill];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
In fact, you can use it in the storyboard, changing the class and setting de background color in the view.