如何创建浮动标签栏 Swift

Question

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

Image of Tab Bar

Answer 1

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

Here's the repo.

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

Answer 2

如果你想制作“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
  }
}

Don’t forget to type if you are using storyboard, the class name in the Identity inspector.

PS: 我正在分享 Emmanuele Corporente's Medium article 内容作为答案，请查看原文并给它一些鼓掌！

如何创建浮动标签栏 Swift

How to create floating Tab Bar Swift

tabbar

uitabbar

pinterest

swift