时间戳

首页 > 解决方案 > 如何在 iOS 的导航中制作带有徽标和文本的自定义导航栏？

ios - 如何在 iOS 的导航中制作带有徽标和文本的自定义导航栏？

问题描述

由于我来自混合应用程序背景，我想在 iOS 中实现一个包含徽标和文本的 UI。下面是一个蓝色条带，其中包含一个“Back”和一个“Registration”作为标题。单击返回时，它会转到上一个控制器。我怎样才能实现这个用户界面？我尝试使用下面的给定代码：但我不确定如何进一步进行。

func addNavBarImage() {
        let navController = navigationController!
        let image = UIImage(named: "logo-signIn6.png") //Your logo url here
        let imageView = UIImageView(image: image)
        let bannerWidth = navController.navigationBar.frame.size.width
        let bannerHeight = navController.navigationBar.frame.size.height
        let bannerX = bannerWidth / 2 - (image?.size.width)! / 2
        let bannerY = bannerHeight / 2 - (image?.size.height)! / 2
        imageView.frame = CGRect(x: bannerX, y: bannerY, width: bannerWidth, height: bannerHeight)
        imageView.contentMode = .scaleAspectFit
        navigationItem.titleView = imageView
    }

下面是我想要实现的 UI 图像。在此处输入图像描述

标签： iosswiftiphonexcodeuinavigationcontroller

解决方案

您可以将自定义视图分配给navigationItem.titleView. 这是一个非常简单的代码，用于将图像和文本分配给titleView. 我鼓励您创建一个单独的视图类，在其中定义您的自定义视图，然后分配给titleView

override func viewDidLoad() {
    super.viewDidLoad()

    let imageView = UIImageView()
    imageView.heightAnchor.constraint(equalToConstant: 30).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 30).isActive = true

    let titleLabel = UILabel()
    titleLabel.text = "Your title"

    let stackView = UIStackView(arrangedSubviews: [imageView, titleLabel])
    stackView.spacing = 5
    stackView.alignment = .center

    // This will assing your custom view to navigation title. 
    navigationItem.titleView = stackView
}

推荐阅读