Mac開發如果覺得系統自帶Slider不好看，可以通過重繪讓自己軟件的Slider變得好看一點。與iOS開發不同的是，Mac開發控件重繪沒有那么直接，但也不算復雜。下面說一下怎么通過繼承NSSlider和NSSliderCell重繪NSSlider。

新建一個Project，名字為：CustomSlider。打開Main.storyboard，從IB中拉幾個slider，如圖一所示：

圖一

新建幾個類，分別是CustomSlider、CustomSliderCell和NSColor+Hexa，下面是這幾個類的詳細內容：

CustomSlider.h

// // CustomSlider.h // X300A // // Created by Chen Ling on 15/3/2018. // Copyright ? 2018 Chen Ling. All rights reserved. //#import <Cocoa/Cocoa.h>@interface CustomSlider : NSSlider@end

CustomSlider.m

// // CustomSlider.m // CustomSlider // // Created by Chen Ling on 15/3/2018. // Copyright ? 2018 Chen Ling. All rights reserved. //#import "CustomSlider.h"@interface CustomSlider()@property (nonatomic, strong) NSTrackingArea *trackingArea;@end@implementation CustomSlider- (instancetype)initWithCoder:(NSCoder *)coder {if (self = [super initWithCoder:coder]) {// init code here}return self; }#pragma mark - 設置mouse追蹤區域 -(void)updateTrackingAreas {[super updateTrackingAreas];if(_trackingArea != nil) {[self removeTrackingArea:_trackingArea];}int opts = (NSTrackingMouseEnteredAndExited | NSTrackingActiveAlways);// 將設置追蹤區域為控件大小// 設置鼠標追蹤區域，如果不設置追蹤區域，mouseEntered和mouseExited會無效_trackingArea = [ [NSTrackingArea alloc] initWithRect:[self bounds]options:optsowner:selfuserInfo:nil];[self addTrackingArea:_trackingArea]; }- (void)drawRect:(NSRect)dirtyRect {[super drawRect:dirtyRect];// Drawing code here. }#pragma mark - 點擊knob效果, 屏蔽就沒有點下去的效果 - (BOOL)needsPanelToBecomeKey{[super needsPanelToBecomeKey];return YES; }//- (BOOL)becomeFirstResponder{ // [super becomeFirstResponder]; // return YES; //}#pragma mark - mouse action - (void)mouseEntered:(NSEvent *)theEvent {[super mouseEntered:theEvent];NSLog(@"mouseEntered");self.highlighted = YES; }- (void)mouseExited:(NSEvent *)theEvent {[super mouseExited:theEvent];NSLog(@"mouseExited");self.highlighted = NO; }@end CustomSliderCell.h // // CustomSliderCell.h // CustomSlider // // Created by Chen Ling on 15/3/2018. // Copyright ? 2018 Chen Ling. All rights reserved.#import <Cocoa/Cocoa.h>#define ColorWithRGB(colorCode) [NSColor colorWithDeviceRed:((colorCode>>16)&0xFF)/255.0 green:((colorCode>>8)&0xFF)/255.0 blue:((colorCode)&0xFF)/255.0 alpha:1.0];#define SLIDER_PROGRESS_DEFAUT_COLOR ColorWithRGB(0x3399FF) #define SLIDER_BACKGROUND_DEFAUT_COLOR ColorWithRGB(0x969696) #define SLIDER_KNOB_DEFAUT_COLOR ColorWithRGB(0x3399FF) #define SLIDER_DEFAUT_HEIGHT 3.0 #define SLIDER_DEFAUT_BAR_RADIUS 5.0 #define SLIDER_DEFAUT_KNOB_WIDTH 8.0 #define SLIDER_DEFAUT_KNOB_HEIGHT 8.0IB_DESIGNABLE @interface CustomSliderCell : NSSliderCell@property (nonatomic, strong) IBInspectable NSColor *sliderProgressColor; @property (nonatomic, strong) IBInspectable NSColor *sliderBackgroundColor; @property (nonatomic, strong) IBInspectable NSColor *sliderKnobColor; @property (nonatomic, assign) IBInspectable CGFloat sliderHeight; @property (nonatomic, assign) IBInspectable CGFloat sliderBarRadius; @property (nonatomic, assign) IBInspectable CGFloat sliderKnobWidth; @property (nonatomic, assign) IBInspectable CGFloat sliderKnobHeight; @end

CustomSliderCell.m

// // CustomSliderCell.m // CustomSlider // // Created by Chen Ling on 15/3/2018. // Copyright ? 2018 Chen Ling. All rights reserved. //#import "CustomSliderCell.h" #import "NSColor+Hexa.h" #import "CustomSlider.h"@interface CustomSliderCell()// save leftBar's frame, and use to caculate Knob's frame @property (assign) NSRect leftBarRect;@end@implementation CustomSliderCell-(instancetype)initWithCoder:(NSCoder *)coder {if (self = [super initWithCoder:coder]) {self.sliderProgressColor = SLIDER_PROGRESS_DEFAUT_COLOR;self.sliderBackgroundColor = SLIDER_BACKGROUND_DEFAUT_COLOR;self.sliderKnobColor = SLIDER_KNOB_DEFAUT_COLOR;self.sliderHeight = SLIDER_DEFAUT_HEIGHT;self.sliderBarRadius = SLIDER_DEFAUT_BAR_RADIUS;self.sliderKnobWidth = SLIDER_DEFAUT_KNOB_WIDTH;self.sliderKnobHeight = SLIDER_DEFAUT_KNOB_HEIGHT;}return self; }- (void)drawBarInside:(NSRect)rect flipped:(BOOL)flipped {rect.size.height = self.sliderHeight;// Bar radiusCGFloat barRadius = self.sliderBarRadius;// Knob position depending on control min/max value and current control value.CGFloat value = ([self doubleValue] - [self minValue]) / ([self maxValue] - [self minValue]);// Final Left Part WidthCGFloat finalWidth = value * ([[self controlView] frame].size.width - self.sliderKnobWidth);// Left Part RectNSRect leftRect = rect;leftRect.size.width = finalWidth;self.leftBarRect = leftRect;// Draw Left PartNSBezierPath* bg = [NSBezierPath bezierPathWithRoundedRect: rect xRadius: barRadius yRadius: barRadius];[self.sliderBackgroundColor setFill];[bg fill];// Draw Right PartNSBezierPath* active = [NSBezierPath bezierPathWithRoundedRect: leftRect xRadius: barRadius yRadius: barRadius];[self.sliderProgressColor setFill];[active fill];}- (void)drawKnob:(NSRect)knobRect {if (((CustomSlider *)self.controlView).highlighted) {NSRect customKnobRect = NSMakeRect(_leftBarRect.size.width, _leftBarRect.origin.y + _leftBarRect.size.height / 2 - self.sliderKnobHeight / 2, self.sliderKnobWidth, self.sliderKnobHeight);// Draw Left PartNSBezierPath* bg = [NSBezierPath bezierPathWithRoundedRect: customKnobRect xRadius: self.sliderKnobWidth / 2 yRadius: self.sliderKnobHeight / 2];[self.sliderKnobColor setFill];[bg fill];}}@end

NSColor+Hexa.h

// // NSColor+Hexa.h // CustomSlider // // Created by Chen Ling on 15/3/2018. // Copyright ? 2018 Chen Ling. All rights reserved. // //#import <Cocoa/Cocoa.h>@interface NSColor (Hexa)+ (NSColor *)colorFromHexadecimalValue:(NSString *)hexaString;@end NSColor+Hexa.m // // NSColor+Hexa.m // CustomSlider // // Created by Chen Ling on 15/3/2018. // Copyright ? 2018 Chen Ling. All rights reserved. // //#import "NSColor+Hexa.h"@implementation NSColor (Hexa)+ (NSColor *)colorFromHexadecimalValue:(NSString *)hexaString {if ([hexaString hasPrefix:@"#"]) {hexaString = [hexaString substringWithRange:NSMakeRange(1, [hexaString length] - 1)];}unsigned int colorCode = 0;if (hexaString) {NSScanner *scanner = [NSScanner scannerWithString:hexaString];(void)[scanner scanHexInt:&colorCode];}return [NSColor colorWithDeviceRed:((colorCode>>16)&0xFF)/255.0 green:((colorCode>>8)&0xFF)/255.0 blue:((colorCode)&0xFF)/255.0 alpha:1.0]; } @end

將前面那三個NSSlider的類分別設置為CustomSlider，將它們的NSSliderCell的類設置為CustomSliderCell，在NSSliderCell的Attributes Inspector中分別設置為如圖二圖三圖四所示：

????????

圖二

圖三

圖四

運行效果：

github地址：https://github.com/Mozartisnotmyname/CustomSlider

總結

以上是生活随笔為你收集整理的Mac开发之重写NSSlider（比酷狗的播放进度条好看）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。