Question

如何快速创建以下标签（见附件）？

Answer 1

我猜这是UITabBar，所以您可以在这样的代码中的某个地方设置圆角：

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

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

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

Answer 2

基于以下答案：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) })


    }

}

结果应如下所示：

Answer 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圆角位于顶部，就像您的图片一样。

Answer 4

最好的方法是对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]

Answer 5

尝试

https://{your-jenkins-domain}/configureSecurity/

如何快速创建圆角标签？

5 个答案: