如何使用图像和名称创建自定义navigationController？

Question

我的目标是创建一个看起来像这样的UI

我能想到的唯一方法是在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

执行此操作的最佳方法是使navigationBar基本上不可见。以下是我为实现您想要的外观所做的工作：

第1步：

添加导航控制器和视图控制器并保持控制并从导航控制器拖动到视图控制器并选择根视图控制器（我相信您已经完成了）。此外，将UIBarButtonItem拖放到视图控制器中的navigationBar上，而不是导航控制器中的navigationBar。

第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 2

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

Answer 3

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

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

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

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

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

Answer 4

首先，在控制器类的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 5

  

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

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)