关于iOS 26 Liquid Glass标签栏与独立悬浮操作按钮的实现咨询

嘿，我刚好在Xcode 26 beta里研究过这个Liquid Glass的新UI设计，来给你详细解答下：

苹果用的原生组件是什么？ #

其实苹果并没有推出一个全新的单一原生组件来实现这个设计，而是通过组合原生UITabBar和独立的悬浮按钮来完成的：

• 标签栏部分就是我们熟悉的UITabBar，只不过调整了item的数量（只放4个常规标签）和布局逻辑，让右侧留出足够空间；
• 那个侧边的“Following”/“Search”悬浮按钮，是用UIButton（或者iOS 16+引入的UIActionButton，自带原生悬浮交互效果）实现的，通过Auto Layout精准定位在标签栏的右侧区域。

如何用原生控件在你的iOS 26 app里实现这个设计？ #

这里给你一套可落地的步骤，全部用原生控件就能完成：

1. 配置基础的UITabBarController #

• 给你的UITabBarController设置4个viewControllers，这样标签栏会默认显示4个item，自然留出右侧的空间给悬浮按钮；
• 可以通过UITabBarAppearance调整标签栏的布局细节，比如缩小item之间的间距，让它们更紧凑地靠左排列：

  let appearance = UITabBarAppearance()
  appearance.compactInlineLayoutAppearance.itemSpacing = 8
  tabBar.standardAppearance = appearance
  tabBar.scrollEdgeAppearance = appearance
  

2. 添加并定位悬浮按钮 #

• 创建一个悬浮按钮，推荐用UIActionButton来获得原生的阴影和按压效果，也可以用普通UIButton自定义：

  // 用UIActionButton的例子
  let fabButton = UIActionButton(primaryAction: UIAction(handler: { _ in
      // 这里添加按钮的点击逻辑，比如跳转页面
  }))
  fabButton.setImage(UIImage(systemName: "bookmark.fill"), for: .normal)
  fabButton.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(fabButton)
  

• 用Auto Layout把按钮定位在标签栏右侧、安全区域底部：

  NSLayoutConstraint.activate([
      fabButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -8),
      fabButton.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -16),
      fabButton.widthAnchor.constraint(equalToConstant: 56),
      fabButton.heightAnchor.constraint(equalToConstant: 56)
  ])
  

3. 匹配Liquid Glass的视觉风格 #

• 给按钮设置圆角和磨砂背景，贴合iOS 26的设计语言：

  fabButton.layer.cornerRadius = 28
  fabButton.configuration?.background = .filled(.tertiarySystemMaterial)
  

• 调整标签栏的外观为磨砂风格，和按钮视觉统一：

  appearance.backgroundEffect = UIBlurEffect(style: .systemUltraThinMaterial)
  tabBar.standardAppearance = appearance
  

4. 优化交互与适配 #

• 如果需要让按钮和标签栏的选中状态联动，可以监听UITabBarController的selectedIndex变化，调整按钮的图标或颜色；
• 针对不同尺寸的设备，你可以利用尺寸类（traitCollection）调整按钮的位置或大小，确保在小屏设备上也不会遮挡标签栏内容。

内容来源于stack exchange