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

How to make a custom navigation bar with logo and a text in the navigation in iOS?

提问人:user16780334 提问时间:1/21/2021 最后编辑:DuDauser16780334 更新时间:1/22/2021 访问量:5207

问:

由于我来自混合应用程序背景,因此我想在 iOS 中实现包含徽标和文本的 UI。下面是一个蓝色条带,其中包含“Back”和“Registration”作为标题。单击后退后,它将转到上一个控制器。如何实现此 UI?我尝试了以下给定的代码: 但我不确定如何进一步进行。

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图像。enter image description here

iOS Swift iPhone Xcode UIDuageController

评论


答:

5赞 πter 1/21/2021 #1

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

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
}

评论

0赞 user16780334 1/21/2021
谢谢,它下面的蓝色条呢?我需要在故事板中设计它吗?“蓝条”
0赞 πter 1/21/2021
是的,您可以在故事板中设计“蓝条”,但必须手动处理后退动作。另一个说明:您的问题的另一个解决方案是您没有显示导航栏,而是使用它的自定义视图(假导航视图)。它的优点是您不受 navigationBar 给定高度的限制。但这只是一个方面,这真的取决于你的需求。隐藏导航栏:stackoverflow.com/questions/29209453/...