首页 > 解决方案 > 将背景设置为 uitabbar 无法正常工作

问题描述

在此处输入图像描述

大家好,我正在尝试创建我的自定义标签栏,如上图所示。基本上,一个中心凸起的标签栏,我尝试通过设置背景图片,它看起来不合适。它总是在图像顶部显示一条线,并且没有填充宽度。下面是设置背景图像的代码。

    let image   = UIImage.init(named: "bottombar")
    if let image = image {
        let centerImage: Bool = true
        var resizeImage: UIImage?
   //     let height = self.tabBarController?.tabBar.frame.height ?? 49.0

        let size = CGSize(width: 100, height: 98  )
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        if centerImage {
            //if you want to center image, use this code
            image.draw(in: CGRect(origin: CGPoint(x: (size.width - image.size.width)/2, y: 0), size: image.size))
        }
        else {
            //stretch image
            image.draw(in: CGRect(origin: CGPoint.zero, size: size))
        }
        resizeImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        tabBar.backgroundImage = resizeImage!.withRenderingMode(.alwaysOriginal)

    }

由于上述解决方案不起作用,我尝试使用 cashapelayer 绘制它,并在所有视图控制器上保留一个中心按钮。现在按钮位于不可见的图层后面。下面是我的自定义标签栏类。

class CustomizedTabBar: UITabBar {

public var shapeLayer: CALayer?

private func addShape() {
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = createPath()
    shapeLayer.strokeColor = UIColor.red.cgColor
 //   shapeLayer.fillColor = UIColor.init(white: 0.8, alpha: 1).cgColor
    shapeLayer.fillColor = UIColor.white.cgColor
    shapeLayer.fillMode = .both
    shapeLayer.lineWidth = 2.0

    if let oldShapeLayer = self.shapeLayer {
        self.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
    } else {
        self.layer.insertSublayer(shapeLayer, at: 0)
    }
  //  self.shapeLayer?.contents = UIImage(named:"bottombar")?.cgImage
    self.shapeLayer = shapeLayer



}

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

func createPath() -> CGPath {

    let height: CGFloat = 37.0
    let path = UIBezierPath()
    let centerWidth = self.frame.width / 2

    path.move(to: CGPoint(x: 0, y: 0)) // start top left
    path.addLine(to: CGPoint(x: (centerWidth - height * 2), y: 0)) // the beginning of the trough



    // first curve down
    path.addCurve(to: CGPoint(x: centerWidth, y: -40),
                  controlPoint1: CGPoint(x: (centerWidth - 30), y: 0), controlPoint2: CGPoint(x: centerWidth - 35, y: -37))
    // second curve up
    path.addCurve(to: CGPoint(x: (centerWidth + height * 2), y: 0),
                  controlPoint1: CGPoint(x: centerWidth + 35, y: -37), controlPoint2: CGPoint(x: (centerWidth + 30), y: 0))

   //  complete the rect
    path.addLine(to: CGPoint(x: self.frame.width, y: 0))
    path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
    path.addLine(to: CGPoint(x: 0, y: self.frame.height))
    path.close()

    return path.cgPath
}

override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
    let buttonRadius: CGFloat = 35
    return abs(self.center.x - point.x) > buttonRadius || abs(point.y) > buttonRadius
}

请提供一些信息来实现这个标签栏。非常感谢帮助。

标签: iosswiftcocoa-touchuitabbarcontroller

解决方案


推荐阅读