如何快速在自定义导航栏顶部制作一半的 ImageView

Posted 2023-02-23

【中文标题】如何快速在自定义导航栏顶部制作一半的 ImageView

【英文标题】：How to make half of the ImageView on top of custom navigationbar in swift

【发布时间】：2021-03-19 05:26:27

【问题描述】：

我正在为所有视图控制器使用自定义导航栏。但在我的一个视图控制器中，我需要导航栏顶部的一半图像，该怎么做？请帮忙

我需要这样的

对于设计，我使用故事板， 为此，我在 uiview 中拍摄了一个图像视图

uiview 约束

 top = 0, leading = 0, trailing = 0, height = 100

图像视图约束

 top = -40, horizontal center, height, width = 80

现在我变成这样了

我的自定义导航栏代码：请帮助我在一个视图控制器中的导航栏顶部制作图像视图

 func updateNavigationBar(with title : String, isTransparent : Bool = false, isBackNeed : Bool = true, isNotificationNeed : Bool = true, isMenuNeed : Bool = true)
    self.navigationController?.interactivePopGestureRecognizer?.delegate = nil
    self.navigationController?.interactivePopGestureRecognizer?.isEnabled = true
    if isTransparent
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.backgroundColor = .clear
        self.navigationController?.navigationBar.isTranslucent = true
        self.navigationController?.navigationBar.layer.shadowColor = UIColor.black.cgColor
        self.navigationController?.navigationBar.layer.shadowOpacity = 0
        self.navigationController?.navigationBar.layer.shadowOffset = CGSize.zero
        self.navigationController?.navigationBar.layer.shadowRadius = 0
    else
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.backgroundColor = CommonColor.navigationColor
        self.navigationController?.navigationBar.barTintColor = CommonColor.navigationColor
        self.navigationController?.navigationBar.isTranslucent = false
        self.navigationController?.navigationBar.layer.masksToBounds = false
        self.navigationController?.navigationBar.layer.shadowColor = UIColor.black.cgColor
        self.navigationController?.navigationBar.layer.shadowOpacity = 0.2
        self.navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0, height: 2.0)
        self.navigationController?.navigationBar.layer.shadowRadius = 2
    
    let btnTitle = UIBarButtonItem(title: title, style: .plain, target: self, action: #selector(backClick))
    btnTitle.tintColor = .white
    
    let backImageView = UIImageView.init(image: CommonImage.back?.withRenderingMode(.alwaysTemplate))
    backImageView.tintColor = .white
    backImageView.contentMode = .scaleAspectFit
    backImageView.frame = CGRect(x:0.0,y:0.0, width:20,height:25.0)
    backImageView.contentMode = .scaleAspectFit
    backImageView.widthAnchor.constraint(equalToConstant: 20).isActive = true
    backImageView.heightAnchor.constraint(equalToConstant: 25).isActive = true
    backImageView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(backClick)))
    let btnBack = UIBarButtonItem(customView: backImageView)
    
    let menuImageView = UIImageView.init(image: CommonImage.menu?.withRenderingMode(.alwaysTemplate))
    menuImageView.tintColor = .white
    menuImageView.contentMode = .scaleAspectFit
    menuImageView.frame = CGRect(x:0.0,y:0.0, width:25,height:25.0)
    menuImageView.contentMode = .scaleAspectFit
    menuImageView.widthAnchor.constraint(equalToConstant: 25).isActive = true
    menuImageView.heightAnchor.constraint(equalToConstant: 25).isActive = true
    menuImageView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(menuClick)))
    let btnMenu = UIBarButtonItem(customView: menuImageView)
    
    let notificatonView = UIView()
    notificatonView.frame = CGRect(x:0.0,y:0.0, width:32,height:32.0)
    notificatonView.layer.cornerRadius = 8
    notificatonView.alpha = 0.5
    notificatonView.backgroundColor = .white
    notificatonView.clipsToBounds = true
    notificatonView.widthAnchor.constraint(equalToConstant: 32).isActive = true
    notificatonView.heightAnchor.constraint(equalToConstant: 32).isActive = true
    notificatonView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(notificationClick)))
    
    let notificationBtn: BadgeButton = BadgeButton(type: .custom)
    notificationBtn.setImage(CommonImage.notification, for: .normal)
    notificationBtn.addAction(for: .touchUpInside) 
        
    
    notificationBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
    notificationBtn.badgeBackgroundColor = CommonColor.navigationColor
    notificationBtn.badgeTextColor = .white
    if notificatonView.subviews.filter($0 is BadgeButton).count == 0
        notificatonView.addSubview(notificationBtn)
        notificationBtn.center = notificatonView.center
    
    let notificationBarButton = UIBarButtonItem(customView: notificatonView)
    if isBackNeed
        self.navigationItem.setLeftBarButtonItems([btnBack,btnTitle], animated: true)
        self.navigationItem.setRightBarButtonItems( isNotificationNeed ? [notificationBarButton,btnMenu] : [notificationBarButton], animated: true)
    else
        self.navigationItem.setLeftBarButtonItems( isMenuNeed ? [btnMenu,btnTitle] : [btnTitle], animated: true)
        self.navigationItem.setRightBarButtonItems( isNotificationNeed ? [notificationBarButton] : nil, animated: true)
    

如何在导航栏顶部显示一半的图像视图请帮忙

【参考方案1】：

您需要创建您的自定义导航控制器，以便我们能够实现这种类型的设计。

【讨论】：

我已经创建了自定义导航栏，请看一下我的问题，但是在这个视图控制器中，我需要导航栏顶部的图像，如何？如何根据这个更改我的自定义导航栏..请帮忙

@iosswift 您需要在我们的视图之上制作包含您面临问题的图像视图，因为我们的视图位于导航后面

【参考方案2】：

你需要使用这种方法

【讨论】：

我没有在 viewcontroller 上使用自定义导航栏.. 来自另一个 swift 文件的自定义导航栏.. 有问题我已经添加了自定义导航栏的代码