Amalendu kar
Amalendu kar

Reputation: 1

Make oval NavigationBar

I want to NavigationBar with an increased height of 16-20, and an oval design at the bottom of the navigation bar, I have designed it on paint code and created a UIBezierPath, tried to add it on navigation bar but the result is not so good,

Paint code

public class StyleKit : NSObject {

//// Drawing Methods

@objc dynamic public class func drawOvalNavigationBarView(frame: CGRect = CGRect(x: 0, y: 0, width: 200, height: 66)) {
    //// General Declarations
    let context = UIGraphicsGetCurrentContext()!

    //// Color Declarations
    let color = UIColor(red: 0.647, green: 0.824, blue: 0.475, alpha: 1.000)

    //// Shadow Declarations
    let shadow = NSShadow()
    shadow.shadowColor = UIColor.black.withAlphaComponent(0.35)
    shadow.shadowOffset = CGSize(width: 0, height: 5)
    shadow.shadowBlurRadius = 5

    //// Bezier Drawing
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: frame.minX + 0.00000 * frame.width, y: frame.minY + 0.00000 * frame.height))
    bezierPath.addLine(to: CGPoint(x: frame.minX + 1.00000 * frame.width, y: frame.minY + 0.00000 * frame.height))
    bezierPath.addLine(to: CGPoint(x: frame.minX + 1.00000 * frame.width, y: frame.minY + 0.66667 * frame.height))
    bezierPath.addLine(to: CGPoint(x: frame.minX + 0.85000 * frame.width, y: frame.minY + 0.66667 * frame.height))
    bezierPath.addCurve(to: CGPoint(x: frame.minX + 0.75000 * frame.width, y: frame.minY + 0.90909 * frame.height), controlPoint1: CGPoint(x: frame.minX + 0.85000 * frame.width, y: frame.minY + 0.66667 * frame.height), controlPoint2: CGPoint(x: frame.minX + 0.83500 * frame.width, y: frame.minY + 0.90909 * frame.height))
    bezierPath.addCurve(to: CGPoint(x: frame.minX + 0.25000 * frame.width, y: frame.minY + 0.90909 * frame.height), controlPoint1: CGPoint(x: frame.minX + 0.72875 * frame.width, y: frame.minY + 0.90909 * frame.height), controlPoint2: CGPoint(x: frame.minX + 0.27375 * frame.width, y: frame.minY + 0.90909 * frame.height))
    bezierPath.addCurve(to: CGPoint(x: frame.minX + 0.15000 * frame.width, y: frame.minY + 0.66667 * frame.height), controlPoint1: CGPoint(x: frame.minX + 0.15500 * frame.width, y: frame.minY + 0.90909 * frame.height), controlPoint2: CGPoint(x: frame.minX + 0.15000 * frame.width, y: frame.minY + 0.66667 * frame.height))
    bezierPath.addLine(to: CGPoint(x: frame.minX + 0.00000 * frame.width, y: frame.minY + 0.66667 * frame.height))
    bezierPath.addLine(to: CGPoint(x: frame.minX + 0.00000 * frame.width, y: frame.minY + 0.00000 * frame.height))
    bezierPath.close()
    context.saveGState()
    context.setShadow(offset: shadow.shadowOffset, blur: shadow.shadowBlurRadius, color: (shadow.shadowColor as! UIColor).cgColor)
    color.setFill()
    bezierPath.fill()
    context.restoreGState()
}

//// Generated Images

@objc dynamic public class func imageOfOvalNavigationBarView(imageSize: CGSize = CGSize(width: 200, height: 66)) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(imageSize, false, 0)
        StyleKit.drawOvalNavigationBarView(frame: CGRect(x: 0, y: 0, width: imageSize.width, height: imageSize.height))

    let imageOfOvalNavigationBarView = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    return imageOfOvalNavigationBarView
}

}

Navigation bar image

Screenshot

Upvotes: 0

Views: 150

Answers (0)

Related Questions