Objective-C 在 Mac OS 界面设计中的运用技巧
2022-03-012.8k 阅读
理解 Mac OS 界面设计基础
在 Mac OS 环境下进行界面设计，首先要熟悉其设计理念和基本组件。Mac OS 秉持简洁、直观的设计原则，强调用户体验。其界面组件丰富，包括窗口（Window）、视图（View）、按钮（Button）、文本框（TextField）等。每个组件都有其特定的用途和交互方式。
窗口是应用程序与用户交互的主要区域，它承载着各种视图和控件。在 Objective-C 中，NSWindow 类用于创建和管理窗口。例如，创建一个简单的窗口：
#import <Cocoa/Cocoa.h>
int main(int argc, const char * argv[]) {
@autoreleasepool {
NSWindow *window = [[NSWindow alloc] initWithContentRect:NSMakeRect(100, 100, 400, 300)
styleMask:NSTitledWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask
backing:NSBackingStoreBuffered
defer:NO];
[window setTitle:@"My First Window"];
[window makeKeyAndOrderFront:nil];
}
return NSApplicationMain(argc, argv);
}
上述代码创建了一个具有标题、可关闭、可最小化和可调整大小的窗口，并设置了标题，最后将窗口显示在屏幕上。
视图是窗口中的一个矩形区域，用于绘制和响应用户交互。NSView 是所有视图类的基类。例如，我们可以创建一个自定义视图并添加到窗口中：
#import <Cocoa/Cocoa.h>
@interface MyView : NSView
@end
@implementation MyView
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
NSColor *fillColor = [NSColor blueColor];
[fillColor setFill];
NSRectFill(dirtyRect);
}
@end
int main(int argc, const char * argv[]) {
@autoreleasepool {
NSWindow *window = [[NSWindow alloc] initWithContentRect:NSMakeRect(100, 100, 400, 300)
styleMask:NSTitledWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask
backing:NSBackingStoreBuffered
defer:NO];
[window setTitle:@"My First Window"];
MyView *myView = [[MyView alloc] initWithFrame:NSMakeRect(0, 0, 400, 300)];
[window.contentView addSubview:myView];
[window makeKeyAndOrderFront:nil];
}
return NSApplicationMain(argc, argv);
}
此代码创建了一个自定义视图 MyView，在视图的 drawRect: 方法中绘制了一个蓝色的矩形填充整个视图区域，并将该视图添加到窗口的内容视图中。
布局管理
在 Mac OS 界面设计中，布局管理至关重要，它确保界面在不同屏幕尺寸和设备上都能保持良好的显示效果。在 Objective-C 中，常用的布局方式有自动布局（Auto Layout）和弹簧与支柱（Springs and Struts）。
弹簧与支柱
弹簧与支柱方式通过设置视图的边距和拉伸属性来控制视图的位置和大小。例如，我们有一个按钮，希望它在窗口大小改变时始终保持在右下角：
#import <Cocoa/Cocoa.h>
int main(int argc, const char * argv[]) {
@autoreleasepool {
NSWindow *window = [[NSWindow alloc] initWithContentRect:NSMakeRect(100, 100, 400, 300)
styleMask:NSTitledWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask
backing:NSBackingStoreBuffered
defer:NO];
[window setTitle:@"Spring and Strut Example"];
NSButton *button = [NSButton buttonWithTitle:@"Button" target:nil action:nil];
[button setFrame:NSMakeRect(300, 200, 80, 30)];
[window.contentView addSubview:button];
// 设置弹簧与支柱
[button setAutoresizingMask:NSViewMinXMargin | NSViewMinYMargin];
[window makeKeyAndOrderFront:nil];
}
return NSApplicationMain(argc, argv);
}
在上述代码中，通过设置按钮的 autoresizingMask 属性为 NSViewMinXMargin | NSViewMinYMargin，表示按钮的左边距和上边距会随着窗口大小变化而保持不变，从而使按钮始终位于右下角。
自动布局
自动布局则通过约束（Constraints）来定义视图之间的关系。例如，创建两个按钮，一个在另一个的下方，且保持一定间距：
#import <Cocoa/Cocoa.h>
int main(int argc, const char * argv[]) {
@autoreleasepool {
NSWindow *window = [[NSWindow alloc] initWithContentRect:NSMakeRect(100, 100, 400, 300)
styleMask:NSTitledWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask
backing:NSBackingStoreBuffered
defer:NO];
[window setTitle:@"Auto Layout Example"];
NSButton *button1 = [NSButton buttonWithTitle:@"Button 1" target:nil action:nil];
[button1 setTranslatesAutoresizingMaskIntoConstraints:NO];
[window.contentView addSubview:button1];
NSButton *button2 = [NSButton buttonWithTitle:@"Button 2" target:nil action:nil];
[button2 setTranslatesAutoresizingMaskIntoConstraints:NO];
[window.contentView addSubview:button2];
// 添加约束
NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:button1
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:window.contentView
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0];
NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:button1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:window.contentView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:50];
NSLayoutConstraint *constraint3 = [NSLayoutConstraint constraintWithItem:button2
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:window.contentView
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0];
NSLayoutConstraint *constraint4 = [NSLayoutConstraint constraintWithItem:button2
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:button1
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:20];
[window.contentView addConstraints:@[constraint1, constraint2, constraint3, constraint4]];
[window makeKeyAndOrderFront:nil];
}
return NSApplicationMain(argc, argv);
}
上述代码首先创建了两个按钮，并将它们的 translatesAutoresizingMaskIntoConstraints 属性设置为 NO，表示不使用弹簧与支柱方式布局。然后通过 NSLayoutConstraint 创建了四个约束，分别控制按钮 1 的水平居中、顶部位置，以及按钮 2 的水平居中、与按钮 1 的垂直间距关系，并将这些约束添加到窗口的内容视图中。
菜单设计
菜单是 Mac OS 应用程序中不可或缺的部分，它为用户提供了各种操作选项。在 Objective-C 中，通过 NSMenu 和 NSMenuItem 类来创建和管理菜单。
创建菜单栏
以下是创建一个简单菜单栏的示例：
#import <Cocoa/Cocoa.h>
@interface AppDelegate : NSObject <NSApplicationDelegate>
@end
@implementation AppDelegate
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
NSMenu *mainMenu = [[NSMenu alloc] initWithTitle:@"MainMenu"];
NSMenuItem *fileMenuItem = [[NSMenuItem alloc] initWithTitle:@"File" action:nil keyEquivalent:@""];
[mainMenu addItem:fileMenuItem];
NSMenu *fileSubMenu = [[NSMenu alloc] initWithTitle:@"File"];
NSMenuItem *newMenuItem = [[NSMenuItem alloc] initWithTitle:@"New" action:nil keyEquivalent:@"n"];
[fileSubMenu addItem:newMenuItem];
NSMenuItem *openMenuItem = [[NSMenuItem alloc] initWithTitle:@"Open" action:nil keyEquivalent:@"o"];
[fileSubMenu addItem:openMenuItem];
[fileMenuItem setSubmenu:fileSubMenu];
NSMenu *editMenuItem = [[NSMenuItem alloc] initWithTitle:@"Edit" action:nil keyEquivalent:@""];
[mainMenu addItem:editMenuItem];
NSMenu *editSubMenu = [[NSMenu alloc] initWithTitle:@"Edit"];
NSMenuItem *cutMenuItem = [[NSMenuItem alloc] initWithTitle:@"Cut" action:nil keyEquivalent:@"x"];
[editSubMenu addItem:cutMenuItem];
NSMenuItem *copyMenuItem = [[NSMenuItem alloc] initWithTitle:@"Copy" action:nil keyEquivalent:@"c"];
[editSubMenu addItem:copyMenuItem];
[editMenuItem setSubmenu:editSubMenu];
NSApplication *app = [NSApplication sharedApplication];
[app setMainMenu:mainMenu];
}
@end
int main(int argc, const char * argv[]) {
@autoreleasepool {
AppDelegate *appDelegate = [[AppDelegate alloc] init];
NSApplication *app = [NSApplication sharedApplication];
[app setDelegate:appDelegate];
return NSApplicationMain(argc, argv);
}
}
上述代码首先创建了一个主菜单 mainMenu，然后创建了 “File” 和 “Edit” 菜单项，并分别为它们创建了子菜单，添加了相应的子菜单项，如 “New”、“Open”、“Cut”、“Copy” 等。最后将主菜单设置为应用程序的菜单栏。
处理菜单点击事件
为了使菜单具有实际功能，需要为菜单项添加点击事件处理方法。例如，为 “New” 菜单项添加一个创建新文档的功能：
#import <Cocoa/Cocoa.h>
@interface AppDelegate : NSObject <NSApplicationDelegate>
- (IBAction)newDocument:(id)sender;
@end
@implementation AppDelegate
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
NSMenu *mainMenu = [[NSMenu alloc] initWithTitle:@"MainMenu"];
NSMenuItem *fileMenuItem = [[NSMenuItem alloc] initWithTitle:@"File" action:nil keyEquivalent:@""];
[mainMenu addItem:fileMenuItem];
NSMenu *fileSubMenu = [[NSMenu alloc] initWithTitle:@"File"];
NSMenuItem *newMenuItem = [[NSMenuItem alloc] initWithTitle:@"New" action:@selector(newDocument:) keyEquivalent:@"n"];
[fileSubMenu addItem:newMenuItem];
NSMenuItem *openMenuItem = [[NSMenuItem alloc] initWithTitle:@"Open" action:nil keyEquivalent:@"o"];
[fileSubMenu addItem:openMenuItem];
[fileMenuItem setSubmenu:fileSubMenu];
NSMenu *editMenuItem = [[NSMenuItem alloc] initWithTitle:@"Edit" action:nil keyEquivalent:@""];
[mainMenu addItem:editMenuItem];
NSMenu *editSubMenu = [[NSMenu alloc] initWithTitle:@"Edit"];
NSMenuItem *cutMenuItem = [[NSMenuItem alloc] initWithTitle:@"Cut" action:nil keyEquivalent:@"x"];
[editSubMenu addItem:cutMenuItem];
NSMenuItem *copyMenuItem = [[NSMenuItem alloc] initWithTitle:@"Copy" action:nil keyEquivalent:@"c"];
[editSubMenu addItem:copyMenuItem];
[editMenuItem setSubmenu:editSubMenu];
NSApplication *app = [NSApplication sharedApplication];
[app setMainMenu:mainMenu];
}
- (IBAction)newDocument:(id)sender {
NSLog(@"Creating a new document...");
// 实际创建新文档的代码可以在此处添加
}
@end
int main(int argc, const char * argv[]) {
@autoreleasepool {
AppDelegate *appDelegate = [[AppDelegate alloc] init];
NSApplication *app = [NSApplication sharedApplication];
[app setDelegate:appDelegate];
return NSApplicationMain(argc, argv);
}
}
在上述代码中，为 “New” 菜单项设置了 action 为 @selector(newDocument:)，当用户点击该菜单项时，会调用 AppDelegate 类中的 newDocument: 方法，这里简单地打印了一条日志，实际应用中可以在此方法中添加创建新文档的具体代码。
图形绘制与动画
在 Mac OS 界面设计中，图形绘制和动画可以增强用户体验，使界面更加生动和吸引人。
图形绘制
在 Objective-C 中，可以使用 NSGraphicsContext 和各种图形绘制类来进行图形绘制。例如，绘制一个圆形：
#import <Cocoa/Cocoa.h>
@interface DrawingView : NSView
@end
@implementation DrawingView
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
NSBezierPath *circlePath = [NSBezierPath bezierPathWithOvalInRect:NSMakeRect(100, 100, 200, 200)];
NSColor *fillColor = [NSColor redColor];
[fillColor setFill];
[circlePath fill];
NSColor *strokeColor = [NSColor blackColor];
[strokeColor setStroke];
[circlePath setLineWidth:2.0];
[circlePath stroke];
}
@end
int main(int argc, const char * argv[]) {
@autoreleasepool {
NSWindow *window = [[NSWindow alloc] initWithContentRect:NSMakeRect(100, 100, 400, 300)
styleMask:NSTitledWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask
backing:NSBackingStoreBuffered
defer:NO];
[window setTitle:@"Drawing Example"];
DrawingView *drawingView = [[DrawingView alloc] initWithFrame:NSMakeRect(0, 0, 400, 300)];
[window.contentView addSubview:drawingView];
[window makeKeyAndOrderFront:nil];
}
return NSApplicationMain(argc, argv);
}
上述代码创建了一个自定义视图 DrawingView，在其 drawRect: 方法中，使用 NSBezierPath 创建了一个圆形路径，设置了填充颜色为红色，边框颜色为黑色，并设置了边框宽度，最后绘制了圆形。
动画效果
可以使用 CAAnimation 及其子类来实现动画效果。例如，让一个视图在窗口中从左到右移动：
#import <Cocoa/Cocoa.h>
#import <QuartzCore/QuartzCore.h>
@interface MovingView : NSView
@end
@implementation MovingView
@end
int main(int argc, const char * argv[]) {
@autoreleasepool {
NSWindow *window = [[NSWindow alloc] initWithContentRect:NSMakeRect(100, 100, 400, 300)
styleMask:NSTitledWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask
backing:NSBackingStoreBuffered
defer:NO];
[window setTitle:@"Animation Example"];
MovingView *movingView = [[MovingView alloc] initWithFrame:NSMakeRect(0, 100, 50, 50)];
[movingView setWantsLayer:YES];
[window.contentView addSubview:movingView];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.x"];
animation.fromValue = @(0);
animation.toValue = @(350);
animation.duration = 2.0;
animation.repeatCount = HUGE_VALF;
animation.autoreverses = YES;
[movingView.layer addAnimation:animation forKey:@"moveAnimation"];
[window makeKeyAndOrderFront:nil];
}
return NSApplicationMain(argc, argv);
}
上述代码创建了一个 MovingView，并设置其 wantsLayer 属性为 YES，以启用 Core Animation 支持。然后创建了一个 CABasicAnimation，指定动画的关键路径为 position.x，表示沿 x 轴移动，设置了起始值、结束值、持续时间、重复次数和是否自动反转等属性，最后将动画添加到视图的层上，使视图在窗口中从左到右移动并自动反转。
颜色与字体处理
颜色和字体是界面设计中影响视觉效果的重要因素。
颜色处理
在 Objective-C 中，NSColor 类用于处理颜色。可以通过多种方式创建颜色对象，例如：
NSColor *redColor = [NSColor redColor];
NSColor *customColor = [NSColor colorWithCalibratedRed:0.5 green:0.2 blue:0.8 alpha:1.0];
上述代码中，[NSColor redColor] 创建了一个预定义的红色，而 [NSColor colorWithCalibratedRed:0.5 green:0.2 blue:0.8 alpha:1.0] 通过指定红、绿、蓝和透明度分量创建了一个自定义颜色。
在视图绘制中使用颜色：
#import <Cocoa/Cocoa.h>
@interface ColorView : NSView
@end
@implementation ColorView
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
NSColor *fillColor = [NSColor colorWithCalibratedRed:0.3 green:0.6 blue:0.2 alpha:1.0];
[fillColor setFill];
NSRectFill(dirtyRect);
}
@end
int main(int argc, const char * argv[]) {
@autoreleasepool {
NSWindow *window = [[NSWindow alloc] initWithContentRect:NSMakeRect(100, 100, 400, 300)
styleMask:NSTitledWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask
backing:NSBackingStoreBuffered
defer:NO];
[window setTitle:@"Color Example"];
ColorView *colorView = [[ColorView alloc] initWithFrame:NSMakeRect(0, 0, 400, 300)];
[window.contentView addSubview:colorView];
[window makeKeyAndOrderFront:nil];
}
return NSApplicationMain(argc, argv);
}
此代码创建了一个 ColorView，在 drawRect: 方法中设置了一个自定义颜色并填充整个视图区域。
字体处理
NSFont 类用于管理字体。例如，获取系统默认字体并设置字体大小：
NSFont *systemFont = [NSFont systemFontOfSize:14];
在文本绘制中使用字体：
#import <Cocoa/Cocoa.h>
@interface FontView : NSView
@end
@implementation FontView
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
NSFont *systemFont = [NSFont systemFontOfSize:20];
NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:@"Hello, Objective-C!" attributes:@{NSFontAttributeName: systemFont}];
NSPoint origin = NSMakePoint(100, 150);
[attributedString drawAtPoint:origin];
}
@end
int main(int argc, const char * argv[]) {
@autoreleasepool {
NSWindow *window = [[NSWindow alloc] initWithContentRect:NSMakeRect(100, 100, 400, 300)
styleMask:NSTitledWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask
backing:NSBackingStoreBuffered
defer:NO];
[window setTitle:@"Font Example"];
FontView *fontView = [[FontView alloc] initWithFrame:NSMakeRect(0, 0, 400, 300)];
[window.contentView addSubview:fontView];
[window makeKeyAndOrderFront:nil];
}
return NSApplicationMain(argc, argv);
}
上述代码创建了一个 FontView，在 drawRect: 方法中获取了系统字体并设置大小为 20，创建了一个带有该字体的属性字符串，并将其绘制在视图的指定位置。
用户交互处理
良好的用户交互是 Mac OS 应用程序成功的关键。在 Objective-C 中，可以通过多种方式处理用户交互。
按钮点击事件
如前面菜单设计部分提到的，按钮点击事件可以通过设置 action 方法来处理。例如：
#import <Cocoa/Cocoa.h>
@interface ButtonViewController : NSObject <NSApplicationDelegate>
- (IBAction)buttonClicked:(id)sender;
@end
@implementation ButtonViewController
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
NSWindow *window = [[NSWindow alloc] initWithContentRect:NSMakeRect(100, 100, 400, 300)
styleMask:NSTitledWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask
backing:NSBackingStoreBuffered
defer:NO];
[window setTitle:@"Button Click Example"];
NSButton *button = [NSButton buttonWithTitle:@"Click Me" target:self action:@selector(buttonClicked:)];
[button setFrame:NSMakeRect(150, 120, 100, 30)];
[window.contentView addSubview:button];
[window makeKeyAndOrderFront:nil];
}
- (IBAction)buttonClicked:(id)sender {
NSLog(@"Button was clicked!");
}
@end
int main(int argc, const char * argv[]) {
@autoreleasepool {
ButtonViewController *viewController = [[ButtonViewController alloc] init];
NSApplication *app = [NSApplication sharedApplication];
[app setDelegate:viewController];
return NSApplicationMain(argc, argv);
}
}
在上述代码中，创建了一个按钮，并将其 target 设置为 self（即 ButtonViewController 实例），action 设置为 @selector(buttonClicked:)，当按钮被点击时，会调用 buttonClicked: 方法并打印日志。
文本框输入处理
对于文本框的输入处理，可以通过 NSTextField 的委托方法来实现。例如，监听文本框内容变化：
#import <Cocoa/Cocoa.h>
@interface TextFieldViewController : NSObject <NSApplicationDelegate, NSTextFieldDelegate>
@end
@implementation TextFieldViewController
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
NSWindow *window = [[NSWindow alloc] initWithContentRect:NSMakeRect(100, 100, 400, 300)
styleMask:NSTitledWindowMask | NSClosableWindowMask | NSMiniaturizableWindowMask | NSResizableWindowMask
backing:NSBackingStoreBuffered
defer:NO];
[window setTitle:@"TextField Example"];
NSTextField *textField = [[NSTextField alloc] initWithFrame:NSMakeRect(100, 150, 200, 24)];
[textField setDelegate:self];
[window.contentView addSubview:textField];
[window makeKeyAndOrderFront:nil];
}
- (void)controlTextDidChange:(NSNotification *)obj {
NSTextField *textField = (NSTextField *)[obj object];
NSString *text = [textField stringValue];
NSLog(@"Text changed to: %@", text);
}
@end
int main(int argc, const char * argv[]) {
@autoreleasepool {
TextFieldViewController *viewController = [[TextFieldViewController alloc] init];
NSApplication *app = [NSApplication sharedApplication];
[app setDelegate:viewController];
return NSApplicationMain(argc, argv);
}
}
上述代码创建了一个文本框，并将其委托设置为 TextFieldViewController 实例。当文本框内容发生变化时，会调用 controlTextDidChange: 方法，在此方法中获取文本框的当前内容并打印日志。
界面设计的优化与最佳实践
在进行 Mac OS 界面设计时，有一些优化和最佳实践可以遵循，以提高应用程序的性能和用户体验。
性能优化
- 减少不必要的绘制：在视图的
drawRect:方法中，只绘制需要更新的部分，避免每次都进行全量绘制。可以通过dirtyRect参数获取需要更新的区域，并根据此区域进行绘制。 - 合理使用内存：及时释放不再使用的对象，避免内存泄漏。例如，对于不再使用的视图或动画对象，应调用
release方法（在 ARC 环境下，系统会自动管理内存释放）。 - 异步加载：对于一些耗时操作，如加载图片或数据，应使用异步加载方式，避免阻塞主线程，导致界面卡顿。可以使用
NSOperationQueue或 Grand Central Dispatch（GCD）来实现异步任务。
最佳实践
- 遵循 Mac OS 设计规范：保持与 Mac OS 系统风格一致，使用标准的界面组件和交互方式，这样用户能够快速熟悉应用程序的操作。
- 提供清晰的导航和反馈：确保用户在应用程序中能够轻松找到所需功能，并及时得到操作反馈，例如按钮点击后的状态变化、操作结果提示等。
- 测试不同屏幕尺寸和分辨率：在开发过程中，要在不同的 Mac 设备上进行测试，确保界面在各种屏幕尺寸和分辨率下都能正常显示和交互。
通过遵循这些优化和最佳实践，可以创建出高性能、用户友好的 Mac OS 应用程序界面。
以上就是关于 Objective - C 在 Mac OS 界面设计中的运用技巧，涵盖了界面基础、布局、菜单、图形动画、颜色字体、用户交互以及优化等多个方面，希望能帮助开发者在 Mac OS 平台上创建出优秀的应用程序界面。