UINavigationController-04设置导航条

前言

• '栈顶控制器',当前用户所看见的控制器,就是栈顶控制器

• 导航条内容,是由'栈顶控制器'的navigationItem来决定得。

• 是对导航条什么地方进行设置?
  

• navigationItem

  • rightBarButtonItem- 显示在右侧的自定义按钮项
  • leftBarButtonItem - 显示在左侧的自定义按钮项
  • title - 导航条的标题
  • titleView- 导航条中心的自定义视图

• UIBarButtonItem

  • - initWithTitle: style: target: action: - 使用标题和其他,初始化.
  • - initWithImage: style: target: action: - 使用图片和其他,初始化
  • - initWithCustomView: - 使用自定义视图,初始化

---

• 设置导航条"左,中,右"标题,且实现右侧按钮点击事件.

  - (void)viewDidLoad {
    [super viewDidLoad];
    UIBarButtonItem *rightBar = [[UIBarButtonItem alloc]init];
    rightBar.title = @"右侧";
    self.navigationItem.rightBarButtonItem = rightBar ;
  
    -- 中间显示的标题
    self.navigationItem.title = @"TwoVC";
  
    UIBarButtonItem*leftBar =[[UIBarButtonItem alloc]initWithTitle:@"左侧" style:0 target:self action:@selector(leftBtnClick)];
    self.navigationItem.leftBarButtonItem = leftBar ;
  }
  

---

• 导航条右侧设置图片

  UIImage * icon= [UIImage imageNamed:@"XXXX"];
  UIBarButtonItem*rightBar = [[UIBarButtonItem alloc]initWithImage:icon style:0 target:self action:@selector(leftBtnClick)];
  self.navigationItem.rightBarButtonItem = rightBar;
  

  • 注意:
    • 系统会自动的把图片渲染成蓝色
      
    • 解决方法: 选中"原图", 在选项Render As - 渲染,中选择Original Image - 原始图片
      

---

• 导航条右侧设置图片按钮(有高亮状态)

  UIImage * iconNorm= [UIImage imageNamed:@"XXXX"];
  UIImage * iconHigh = [UIImage imageNamed:@"XXXX"];
  UIButton * btnTemp = [[UIButton alloc]init];
  [btnTemp setImage:iconNorm forState:UIControlStateNormal];
  [btnTemp setImage:iconHigh forState: UIControlStateHighlighted];
  [btnTemp sizeToFit];
    
  UIBarButtonItem *rightBar = [[UIBarButtonItem alloc]initWithCustomView:btnTemp];
  self.navigationItem.rightBarButtonItem = rightBar;
  

  • 注意:
    • 按钮需要设置W和H,否则不会显示.
      这里无需设置X,Y,因为系统已经弄好了.
    • sizeToFit - 自适应大小(W,H).
      "图片+文字"的最大宽和最大高 = sizeToFit 的宽和高

示例 - 效果图

---

• 导航条中间设置view

   UISegmentedControl * segC = [[UISegmentedControl alloc]initWithItems:@[@"信息",@"电话"]];
   self.navigationItem.titleView = segC;
  

示例-效果图

---