如何创建浮动标签栏 Swift

如何解决如何创建浮动标签栏 Swift

我正在尝试创建 Pinterest 风格的标签栏。是否可以以这种方式自定义 UITabBar 或者您是否必须编写一个单独的视图来位于所有内容之上，如果是这样，您会怎么做？它基本上只是用圆角和阴影向上移动。您将如何调整标签栏的宽度并将其向上移动？

Image of Tab Bar

解决方法

如果你想制作“RoundedTabbar”，你可以像这样创建一个 ->

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's Medium article 内容作为答案，请查看原始文章并鼓掌！

,

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

Here's the repo.

如果你想从头开始实现它，你必须创建自己的视图控制器子类，以及标签栏的 UIView 子类，并自己管理“页面”切换。 UITabBarController 没有为此提供足够的自定义。