iOS自定义Navigation Bar教程

Navigation Bar的显示样子可以被定制,这篇教程我们将改变 Navigation Bar 的 background colour,tint color,以及添加一个图片到 Navigation Bar。这篇教程是在Xcode 8.2.1下创建并运行在iOS 10.2系统上的。

打开Xcode并创建一个Single View Application。

Product Name 输入 IOS10CustomizeNavBarTutorial,然后用你自己的组织名称和组织标识符填写 Organization Name 和 Organization IdentifierLanguage 选择Swift,并且在 Devices 确保选中 iPhone

我们需要一张图片放在顶部的Navigation Bar,打开 Assets Library ,然后拖动下载好的图片到里面,打开 Storyboard, 选中 View Controller,然后在顶部的菜单栏点击 Editor,选择 Embed in -> Navigation Controller. 下一步,从 Object Library 拖拽一个 Bar Button 到 Navigation Bar 的左边,并且给它起名为“Left Item”,重复上一个操作在 Navigation Bar 的右边也添加一个“Right Item”。之后 Storyboard 像这样:

打开 ViewController.swift ,添加 ViewDidAppear 方法,如下:

override func viewDidAppear(_ animated: Bool) {
    // 1
    let nav = self.navigationController?.navigationBar
  
    // 2
    nav?.barStyle = UIBarStyle.black
    nav?.tintColor = UIColor.yellow
  
    // 3
    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
    imageView.contentMode = .scaleAspectFit
      
    // 4
    let image = UIImage(named: "Apple_Swift_Logo")
    imageView.image = image
      
    // 5
    navigationItem.titleView = imageView
}

 

  1. 定义了一个保存当前 Navigation Bar 的变量。
  2. 设置 Navigation Bar 的样式为black,并且设置 tint color 为黄色。这将使 Navigation Bar 上的每一个 bar button 变为黄色。
  3. 定义了一个 40个point高度和宽度的图片控件,并且设置它的 contentMode 为 scaleAspectFit,来使图片大小适应图片控件的大小。
  4. 为图片控件绑定之前导入的图片。
  5. 把上面创建的图片控件赋值给了 Navigation Item 的 titleView。

编译并运行项目来显示自定义的 Navigation Bar。

翻译自:https://www.ioscreator.com/tutorials/customizing-navigation-bar-ios-tutorial-ios10

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*