如何创建浮动 Tab Bar（Swift）

Question

我正在尝试创建一个类似Pinterest的选项卡栏。是否可以以这种方式自定义UITabBar，或者必须编写一个单独的视图来覆盖所有内容，如果是这样，你会如何做到这一点？它基本上只是向上移动了，有圆角和阴影。你如何调整选项卡栏的宽度并将其向上移动？

选项卡栏图片请见链接：Image of Tab Bar

- Junaid

---

朋友，看看这个，也许会有用 -> https://medium.com/@gemix95/how-to-build-round-tabbar-in-swift-b1cfb96b3358 - undefined

这是一个真正的TabBar吗？还是在顶部添加了一个UIWindows，可能会委托给一个主视图控制器（可能是一个UITabBarController）？ - undefined

@emrcftci 哇，这比我预想的要容易得多。谢谢！ - undefined

@emrcftci，你能把那个发表为一个答案吗，这样我就可以标记为正确了。 - undefined

实际上这不是一个答案，但我会修改它并发布为一个答案，很高兴能够帮助。 - undefined

Answer 1

如果你想要制作“圆角标签栏”，可以像这样创建一个 ->

import UIKit

class RoundedTabBarController: UITabBarController {

  override func viewDidLoad() {
    super.viewDidLoad()

    let layer = CAShapeLayer()
    layer.path = UIBezierPath(roundedRect: CGRect(x: 30, y: tabBar.bounds.minY + 5, width: tabBar.bounds.width - 60, height: tabBar.bounds.height + 10), cornerRadius: (tabBar.frame.width/2)).cgPath
    layer.shadowColor = UIColor.lightGray.cgColor
    layer.shadowOffset = CGSize(width: 5.0, height: 5.0)
    layer.shadowRadius = 25.0
    layer.shadowOpacity = 0.3
    layer.borderWidth = 1.0
    layer.opacity = 1.0
    layer.isHidden = false
    layer.masksToBounds = false
    layer.fillColor = UIColor.white.cgColor
  
    tabBar.layer.insertSublayer(layer, at: 0)

    if let items = tabBar.items { 
        items.forEach { item in 
            item.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: -15, right: 0) 
        }
    }

    tabBar.itemWidth = 30.0
    tabBar.itemPositioning = .centered
  }
}

如果您正在使用故事板，请不要忘记在“身份检查器”中输入类名。

PS：我分享Emmanuele Corporente的Medium文章内容作为答案，请查看原始文章并给它一些掌声！

- emrcftci

Answer 2

我创建了一个浮动标签栏库。它的外观并不完全像Pinterest的，但你可以修改绘图代码来改变它的外观。

这是仓库链接。

如果你想从头开始实现它，你需要创建自己的视图控制器子类，以及一个用于标签栏的UIView子类，并自己管理“页面”的切换。UITabBarController对于这个功能的定制化程度不够。

- EmilioPelaez