如何在 UITabBar 顶部创建圆角答案

【问题标题】：How to create Rounded Corners on Top of the UITabBar如何在 UITabBar 顶部创建圆角
【发布时间】：2019-10-02 09:34:35
【问题描述】：

我想将圆角半径设置为 UITabBar 并设置阴影。它应该看起来像 img1，但它看起来像 img2。

我的代码：

  tabBar.barTintColor = .white
  tabBar.isTranslucent = false

tabBar.dropShadow(shadowColor: UIColor.lightGray, fillColor: UIColor.white, opacity: 1, offset: CGSize(width: 0, height: 5), radius: 25)

        tabBar.layer.masksToBounds = false
        tabBar.isTranslucent = true
        tabBar.barStyle = .blackOpaque
        tabBar.layer.cornerRadius = 13
        tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]

和扩展

extension UIView{
    func dropShadow(shadowColor: UIColor = UIColor.black,
                    fillColor: UIColor = UIColor.white,
                    opacity: Float = 0.2,
                    offset: CGSize = CGSize(width: 0.0, height: 5.0),
                    radius: CGFloat = 10) -> CAShapeLayer {

        let shadowLayer = CAShapeLayer()

        shadowLayer.path = UIBezierPath(roundedRect: self.bounds, cornerRadius: radius).cgPath
        shadowLayer.fillColor = fillColor.cgColor
        shadowLayer.shadowColor = shadowColor.cgColor
        shadowLayer.shadowPath = shadowLayer.path
        shadowLayer.shadowOffset = offset
        shadowLayer.shadowOpacity = opacity
        shadowLayer.shadowRadius = radius
        layer.insertSublayer(shadowLayer, at: 0)
        return shadowLayer
    }
}

【问题讨论】：

这里需要先检查设备，再设置rect的边界
你有解决第二张图片的方法吗？

标签： swift xcode uitabbarcontroller uitabbar

【解决方案1】：

添加扩展：

        extension UIView {
             func makeCornerTabBar(shadowColor: UIColor = UIColor.black,
                             fillColor: UIColor = UIColor.white,
                             opacity: Float = 0.2,
                             corners: UIRectCorner,
                             offset: CGSize = CGSize(width: 0.0, height: 5.0),
                             radius: CGFloat = 0.0) -> CAShapeLayer {
            
              let shadowLayer = CAShapeLayer()
              shadowLayer.path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)).cgPath
              shadowLayer.fillColor = fillColor.cgColor
              shadowLayer.shadowColor = shadowColor.cgColor
              shadowLayer.shadowPath = shadowLayer.path
              shadowLayer.shadowOffset = offset
              shadowLayer.shadowOpacity = opacity
              layer.mask = shadowLayer
              layer.insertSublayer(shadowLayer, at: 0)
              return shadowLayer
           }
      }

调用分机：

tabBar.makeCornerTabBar(shadowColor: UIColor.lightGray, fillColor: UIColor.white, opacity: 1, corners: [.topLeft, .topRight], offset: CGSize(width: 0, height: 5), radius: 25)

【讨论】：

【解决方案2】：

使用下面的 UIView 扩展方法制作圆顶角

func roundedTop(_ radius: CGFloat) {
        let maskPath1 = UIBezierPath(roundedRect: bounds,
                                     byRoundingCorners: [.topRight, .topLeft],
                                     cornerRadii: CGSize(width: radius, height: radius))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = bounds
        maskLayer1.path = maskPath1.cgPath
        layer.mask = maskLayer1
    }

并使用下面的 UIView 扩展方法进行阴影。根据您的要求修改方法。

enum VerticalLocation: String {
    case bottom
    case top
}
func addShadow(location: VerticalLocation, color: UIColor = .black, opacity: Float = 0.3, radius: CGFloat = 2.0) {
        switch location {
        case .bottom:
            addShadow(offset: CGSize(width: 0, height: 5), color: color, opacity: opacity, radius: radius)
        case .top:
            addShadow(offset: CGSize(width: 0, height: -5), color: color, opacity: opacity, radius: radius)
        }
    }

    func addShadow(offset: CGSize, color: UIColor = .black, opacity: Float = 0.3, radius: CGFloat = 2.0) {
        self.layer.masksToBounds = false
        self.layer.shadowColor = color.cgColor
        self.layer.shadowOffset = offset
        self.layer.shadowOpacity = opacity
        self.layer.shadowRadius = radius
    }

希望对您有所帮助。

【讨论】：