iOS 自定义导航栏 NavigationBar

Posted 2023-02-25 itdali

自定义一个导航栏，包括左侧、右侧按钮，中间的title。

效果图：

代码：
Swift版

// 创建一个导航栏
let navBar = UINavigationBar(frame: CGRectMake(0, 20, self.view.frame.size.width, 44))
// 导航栏背景颜色
navBar.barTintColor = UIColor(red: 101/255.0, green: 215/255.0, blue: 237/255.0, alpha: 1.0)

// 自定义导航栏的title，用UILabel实现
let titleLabel = UILabel(frame: CGRectMake(0, 0, 50, 44))
titleLabel.text = "自定义"
titleLabel.textColor = UIColor.whiteColor()
titleLabel.font = UIFont.systemFontOfSize(18)

// 创建导航栏组件
let navItem = UINavigationItem()
// 设置自定义的title
navItem.titleView = titleLabel

// 创建左侧按钮
let leftButton = UIBarButtonItem(title: "leftButton", style: .Plain, target: self, action: "leftButtonClick")
leftButton.tintColor = UIColor.purpleColor()

// 创建右侧按钮
let rightButton = UIBarButtonItem(title: "rightButton", style: .Plain, target: self, action: "rightButtonClick")
rightButton.tintColor = UIColor.orangeColor()

// 添加左侧、右侧按钮
navItem.setLeftBarButtonItem(leftButton, animated: false)
navItem.setRightBarButtonItem(rightButton, animated: false)
// 把导航栏组件加入导航栏
navBar.pushNavigationItem(navItem, animated: false)

// 导航栏添加到view上
self.view.addSubview(navBar)

Objective-C版

// 创建一个导航栏
UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 44)];
// 导航栏背景颜色
navBar.barTintColor = [UIColor colorWithRed:101/255.0 green:215/255.0 blue:237/255.0 alpha:1.0];

// 自定义导航栏的title，用UILabel实现
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 50, 44)];
titleLabel.text = @"自定义";
titleLabel.textColor = [UIColor whiteColor];
titleLabel.font = [UIFont systemFontOfSize:18];

// 创建导航栏组件
UINavigationItem *navItem = [[UINavigationItem alloc] init];
// 设置自定义的title
navItem.titleView = titleLabel;

// 创建左侧按钮
UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"leftButton" style:UIBarButtonItemStylePlain target:self action:@selector(leftButtonClick)];
leftButton.tintColor = [UIColor purpleColor];

// 创建右侧按钮
UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithTitle:@"rightButton" style:UIBarButtonItemStylePlain target:self action:@selector(rightButtonClick)];
rightButton.tintColor = [UIColor orangeColor];

// 添加左侧、右侧按钮
[navItem setLeftBarButtonItem:leftButton animated:false];
[navItem setRightBarButtonItem:rightButton animated:false];
// 把导航栏组件加入导航栏
[navBar pushNavigationItem:navItem animated:false];

// 导航栏添加到view上
[self.view addSubview:navBar];