如何绘制自定义窗口控件(关闭,最小化和缩放按钮)

时间:2012-09-18 05:41:13

标签: objective-c macos cocoa

我尝试绘制自定义NSButton,但似乎我在这里重新发明轮子。有没有办法只替换用于关闭,最小化和缩放按钮的默认图像?

有几个应用程序已经这样做了:

  • OSX 10.8的提醒应用程序(当窗口不是键时它们显示为深灰色,而大多数显示为浅灰色)
  • Tweetbot(所有按钮看起来完全自定义)

更多信息:

我可以生成系统默认值standardWindowButton:NSWindowCloseButton。但是从那里setImage setter不会改变按钮的外观。

1 个答案:

答案 0 :(得分:26)

修改:自从我写这篇文章以来,INAppStore已经用INWindowButton实现了一个很好的方法。如果您正在寻找拖放解决方案,请检查,但下面的代码仍然可以帮助您实现自己的。


所以我找不到改变standardWindowButton的方法。以下是我如何创建自己的按钮的演练。

注意:按钮可以有4种状态

  • 窗口无效Window Inactive Controls
  • 窗口处于活动状态 - 正常Window Active Normal Controls
  • 窗口处于活动状态 - 悬停Window Active Hover Controls
  • 窗口处于活动状态 - 按Window Active Press Controls

参加演练!

第1步:隐藏预先存在的按钮

NSButton *windowButton = [self standardWindowButton:NSWindowCloseButton];
[windowButton setHidden:YES];
windowButton = [self standardWindowButton:NSWindowMiniaturizeButton];
[windowButton setHidden:YES];
windowButton = [self standardWindowButton:NSWindowZoomButton];
[windowButton setHidden:YES];

步骤2:在Interface Builder中设置视图

您会注意到,在悬停按钮时,所有按钮都会更改为悬停状态,因此我们需要一个容器视图来拾取悬停。

  • 创建容量视图为54px宽x 16px高。
  • 在容器视图内创建3个方形样式NSButton,每个14px宽x 16px高。
  • 将按钮放在一边,以便中间有6px的间隙。

设置按钮

  • 在属性检查器中,将每个按钮的Image属性设置为窗口活动正常图像。
  • Alternate图像属性设置为窗口活动按图像。
  • 关闭Bordered
  • Type设置为Momentary Change
  • 对于每个按钮,将标识符设置为closeminimizezoom(下面您将看到如何使用它来简化NSButton子类)

第3步:对容器视图&进行子类化按钮

<强>集装箱:

创建一个新文件,子类NSView。在这里,我们将使用通知中心告诉按钮何时应切换到其悬停状态。

HMTrafficLightButtonsContainer.m

// Tells the view to pick up the hover event
- (void)viewDidMoveToWindow {
    [self addTrackingRect:[self bounds]
                    owner:self
                 userData:nil
             assumeInside:NO];
}

// When the mouse enters/exits we send out these notifications
- (void)mouseEntered:(NSEvent *)theEvent {
    [[NSNotificationCenter defaultCenter] postNotificationName:@"HMTrafficButtonMouseEnter" object:self];
}
- (void)mouseExited:(NSEvent *)theEvent {
    [[NSNotificationCenter defaultCenter] postNotificationName:@"HMTrafficButtonMouseExit" object:self];        
}

<强>按钮:

创建一个新文件,这次是子类NSButton。这个有点解释,所以我只发布所有代码。

HMTrafficLightButton.m

@implementation HMTrafficLightButton {
    NSImage *inactive;
    NSImage *active;
    NSImage *hover;
    NSImage *press;
    BOOL activeState;
    BOOL hoverState;
    BOOL pressedState;
}

-(id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {        
        [self setup];
    }
    return self;
}

- (id)initWithFrame:(NSRect)frameRect {
    self = [super initWithFrame:frameRect];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)setup {
    // Setup images, we use the identifier to chose which image to load
    active = [NSImage imageNamed:[NSString stringWithFormat:@"window-button-%@-active",self.identifier]];
    hover = [NSImage imageNamed:[NSString stringWithFormat:@"window-button-%@-hover",self.identifier]];
    press = [NSImage imageNamed:[NSString stringWithFormat:@"window-button-%@-press",self.identifier]];
    inactive = [NSImage imageNamed:@"window-button-all-inactive"];

    // Checks to see if window is active or inactive when the `init` is called
    if ([self.window isMainWindow] && [[NSApplication sharedApplication] isActive]) {
        [self setActiveState];
    } else {
        [self setInactiveState];
    }

    // Watch for hover notifications from the container view
    // Also watches for notifications for when the window
    // becomes/resigns main
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(setActiveState)
                                                 name:NSWindowDidBecomeMainNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(setInactiveState)
                                                 name:NSWindowDidResignMainNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(hoverIn)
                                                 name:@"HMTrafficButtonMouseEnter"
                                               object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(hoverOut)
                                                 name:@"HMTrafficButtonMouseExit"
                                               object:nil];
}

- (void)mouseDown:(NSEvent *)theEvent {
    pressedState = YES;
    hoverState = NO;
    [super mouseDown:theEvent];
}

- (void)mouseUp:(NSEvent *)theEvent {
    pressedState = NO;
    hoverState = YES;
    [super mouseUp:theEvent];
}

- (void)setActiveState {
    activeState = YES;
    if (hoverState) {
        [self setImage:hover];
    } else {
        [self setImage:active];
    }
}

- (void)setInactiveState {
    activeState = NO;
    [self setImage:inactive];
}

- (void)hoverIn {
    hoverState = YES;
    [self setImage:hover];
}

- (void)hoverOut {
    hoverState = NO;
    if (activeState) {
        [self setImage:active];
    } else {
        [self setImage:inactive];
    }
}

- (void)dealloc {
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}

@end

在IB中,将容器视图的自定义类和所有3个按钮设置为我们刚刚创建的各个类。

第4步:设置按钮操作

从视图控制器调用的这些方法与standardWindowButton s'相同。将它们链接到IB中的按钮。

- (IBAction)clickCloseButton:(id)sender {
    [self.view.window close];
}
- (IBAction)clickMinimizeButton:(id)sender {
    [self.view.window miniaturize:sender];
}
- (IBAction)clickZoomButton:(id)sender {
    [self.view.window zoom:sender];
}

第5步:将视图添加到窗口

我有一个专门用于窗口控件的单独的xib和视图控制器设置。视图控制器称为HMWindowControlsController

(HMWindowControlsController*) windowControlsController = [[HMWindowControlsController alloc] initWithNibName:@"WindowControls" bundle:nil];
NSView *windowControlsView = windowControlsController.view;
// Set the position of the window controls, the x is 7 px, the y will
// depend on your titlebar height.
windowControlsView.frame = NSMakeRect(7.0, 10.0, 54.0, 16.0);
// Add to target view
[targetView addSubview:windowControlsView];

希望这会有所帮助。这是一篇相当冗长的文章,如果您认为我犯了错误或遗漏了某些内容,请告诉我。