2016-09-14 3 views
12

Мне нужна простая кнопка (одна с круглыми углами) и добавление фона к ней. Я пробовал 2 вещи:NSButton с круглыми углами и цветом фона

1 - используя круглое изображение кнопки: это работает хорошо, пока мне не нужно навести на экран кнопку, которая заставит круглые части выглядеть уродливыми.

2 - удлинение кнопки и добавление цвета к ней - но тогда у меня возникают проблемы, когда я нажимаю кнопку - я хочу, чтобы состояние «нажало» было того же цвета, что и «обычное» состояние, но это не дело.

это код, я использую, чтобы продлить кнопку:

override func drawRect(dirtyRect: NSRect) 
    { 
     if let bgColor = bgColor { 
      self.layer?.cornerRadius = 4 
      self.layer?.masksToBounds = true 
      self.layer?.backgroundColor = bgColor.CGColor 
      bgColor.setFill() 

      NSRectFill(dirtyRect) 
     } 

     super.drawRect(dirtyRect) 
    } 

Во всяком случае, ни один подход 1, ни 2 работал, так как я могу добиться этого? Просто простой кнопка .. :(

EDIT: Я спрашиваю о OSX

+0

Вы хотите изменить размер или цвет при нажатии кнопки? Как это? - http://www.gifmania.co.uk/Web-Design-Animated-Gifs/Animated-Web-Buttons/Green-Web-Buttons/Green-Rounded-Button-90785.gif – Jordan

+0

Я хочу иметь NSButton с регулярное поведение, но с цветом фона и закругленными углами. – Roee84

ответ

4

Override метод drawWithFrame NSButtonCell в:

func drawWithFrame(cellFrame: NSRect, inView controlView: NSView) { 
    var border = NSBezierPath(roundedRect: NSInsetRect(cellFrame, 0.5, 0.5), xRadius: 3, yRadius: 3) 
    NSColor.greenColor().set() 
    border.fill() 

    var style = NSParagraphStyle.defaultParagraphStyle() 
    style.alignment = NSCenterTextAlignment 
    var attr = [NSParagraphStyleAttributeName : style, NSForegroundColorAttributeName : NSColor.whiteColor()] 

    self.title.drawInRect(cellFrame, withAttributes: attr) 
} 
+0

Результат такой же, как и переопределение NSButton drawRect – Roee84

+0

Так что случилось с этим кодом? Это работает для меня – rocky

+0

Кнопка теряет название – Roee84

2

Вам необходимо переопределить функцию layoutSubviews, т.е.

override func layoutSubviews() { 
     self.layer.cornerRadius = self.frame.height/2 
     self.layer.borderColor = UIColor.blue.cgColor 
     self.layer.borderWidth = 2 
    } 

Я совершил образец проекта here. Весь ваш связанный код был написан в button.swift и он находится в быстрой 3. Кроме того, я не установил фоновое изображение для кнопки, я оставляю эту задачу до вас.

P.S .: Ответ ниже для UIButton, а не NSButton. Вероятно, некоторые из них будут действительны, возможно, не все ...

+0

Спасибо, но я спросил о NSButton в OS X, а не о iOS-кнопке на iOS – Roee84

0

Простая 3-строчная функция.

@IBOutlet weak var button: UIButton! 

func setButton(color: UIColor, title: String) { 
    button.backgroundColor = color 
    button.setTitle(title, forState: .Normal) 
    button.layer.cornerRadius = 8.0 
} 

и назвать его как такой

setButton(UIColor.redColor(), title: "Hello") 
+2

Спасибо, но я спросил о NSButton в OS X, а не о iOS-кнопке на iOS – Roee84

1

enter image description here Если вы хотите, чтобы кнопка была округлая, открыть свой main.storyboard, нажмите на кнопку, и нажмите на кнопку «Показать инспектор идентичности» , В разделе «Определенные пользователем атрибуты времени выполнения дважды нажмите на значок« + »и измените код так, чтобы он выглядел следующим образом: enter image description here

+0

Спасибо, но я спросил о NSButton в OS X, а не о UIButton на iOS – Roee84

+0

Это также должно работать с OS X –

+0

Даже если бы это было так, я хочу изменить цвет фона кнопки – Roee84

0

просто попробуйте добавить эти две строки кода в свою функцию. Я думаю, что вы получаете проблему в ширине границы .

переопределение функ DrawRect (dirtyRect: NSRect)

{ 
    if let bgColor = bgColor { 
     self.layer?.cornerRadius = 4 
     self.layer?.masksToBounds = true 
     self.layer?.backgroundColor = bgColor.CGColor 
     self.layer?.borderColor = UIColor.blackcolor() 
     self.layer?.borderWidth = 2.0 

     bgColor.setFill() 

     NSRectFill(dirtyRect) 
    } 

    super.drawRect(dirtyRect) 
} 
+0

Не имеет значения. – Roee84

4

Я сделал кнопку, и удалось это выглядит следующим образом:.

Код:

override func draw(_ dirtyRect: NSRect) { 
    super.draw(dirtyRect) 
    // Drawing code here. 
    if let bgColor = bgColor { 
     self.layer?.cornerRadius = 4 
     self.layer?.masksToBounds = true 
     self.layer?.backgroundColor = bgColor.cgColor 
     bgColor.setFill() 
     NSRectFill(dirtyRect) 
    } 
} 

DrawRect заменяется вничью, а CGColor заменяется cgColor. Разница между твоей и моей - это порядок. Вы назвали super.draw(dirtyRect) последним, и я назвал его первым.Может быть, ваша кнопка выглядит следующим образом:

Я надеюсь, что это может решить вашу проблему.

+0

Спасибо, но, как некоторые другие решения здесь, у него есть проблема с заголовком – Roee84

+0

Да, я думал, вы только что показали часть своего кода, и ваш код может хорошо отобразить заголовок. Добавьте 'self.title.draw (...)' в конце этой функции, появится заголовок. –

1

решение Objective-C (может помочь некоторые ребята натыкаются на эту тему)

Это sublass расширяет IB - так что вы можете IB контролировать либо:

  • цвет фона
  • Цвет фона на Hover
  • Наименование Цвет
  • Наименование Цвет на холме
  • Угловой радиус

Он также включает небольшую альфа-анимацию при наведении курсора.

New controls in IB (click to see screenshot)

// 
// SHFlatButton.h 
// 
// Created by SH on 03.12.16. 
// Copyright © 2016 SH. All rights reserved. 
// 

#import <Cocoa/Cocoa.h> 

@interface SHFlatButton : NSButton 

@property (nonatomic, strong) IBInspectable NSColor *BGColor; 
@property (nonatomic, strong) IBInspectable NSColor *TextColor; 
@property (nonatomic, strong) IBInspectable NSColor *BGColorHover; 
@property (nonatomic, strong) IBInspectable NSColor *TextColorHover; 
@property (nonatomic) IBInspectable CGFloat CornerRadius; 
@property (strong) NSCursor *cursor; 

@end 

И реализация ...

// 
// SHFlatButton.m 
// 
// Created by SH on 03.12.16. 
// Copyright © 2016 SH. All rights reserved. 
// 

#import "SHFlatButton.h" 

@implementation SHFlatButton 

- (void)awakeFromNib 
{ 
    if (self.TextColor) 
     [self setAttributedTitle:[self textColor:self.TextColor]]; 

    if (self.CornerRadius) 
    { 
     [self setWantsLayer:YES]; 
     self.layer.masksToBounds = TRUE; 
     self.layer.cornerRadius = self.CornerRadius; 
    } 
} 


- (void)drawRect:(NSRect)dirtyRect 
{ 
    if (self.BGColor) 
    { 
     [self.BGColor setFill]; 
     NSRectFill(dirtyRect); 
    } 

    [super drawRect:dirtyRect]; 
} 


- (void)resetCursorRects 
{ 
    if (self.cursor) { 
     [self addCursorRect:[self bounds] cursor: self.cursor]; 
    } else { 
     [super resetCursorRects]; 
    } 
} 


- (void)updateTrackingAreas { 

    NSTrackingArea* trackingArea = [[NSTrackingArea alloc] 
            initWithRect:[self bounds] 
            options:NSTrackingMouseEnteredAndExited | NSTrackingActiveAlways 
            owner:self userInfo:nil]; 
    [self addTrackingArea:trackingArea]; 
} 


- (void)mouseEntered:(NSEvent *)theEvent{ 
    if ([self isEnabled]) { 

     [[self animator]setAlphaValue:0.9]; 
     if (self.BGColorHover) 
      [[self cell] setBackgroundColor:self.BGColorHover]; 
     if (self.TextColorHover) 
      [self setAttributedTitle:[self textColor:self.TextColorHover]]; 
    } 


} 

- (void)mouseExited:(NSEvent *)theEvent{ 
    if ([self isEnabled]) { 
     [[self animator]setAlphaValue:1]; 
     if (self.BGColor) 
      [[self cell] setBackgroundColor:self.BGColor]; 
     if (self.TextColor) 
      [self setAttributedTitle:[self textColor:self.TextColor]]; 
    } 
} 

- (NSAttributedString*)textColor:(NSColor*)color 
{ 
    NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init]; 
    [style setAlignment:NSCenterTextAlignment]; 
    NSDictionary *attrsDictionary = [NSDictionary dictionaryWithObjectsAndKeys: 
             color, NSForegroundColorAttributeName, 
             self.font, NSFontAttributeName, 
             style, NSParagraphStyleAttributeName, nil]; 
    NSAttributedString *attrString = [[NSAttributedString alloc]initWithString:self.title attributes:attrsDictionary]; 
    return attrString; 
} 

EDIT: Кнопка MUST у границы отключен!

Смежные вопросы