Swift - 导航栏

导航控制器是一个容器视图控制器,它管理导航界面中的一个或多个子视图控制器。在这种类型的接口中,一次只有一个子视图控制器是可见的。在视图控制器中选择一个项目,使用动画将一个新的视图控制器推到屏幕上,隐藏之前的视图控制器。点击界面顶部导航栏上的后退按钮将移除顶部视图控制器,从而显示下面的视图控制器。
在层次结构的每一层,你都提供一个合适的屏幕(由自定义视图控制器管理)来显示该层的内容。对于除了根视图之外的所有视图,导航控制器都提供了一个后退按钮,允许用户向上移动层次结构。

导航控制器使用有序数组(导航堆栈)管理其子视图控制器。数组中第一个元素是根视图,在堆栈的底部。数组的最后一个元素是当前显示的视图控制器,在堆栈的顶部。

导航控制器的导航栏始终存在,并且有自身控制。控制导航栏的显示和隐藏可以通过
isNavigationBarHiddensetNavigationBarHidden来控制

        self.navigationController?.isNavigationBarHidden = false
        // 或
        self.navigationController?.setNavigationBarHidden(false, animated: true)

导航栏结构

  • backItem Title:上一个页面的标题
  • topItem Title:当前(栈顶)页面标题
  • “Done”:当前页面右边BarButtonItem

导航相关概念

  1. UIBarButtonItem: 继承于UIBarItem。相当于特殊的按钮,放在UIToobar上的。
  2. UINavigationItem:继承于NSObject。包含了导航栏上所有要显示的信息。
  3. UINavigationBar:继承于UIView。导航栏,管理Item。

应用

  1. 导航条有两种标准的外观样式:使用barStyle属性来选择样式,默认为default,深色文字。
  • 白色加深色文本
self.navigationController?.navigationBar.barStyle = .default
  • 黑色加浅色文本
self.navigationController?.navigationBar.barStyle = .black
  1. 导航栏默认底色是半透明的。通过设置isTranslucent属性为false来使导航栏不透明,当设置为false时,页面起始位置从导航栏下方开始
self.navigationController?.navigationBar.isTranslucent = false
  1. 为导航栏背景指定自定义色调,设置此属性将覆盖从条形样式推断的默认颜色。根据系统版本做区分:15之前使用backGroundColor,15之后使用barTintColor属性
        let navigationBar = self.navigationController?.navigationBar
        if #available(iOS 15, *) {
            let app = UINavigationBarAppearance.init()
            app.configureWithOpaqueBackground()  // 重置背景和阴影颜色
            app.backgroundColor = .red  // 设置导航栏背景色
            
            app.shadowImage = getImageWithColor(.clear)  // 设置导航栏下边界分割线透明
            navigationBar?.scrollEdgeAppearance = app  // 带scroll滑动的页面
            navigationBar?.standardAppearance = app // 常规页面
        }else{
            // 设置导航栏背景色
            navigationBar?.barTintColor = .red
            
            // 设置导航栏下边界分割线透明
            navigationBar?.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
            navigationBar?.shadowImage = UIImage()
        }
  1. 为导航栏添加按钮,可添加一个或多个
        // 图片按钮
        let rightItem1 = UIBarButtonItem.init(image: UIImage(named: "icon_device_manager"), style: .plain, target: self, action: #selector(settingFunc))
        // 文本按钮
        let rightItem2 = UIBarButtonItem.init(title: "添加", style: .plain, target: self, action: #selector(settingFunc))
        // 图片
        let logoImageView = UIImageView(image: UIImage.init(named: "logo"))
        let rightItem3 = UIBarButtonItem.init(customView: logoImageView)
        
        self.navigationItem.rightBarButtonItem = rightItem1 // 添加一个按钮
        self.navigationItem.rightBarButtonItems = [rightItem1, rightItem2, rightItem3] // 添加多个按钮

执行结果为:
  1. 更改标题颜色:
self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.red]
  1. 使用tintColor属性控制导航栏内交互元素的颜色。
self.navigationController?.navigationBar.tintColor = .green
  1. 设置导航栏按钮为单箭头,无文字
        let backBarButton = UIBarButtonItem(title: "", image: nil, primaryAction: nil, menu: nil)
        self.navigationItem.backBarButtonItem = backBarButton
        self.navigationItem.backBarButtonItem?.tintColor = UIColor.black
  1. 自定义titleView
        let customView = UIView()
        customView.frame.size = CGSizeMake(200, 30)
        customView.backgroundColor = .red
        navigationItem.titleView = customView
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容