iOS 導航列自訂：實現中間三顆按鈕的 Navigation Bar 效果

預設的 UINavigationBar 僅支援左右各一個 UIBarButtonItem 以及中間的標題。若需實現如設計圖所示——導航列中間並排三顆自訂按鈕（例如分頁切換、篩選器等），需將中間標題區域替換為自訂 UIView 容器。

完整實作步驟

1. 設定導航列背景圖

[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"nav_bg"] forBarMetrics:UIBarMetricsDefault];

2. 設定左右按鈕（移除預設邊框）

UIBarButtonItem *leftItem = [[UIBarButtonItem alloc] initWithCustomView:leftButton];
UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithCustomView:rightButton];
self.navigationItem.leftBarButtonItem = leftItem;
self.navigationItem.rightBarButtonItem = rightItem;
// 移除按鈕邊框陰影
[self.navigationController.navigationBar setShadowImage:[UIImage new]];

3. 建立中間三顆按鈕容器

UIView *buttonContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 180, 40)];

UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
[btn1 setImage:[UIImage imageNamed:@"btn1_normal"] forState:UIControlStateNormal];
btn1.frame = CGRectMake(0, 0, 40, 40);
[btn1 addTarget:self action:@selector(onTab1:) forControlEvents:UIControlEventTouchUpInside];

UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
[btn2 setImage:[UIImage imageNamed:@"btn2_normal"] forState:UIControlStateNormal];
btn2.frame = CGRectMake(70, 0, 40, 40);
[btn2 addTarget:self action:@selector(onTab2:) forControlEvents:UIControlEventTouchUpInside];

UIButton *btn3 = [UIButton buttonWithType:UIButtonTypeCustom];
[btn3 setImage:[UIImage imageNamed:@"btn3_normal"] forState:UIControlStateNormal];
btn3.frame = CGRectMake(140, 0, 40, 40);
[btn3 addTarget:self action:@selector(onTab3:) forControlEvents:UIControlEventTouchUpInside];

[buttonContainer addSubview:btn1];
[buttonContainer addSubview:btn2];
[buttonContainer addSubview:btn3];

self.navigationItem.titleView = buttonContainer;

關鍵細節與進階技巧

• 按鈕類型用 Custom：避免系統預設高亮、陰影干擾。
• 使用 setImage:forState: 而非直接設定 imageView.image，才能正確處理高亮、禁用狀態。
• 自動佈局適配：若支援 iPhone SE 到 Pro Max 寬度差異，建議改用 UIStackView 平均分佈：

UIStackView *stack = [[UIStackView alloc] initWithArrangedSubviews:@[btn1, btn2, btn3]];
stack.axis = UILayoutConstraintAxisHorizontal;
stack.distribution = UIStackViewDistributionFillEqually;
stack.alignment = UIStackViewAlignmentCenter;
stack.spacing = 10;
stack.frame = CGRectMake(0, 0, 200, 40);
self.navigationItem.titleView = stack;

• 大標題模式（iOS 11+）：若啟用 prefersLargeTitles，自訂 titleView 只在縮小時顯示。大標題模式下需另行處理。

總結

透過 titleView 注入自訂容器，配合 UIButtonTypeCustom 與 UIStackView，即可靈活實現導航列中間多按鈕佈局，滿足多數設計需求。