WWDC22 UINavigationBar的变化

本篇文章根据 What’s new in UIKit 整理

开发环境:Xcode 14.0 beta

新增UINavigationItem.ItemStyle

iOS16中,UIN初始化失败是怎么解决avigationItem添加了一个style属性,它是一个枚举,有三个值

// 默认样式,与传统的UINavigationBar完全相同
casenavigator
// 浏览器应用程序界面的样式。
// 例如标题居中、有前导和尾随的条形按钮项、当有多个项时,会显示后退按钮。浏览器样式重新排列内容,以便更好地优化历史与位置同等重要的界面,如文件或Safari中的界面。
casebrowser
// 编辑器应用程序界面的样式。
// 主要针对功能为文档编辑时进行了优化。与浏览器样式一样,标题也是前导对齐的。编辑器UI通常是一个目标,例如在使用文档选择器选择文档之后,因此提供一个后退按钮以方便访问该UI。
caseeditor

WWDC22 UINavigationBar的变化

浏览器(browser)和编辑器(editor)样式都在导航栏的中心释放了大量空间。在iOS16中可以在此区域中放置其他控件来利用这一释放的空间。为此,官方还为UINavigationItem新增了leadingItemGroupscenterItemGroupstrailingItemGroups控件组

// 当导航栏处于浏览器或编辑器模式时,显示在导航栏的中央区域控件组。在导航模式下,这些项目将放置在溢出菜单中。
var centerItemGroups: [UIBarButtonItemGroup] { get set }
// 显示在导航栏左边的控件组
var leadingItemGroups: [UIBarButtonItemGroup] { get set }
// 显示在导航栏右边的控件组
var trailingItemGroups: [UIBarButtonItemGroup] { get set }

它们都是由UIBarButtonItemGroup组成,下面是翻译官方文档初始化电脑对于UIBarButtonItemGroup的概述

包含一个或多个条形按钮项和一个可选的代表项,当空间受限时,该项将显示,而不是单个项目。您可以创建任意数量的组,并用任意数量的项目配置每个组初始化sdk什么意思。 在创建包含多个条形按钮项的组时,建议您也提供一个具有代表性的项目来显示。代表性项目必须是一个完全独立的条形按钮项;它不能是组中已字符间距怎么加宽有的项目之一。当没有足够的空间在快捷键栏中显示组的所有项目时按钮符号,UIKit会显示代表性项目。在代表项目中点击该项目的操作方法。当您不指定操字符间距加宽2磅怎么设置作方法时,UIKit使用标准界面自动显示组中的项目。要显示您自己的界面,请提供自定义操作方法,并使用它来显示您想要的界面。 配置组后,将其分配给与应用程字符间距加宽2磅序的响应器对象之一关联的UIText对象。您的自定义项目仅与系统键盘一起显示。显示键盘后,按钮英文UIKit会从文本输入助理项中检索您的自定义组,并将相应的项目添加到快捷键栏中。您可以在键入建议之前和之后指定多个组。UIKit 尝试在快捷键栏上显示尽可能多的项目,并根据需要返回到组的代表性项目。

关于UIBarButtonItemGroup的创建

1、UIBarButtonItemGroup初始化方法app store

// 初始化并返回带有指定项目的条形按钮项组
// barButtonItems: 要显示在快捷键栏上的栏按钮项
// representativeItem: 当空间受到限制时要为组显示的项目
init(barButtonItems: [UIBarButtonItem],representativeItem: UIBarButtonItem?)

2、UIBarButtonItemGroup浏览器怎么打开网站类方法

// 创建一个固定组,在布局自定义期间,一个无法从导航栏中移动或删除
// representativeItem: 当空间受到限制时要为组显示的项目
// items: 组中包含的项目
class funcfixedGroup(representativeItem: UIBarButtonItem?,items: [UIBarButtonItem]) -> UIBarButtonItemGroup
// 创建一个可移动组,一个可以在布局自定义期间移动但无法从导航栏中删除
// customizationIdentifier: 一个唯一的字符串,用于标识导航栏布局自定义组
// representativeItem: 当空间受到限制时要为组显示的项目
// items: 组中包含的项目
class funcmovableGroup(customizationIdentifier: String,representativeItem: UIBarButtonItem?,items: [UIBarButtonItem]) -> UIBarButtonItemGroup
// 创建一个可选组,一个可以在布局自定义期间从导航栏中移动、添加或删除
// customizationIdentifier: 一个唯一的字符串,用于标识导航栏布局自定义组
// isInDefaultCustomization: 默认情况下确定是否将组放置在导航栏中。如果您希望该组默认出现在导航栏自定义弹出窗口中,请指定`false`
// representativeItem: 当空间受到限制时要为组显示的项目
// items: 组中包含的项目
class funcoptionalGroup(customizationIdentifier: String,isInDefaultCustomization: Bool,representativeItem: UIBarButtonItem?,items: [UIBarButtonItem]) -> UIBarButtonItemGroup

3字符间距怎么加宽、官方还为UIBarButtonItem增加了下面几种方法来生成UIB浏览器的历史记录在哪arButtonItemGroup

// 将项目放置在固定组中,在布局自定义期间,无法从导航栏中移动或删除。
func creatingFixedGroup() -> UIBarButtonItemGroup
// 将项目放置在可移动组中,在布局自定义期间,可以移动,但无法从导航栏中删除。
// Places the item in a movable group that a person can move but can’t remove from the navigation bar during layout customization.
func creatingMovableGroup(customizationIdentifier: String -> UIBarButtonItemGroup
// 将项目放置在可选组中,用户可以在布局自定义期间从导航栏中移动、添加或删除该组。
// customizationIdentifier: 一个唯一的字符串,用于标识导航栏布局自定义组
// isInDefaultCustomization: 默认情况下确定是否将组放置在导航栏中。如果您希望该组默认出现在导航栏自定义弹出窗口中,请指定`false`
func creatingOptionalGroup( customizationIdentifier: String, isInDefaultCustomization: Bool = true ) -> UIBarButtonItemGroup

案例

字符间距加宽2磅怎么设置面我们就以centerItemGroups为例,看看UINavigationItem.ItemStyle分别为navigatorbrowsereditor的效果

// 开启自定义标识符
navigationItem.customizationIdentifier = "com.izsm.maineditor"
// 创建一个固定组,以禁止从导航栏中移动或删除该组
let photoGroup = UIBarButtonItem(title: "图片", image: UIImage(systemName: "photo"), primaryAction: UIAction { _ in }).creatingFixedGroup()
// 创建一个可移动组,允许在导航栏中移动组,但不删除它
let scribbleGroup = UIBarButtonItem(title: "画笔", image: UIImage(systemName: "scribble"), primaryAction: UIAction { _ in }).creatingMovableGroup(customizationIdentifier: "Draw")
// 创建一个可选组,允许移动、删除或重新添加该组
let shapesGroup = UIBarButtonItemGroup.optionalGroup(
    customizationIdentifier: "Shapes",
    representativeItem: UIBarButtonItem(title: "Shapes", image: UIImage(systemName: "square.on.circle")),
    items: [
        UIBarButtonItem(title: "正方形", image: UIImage(systemName: "square"), primaryAction: UIAction { _ in }),
        UIBarButtonItem(title: "圆", image: UIImage(systemName: "circle"), primaryAction: UIAction { _ in }),
        UIBarButtonItem(title: "长方形", image: UIImage(systemName: "rectangle"), primaryAction: UIAction { _ in }),
        UIBarButtonItem(title: "菱形", image: UIImage(systemName: "diamond"), primaryAction: UIAction { _ in })
    ]
)
let textGroup = UIBarButtonItemGroup.optionalGroup(
    customizationIdentifier: "Text",
    items: [
        UIBarButtonItem(title: "Label", image: UIImage(systemName: "character.textbox"), primaryAction: UIAction { _ in }),
        UIBarButtonItem(title: "Text", image: UIImage(systemName: "text.bubble"), primaryAction: UIAction { _ in })
    ]
)
// 不在默认自定义中的其他组
let formatGroup = UIBarButtonItemGroup.optionalGroup(
    customizationIdentifier: "Format",
    isInDefaultCustomization: false,
    representativeItem: UIBarButtonItem(title: "BIU", image: UIImage(systemName: "bold.italic.underline")),
    items:[
        UIBarButtonItem(title: "Bold", image: UIImage(systemName: "bold"), primaryAction: UIAction { _ in }),
        UIBarButtonItem(title: "Italic", image: UIImage(systemName: "italic"), primaryAction: UIAction { _ in }),
        UIBarButtonItem(title: "Underline", image: UIImage(systemName: "underline"), primaryAction: UIAction { _ in })
    ]
)
navigationItem.centerItemGroups = [
    photoGroup,
    scribbleGroup,
    shapesGroup,
    textGroup,
    formatGroup
]

1、当UINavigationItem.ItemStylenavigator时的效果

iPhone-竖屏

WWDC22 UINavigationBar的变化

iPhone-横屏

WWDC22 UINavigationBar的变化

iPad

WWDC22 UINavigationBar的变化

2、当UINavigationItem.ItemStylenavigatoreditor时的效果

iPhone-竖屏

WWDC22 UINavigationBar的变化

iPhone-横屏

WWDC22 UINavigationBar的变化

iPad

WWDC22 UINavigationBar的变化

导航栏的变化就先说到这里。其实导航栏的变化还不止这些,后面再慢慢研究吧

参考资料:
developer.apple.com/documentati…

发表评论

提供最优质的资源集合

立即查看 了解详情