如何使用图像和名称创建自定义导航控制器？

Question

我的目标是创建一个像这样的用户界面

我能想到的唯一方法是在 UIViewController 上嵌入一个 navigationController 然后添加 UIView

故事板

代码 - ProfileViewController

  class ProfileViewController: UIViewController {

     override func viewDidLoad() {
        super.viewDidLoad()
        navigationBarColor()
     }

    func navigationBarColor() {
        navigationController?.navigationBar.backgroundColor = UIColor(red:0.91, green:0.04, blue:0.51, alpha:1.0)
        navigationController?.navigationBar.shadowImage = UIImage()
        navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
      }
  }

结果

我的方法正确吗？还是我需要使用不同的方法来达到这个结果？

Answer 1

您可以对导航栏进行子类化，但是对于这么大的大小，我认为这不是一个好方法。你在做什么似乎没问题。这是一个解决方案。

Answer 2

你的方法会奏效。为了尽可能地匹配您的 Sketch 模型，这里有一些提示：

1. UINavigationBar 的背景颜色应使用barTintColor 属性设置。这将使状态栏具有相同的背景颜色。

2. 将 UINavigationBar 的 barStyle 属性设置为 black。这会将状态栏的内容颜色设置为白色。

3. 您可能会注意到导航栏的颜色与您在其下方创建的视图略有不同。这是因为 UINavigationBar 默认是半透明的，所以背景颜色有一个降低的 alpha 值。您可以将 UINavigationBar 属性 isTranslucent 设置为 false 来解决此问题。

另一种方法（没有 UINavigationController）将涉及创建一个简单的 UIView 用作状态栏背景，如下所示：https://stackoverflow.com/a/43264566/5223633。

Answer 3

第一步，在控制器类的 viewDidLoad 方法中添加这 3 行代码：

navigationController?.navigationBar.barTintColor = UIColor(red:0.91, green:0.04, blue:0.51, alpha:1.0)
navigationController?.navigationBar.tintColor = UIColor.white
UIApplication.shared.statusBarStyle = .lightContent

然后，选择您的 info.plist 文件。打开后，右键单击添加一行。给出密钥名称：

View controller-based status bar appearance

并将其值设置为：

NO

作为布尔值。

see this info.plist screenshot example

然后运行它。

Answer 4

最好的办法是让navigationBar 基本上不可见。以下是我为实现您想要的外观所做的工作：

第 1 步：

添加导航控制器和视图控制器并按住控制并从导航控制器拖动到视图控制器并选择根视图控制器（我很确定您已经完成了）。此外，将 UIBarButtonItem 拖放到视图控制器中的导航栏上，而不是导航控制器中的导航栏上。

第 2 步：

导航控制器和视图控制器的子类，在我的示例中，我的称为 CustomNavController.swift 和 MainVC.swift。在情节提要中，将它们设置为控制器的类。

第 3 步： 在您为视图控制器创建的类中，设置 viewDidLoad 中的代码以更改背景颜色。

import Foundation
import UIKit

class MainVC: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.backgroundColor = UIColor(red: 231/255, green: 11/255, blue: 129/255, alpha: 1)

    }

}

并在导航控制器类中，添加此代码。

import UIKit

class CustomNavController: UINavigationController {

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.

    self.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationBar.shadowImage = UIImage()
    self.navigationBar.isTranslucent = true

    self.navigationBar.tintColor = .white

}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
}

}

结果：

由于您使用的是导航控制器，因此您必须在导航控制器子类中将状态栏样式设置为 lightContent，如上所示。如果您有其他希望状态栏变黑的视图控制器，则必须在类中实现方法 preferredStatusBarStyle 并返回 .default 除非，如果视图控制器有与之关联的导航控制器，则您必须在导航控制器子类中实现preferredStatusBarStyle，就像我在示例中展示的那样。如果您有任何问题，请随时发表评论，我会尽快回复。

Answer 5

您可以在加载后使用 Xib 文件创建自定义视图控制器，并将其视图添加到导航栏中。如果需要，隐藏后退按钮并更新导航栏高度 相应地

navigationItem.hidesBackButton = true
navigationController?.navigationBar.frame.size.height = 100
guard let yourCustomView = UINib(nibName: "yourCustomXib", bundle: nil).instantiate(withOwner: nil, options: nil).first as? YourCustomView else {
 fatalError("Missing yourCustomXib")
}
navigationController?.navigationBar.addSubview(yourCustomView)