如何快速创建圆形标签？答案

【问题标题】：how can I create a rounded tab with swift?如何快速创建圆形标签？
【发布时间】：2020-09-08 19:36:57
【问题描述】：

如何在swift中创建以下标签（见附件）？

【问题讨论】：

检查github.com/kirillgorbushko/HKAnimatedTabBar
另一个简单的例子：github.com/HappyIosDeveloper/SwiftUIAppWithCustomTabBar

【解决方案1】：

基于这个答案：https://stackoverflow.com/a/58941827/5753078

子类 UITabBar 如下所示。此解决方案考虑了带有缺口的设备的 safeArealayout 指南。我发现 65 是顶部圆形 tabBar 的最佳高度。

@IBDesignable class TabBarWithCorners: UITabBar {
    @IBInspectable var color: UIColor?
    @IBInspectable var radii: CGFloat = 15.0

    private var shapeLayer: CALayer?

    override func draw(_ rect: CGRect) {
        addShape()
    }

    private func addShape() {
        let shapeLayer = CAShapeLayer()

        shapeLayer.path = createPath()
        shapeLayer.strokeColor = UIColor.gray.withAlphaComponent(0.1).cgColor
        shapeLayer.fillColor = color?.cgColor ?? UIColor.white.cgColor
        shapeLayer.lineWidth = 2
        shapeLayer.shadowColor = UIColor.black.cgColor
        shapeLayer.shadowOffset = CGSize(width: 0   , height: -3);
        shapeLayer.shadowOpacity = 0.2
        shapeLayer.shadowPath =  UIBezierPath(roundedRect: bounds, cornerRadius: radii).cgPath
        

        if let oldShapeLayer = self.shapeLayer {
            layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
        } else {
            layer.insertSublayer(shapeLayer, at: 0)
        }

        self.shapeLayer = shapeLayer
    }

    private func createPath() -> CGPath {
        let path = UIBezierPath(
            roundedRect: bounds,
            byRoundingCorners: [.topLeft, .topRight],
            cornerRadii: CGSize(width: radii, height: 0.0))

        return path.cgPath
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        self.isTranslucent = true
        var tabFrame            = self.frame
        tabFrame.size.height    = 65 + (UIApplication.shared.keyWindow?.safeAreaInsets.bottom ?? CGFloat.zero)
        tabFrame.origin.y       = self.frame.origin.y +   ( self.frame.height - 65 - (UIApplication.shared.keyWindow?.safeAreaInsets.bottom ?? CGFloat.zero))
        self.layer.cornerRadius = 20
        self.frame            = tabFrame



        self.items?.forEach({ $0.titlePositionAdjustment = UIOffset(horizontal: 0.0, vertical: -5.0) })


    }

}

结果应如下所示：

【讨论】：

很好的答案！但有一件事，即使它不是那么重要。那个烦人的“关键窗口”警告修复：只需将：UIApplication.shared.keyWindow? 替换为：UIApplication.shared.windows.filter {$0.isKeyWindow}.first?
好答案！但就我而言，圆角后面的区域是不透明的，看不到它下面的内容。我必须同时设置 self.shadowImage = UIImage() 和 self.backgroundImage = UIImage() 以便 tabBar 创建的背景视图自动变得完全透明。我花了 2 天时间才弄清楚这一点，希望这对某人有所帮助。
这很好用！您将如何向上移动单个图像？标题向上移动，但现在离图标太近了。
这很好，但工作不正常，角落里显示了一些空白。如果我尝试在标签栏下放置一些视图，它会在角落覆盖一些白色层。此外，它会上升很多。我有一个底部约束为 14-16 点的按钮，现在标签栏正在触摸它们。

【解决方案2】：

我猜这是UITabBar，因此您可以在代码中的某处设置圆角，如下所示：

layer.cornerRadius = 30
layer.masksToBounds = true
layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner]

第一个控制舍入，maskedCorners 指定仅舍入左上角和右上角。

或者创建子类并在init中设置这些属性。

【讨论】：

【解决方案3】：

很简单；你像这样创建你的view：

let theView: UIView = {
   let v = UIView()
   v.translatesAutoresizingMaskIntoConstraints = false
   v.backgroundColor = .white
   v.layer.cornerRadius = 30
   v.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
   return v
}()

您可以将cornerRadius 更改为您喜欢的任何值。上面的代码在顶部提供了您的 view 圆角，就像您的图片中一样。

【讨论】：

【解决方案4】：

试试这个

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: view.frame.width, height: tabBar.frame.height), cornerRadius: 15)
    let mask = CAShapeLayer()
    mask.path = path.cgPath
    tabBar.layer.mask = mask

}

【讨论】：

【解决方案5】：

最好的方法是继承 UITabBar 类并在那里绘制你想要添加的阴影的经典 tabBar Here is a nice tutorial for Quick start

另一种解决方法，如果您不需要完全控制，您可以这样做

tabBar.layer.masksToBounds = true 
tabBar.isTranslucent = true  
tabBar.layer.cornerRadius = 10 
self.tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]

【讨论】：