Problems about protocol and drawing in SwiftUI - ios

I want to define a Symbol protocol and write three different structs, Rectangle, Diamond and Oval. The first two are OK, but Oval returns UIBezierPath instead of Path. What should I do
//
// Symbol.swift
// Set
//
// Created by world on 2022/11/27.
//
import SwiftUI
protocol Symbol: Shape {
var numberOfSymbols: SetGame.Card.Number { get }
func drawing(_ path: Path, center: CGPoint, width: CGFloat, height: CGFloat) -> Path
}
extension Symbol {
func path(in rect: CGRect) -> Path {
let widthOfRect = rect.maxX - rect.minX
let heightOfRect = rect.maxY - rect.minY
let widthOfSymbol = widthOfRect
let heightOfSymbol = widthOfSymbol / 2
var path = Path()
switch numberOfSymbols {
case .one:
path = drawing(path, center: CGPoint(x: rect.midX, y: rect.midY), width: widthOfSymbol, height: heightOfSymbol)
case .two:
path = drawing(path, center: CGPoint(x: rect.midX, y: heightOfRect * 1/3), width: widthOfSymbol, height: heightOfSymbol)
path = drawing(path, center: CGPoint(x: rect.midX, y: heightOfRect * 2/3), width: widthOfSymbol, height: heightOfSymbol)
case .three:
path = drawing(path, center: CGPoint(x: rect.midX, y: heightOfRect * 1/4), width: widthOfSymbol, height: heightOfSymbol)
path = drawing(path, center: CGPoint(x: rect.midX, y: heightOfRect * 2/4), width: widthOfSymbol, height: heightOfSymbol)
path = drawing(path, center: CGPoint(x: rect.midX, y: heightOfRect * 3/4), width: widthOfSymbol, height: heightOfSymbol)
}
return path
}
}
This is the diamond part that has been implemented
result: Diamond Image
//
// Diamond.swift
// Set
//
// Created by world on 2022/11/27.
//
import SwiftUI
struct Diamond: Symbol {
var numberOfSymbols: SetGame.Card.Number
func drawing(_ path: Path, center: CGPoint, width: CGFloat, height: CGFloat) -> Path {
var path = path
let rightPoint = CGPoint(x: center.x + width/2, y: center.y)
path.move(to: rightPoint)
let bottomPoint = CGPoint(x: center.x, y: center.y + height/2)
let leftPoint = CGPoint(x: center.x - width/2 , y: center.y)
let topPoint = CGPoint(x: center.x, y: center.y - height/2)
path.addLine(to: bottomPoint)
path.addLine(to: leftPoint)
path.addLine(to: topPoint)
path.addLine(to: rightPoint)
return path
}
}
I haven't implemented the oval part yet
//
// Oval.swift
// Set
//
// Created by world on 2022/11/27.
//
import SwiftUI
struct Oval: Symbol {
var numberOfSymbols: SetGame.Card.Number
func drawing(_ path: Path, center: CGPoint, width: CGFloat, height: CGFloat) -> Path {
var path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: width, height: height), cornerRadius: 0)
// ...
}
}
Perhaps this can be solved by function overloading

Related

Curved bottom bar

I want to make curved bottom bar it is not looking perfect round by below code
struct customShape: Shape {
var xAxis : CGFloat
var animatableData: CGFloat{
get { return xAxis}
set { xAxis = newValue}
}
func path(in rect: CGRect) -> Path {
return Path { path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: rect.width, y: 0))
path.addLine(to: CGPoint(x: rect.width, y: rect.height))
path.addLine(to: CGPoint(x: 0, y: rect.height))
let center = xAxis
path.move(to: CGPoint(x: center - 43, y: 0))
let to1 = CGPoint(x: center, y: 50)
let center1 = CGPoint(x: center - 30, y: 0)
let center2 = CGPoint(x: center - 46, y: 42)
let to2 = CGPoint(x: center + 52, y: 0)
let center3 = CGPoint(x: center + 57, y: 47)
let center4 = CGPoint(x: center + 35, y: 0)
path.addCurve(to: to1, control1: center1, control2: center2)
path.addCurve(to: to2, control1: center3, control2: center4)
}
}
}
You are trying to construct a circle with Bezier handles. And it seems you are not calculating the values but guessing and trying. This will be at least very hard if not impossible to solve. Try to add an arc instead of a curve.
Possible implementation:
struct customShape: Shape {
var xAxis : CGFloat
var radius: CGFloat = 40
var animatableData: CGFloat{
get { return xAxis}
set { xAxis = newValue}
}
func path(in rect: CGRect) -> Path {
return Path { path in
path.move(to: CGPoint(x: 0, y: 0))
// add a line to the starting point of the circle
path.addLine(to: CGPoint(x: xAxis - radius, y: 0))
// add the arc with the centerpoint of (xAxis,0) and 180°
path.addArc(center: .init(x: xAxis, y: 0), radius: radius, startAngle: .init(degrees: 180), endAngle: .init(degrees: 0), clockwise: true)
// complete the rectangle
path.addLine(to: .init(x: rect.size.width, y: 0))
path.addLine(to: CGPoint(x: rect.width, y: rect.height))
path.addLine(to: CGPoint(x: 0, y: rect.height))
path.closeSubpath()
}
}
}

The layer is masked by a `CAShapeLayer` with a path that's a rect, a rounded-rect, or an ellipse

I'm trying to create a view that can have different values for each of the corners. Everything works as expected but in the Vide Debug mode I get an optimization opportunities warning, which says:
The layer is masked by a CAShapeLayer with a path that's a rect, a rounded-rect, or an ellipse. Instead, use an appropriately transformed container layer with cornerRadius and masksToBounds set.
I'm wondering if there is a better way to achieve the same effect, here's my current code:
extension UIBezierPath {
convenience init(
shouldRoundRect rect: CGRect,
topLeftRadius: CGFloat,
topRightRadius: CGFloat,
bottomLeftRadius: CGFloat,
bottomRightRadius: CGFloat
){
self.init()
let path = CGMutablePath()
let topLeft = rect.origin
let topRight = CGPoint(x: rect.maxX, y: rect.minY)
let bottomRight = CGPoint(x: rect.maxX, y: rect.maxY)
let bottomLeft = CGPoint(x: rect.minX, y: rect.maxY)
if topLeftRadius != 0 {
path.move(to: CGPoint(x: topLeft.x + topLeftRadius, y: topLeft.y))
} else {
path.move(to: topLeft)
}
if topRightRadius != 0 {
path.addLine(to: CGPoint(x: topRight.x - topRightRadius, y: topRight.y))
path.addArc(tangent1End: topRight, tangent2End: CGPoint(x: topRight.x, y: topRight.y + topRightRadius), radius: topRightRadius)
} else {
path.addLine(to: topRight)
}
if bottomRightRadius != 0 {
path.addLine(to: CGPoint(x: bottomRight.x, y: bottomRight.y - bottomRightRadius))
path.addArc(tangent1End: bottomRight, tangent2End: CGPoint(x: bottomRight.x - bottomRightRadius, y: bottomRight.y), radius: bottomRightRadius)
} else {
path.addLine(to: bottomRight)
}
if bottomLeftRadius != 0 {
path.addLine(to: CGPoint(x: bottomLeft.x + bottomLeftRadius, y: bottomLeft.y))
path.addArc(tangent1End: bottomLeft, tangent2End: CGPoint(x: bottomLeft.x, y: bottomLeft.y - bottomLeftRadius), radius: bottomLeftRadius)
} else {
path.addLine(to: bottomLeft)
}
if topLeftRadius != 0 {
path.addLine(to: CGPoint(x: topLeft.x, y: topLeft.y + topLeftRadius))
path.addArc(tangent1End: topLeft, tangent2End: CGPoint(x: topLeft.x + topLeftRadius, y: topLeft.y), radius: topLeftRadius)
} else {
path.addLine(to: topLeft)
}
path.closeSubpath()
cgPath = path
}
}
class CornerRadiusView: UIView {
private var topLeftRadius: CGFloat = 0
private var topRightRadius: CGFloat = 0
private var bottomLeftRadius: CGFloat = 0
private var bottomRightRadius: CGFloat = 0
func setCornerRadius(radius: CornerRadius) {
topLeftRadius = radius.topLeft
topRightRadius = radius.topRight
bottomLeftRadius = radius.bottomLeft
bottomRightRadius = radius.bottomRight
setNeedsLayout()
}
override open func layoutSubviews() {
super.layoutSubviews()
applyRadiusMask()
}
private func applyRadiusMask() {
let path = UIBezierPath(
shouldRoundRect: bounds,
topLeftRadius: topLeftRadius,
topRightRadius: topRightRadius,
bottomLeftRadius: bottomLeftRadius,
bottomRightRadius: bottomRightRadius
)
let shape = CAShapeLayer()
shape.path = path.cgPath
layer.mask = shape
}
}
struct CornerRadius {
let topLeft: CGFloat
let topRight: CGFloat
let bottomLeft: CGFloat
let bottomRight: CGFloat
}

Using a custom UITabbar inside UITabbarController programmatically

I'm trying to use my own UITabBar instance inside a UITabBarController. Using Storyboard I know that you can add your Custom Class to your TabbarController using the following:
How can I achieve the same thing programmatically?
Here's my custom class:
I've tried modifying and overriding the tabBar variable inside UITabBarController but it seems that it's a get only variable and can not be modified. Is there an easy solution to fix this issue?
Much appreciated!
class CustomTabBar: UITabBar {
private var shapeLayer: CALayer?
private func addShape() {
let shapeLayer = CAShapeLayer()
shapeLayer.path = createPath()
shapeLayer.strokeColor = UIColor.lightGray.cgColor
shapeLayer.fillColor = UIColor.white.cgColor
shapeLayer.lineWidth = 1.0
if let oldShapeLayer = self.shapeLayer {
self.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
} else {
self.layer.insertSublayer(shapeLayer, at: 0)
}
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: height),
controlPoint1: CGPoint(x: (centerWidth - 30), y: 0), controlPoint2: CGPoint(x: centerWidth - 35, y: height))
// second curve up
path.addCurve(to: CGPoint(x: (centerWidth + height * 2), y: 0),
controlPoint1: CGPoint(x: centerWidth + 35, y: height), 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
}
func createPathCircle() -> CGPath {
let radius: CGFloat = 37.0
let path = UIBezierPath()
let centerWidth = self.frame.width / 2
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: (centerWidth - radius * 2), y: 0))
path.addArc(withCenter: CGPoint(x: centerWidth, y: 0), radius: radius, startAngle: CGFloat(180).degreesToRadians, endAngle: CGFloat(0).degreesToRadians, clockwise: false)
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
}
}
And here's my view controller:
final class TabbarViewController: UITabBarController {
// MARK: - Properties
private lazy var tabBarItemControllers: [UIViewController] = {
let editorController = ...
let settingsController = ...
return [editorController, settingsController]
}()
// MARK: - Lifecycle
override func viewDidLoad() {
super.viewDidLoad()
configureTabbar()
setViewControllers(tabBarItemControllers, animated: true)
}
}

Creating triangle view fails when not added to x: 0 and y: 0

This code works when the frame's x and y are 0, but fails when using different x and y's:
class Triangle: UIView {
override func draw(_ rect: CGRect) {
let path = UIBezierPath()
let startX = self.center.x
let startY: CGFloat = 0
path.move(to: CGPoint(x: startX, y: startY))
path.addLine(to: CGPoint(x: self.bounds.width, y: self.bounds.height))
path.addLine(to: CGPoint(x: 0, y: self.bounds.height))
path.close()
UIColor.green.setStroke()
path.stroke()
}
}
import UIKit
class ViewController: UIViewController {
#IBAction func animate(_ sender: UIButton) {
let triangleView = Triangle(frame: CGRect(x: 50, y: 50, width: 30, height: 30))
triangleView.backgroundColor = .clear
self.view.addSubview(triangleView)
}
}
This works:
let triangleView = Triangle(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
When failing it looks like this:
Well that is one ugly triangle. Why does it works with x: 0 and y:0 and fails when using different floats there? How can I fix this?
replace let startX = self.center.x with let startX = self. bounds.width / 2

Different cornerRadius for each corner Swift 3 - iOS

I want to set different corner radius for a view in Swift -3 , I am able to set the radius for the each corner to the same value like the one mentioned in the following post ,how to set cornerRadius for only top-left and top-right corner of a UIView?
Is there a way I can set the corner radius in the following format ?
Radius top-left: 18
Radius top-right: 18
Radius bottom-right: 3
Radius bottom-left: 18
Do you want to add unique corner value for each corner?
Do you want to add a border after that?
I've got a solution will look like this:
First, add a UIBezierPath extension I made:
extension UIBezierPath {
convenience init(shouldRoundRect rect: CGRect, topLeftRadius: CGSize = .zero, topRightRadius: CGSize = .zero, bottomLeftRadius: CGSize = .zero, bottomRightRadius: CGSize = .zero){
self.init()
let path = CGMutablePath()
let topLeft = rect.origin
let topRight = CGPoint(x: rect.maxX, y: rect.minY)
let bottomRight = CGPoint(x: rect.maxX, y: rect.maxY)
let bottomLeft = CGPoint(x: rect.minX, y: rect.maxY)
if topLeftRadius != .zero{
path.move(to: CGPoint(x: topLeft.x+topLeftRadius.width, y: topLeft.y))
} else {
path.move(to: CGPoint(x: topLeft.x, y: topLeft.y))
}
if topRightRadius != .zero{
path.addLine(to: CGPoint(x: topRight.x-topRightRadius.width, y: topRight.y))
path.addCurve(to: CGPoint(x: topRight.x, y: topRight.y+topRightRadius.height), control1: CGPoint(x: topRight.x, y: topRight.y), control2:CGPoint(x: topRight.x, y: topRight.y+topRightRadius.height))
} else {
path.addLine(to: CGPoint(x: topRight.x, y: topRight.y))
}
if bottomRightRadius != .zero{
path.addLine(to: CGPoint(x: bottomRight.x, y: bottomRight.y-bottomRightRadius.height))
path.addCurve(to: CGPoint(x: bottomRight.x-bottomRightRadius.width, y: bottomRight.y), control1: CGPoint(x: bottomRight.x, y: bottomRight.y), control2: CGPoint(x: bottomRight.x-bottomRightRadius.width, y: bottomRight.y))
} else {
path.addLine(to: CGPoint(x: bottomRight.x, y: bottomRight.y))
}
if bottomLeftRadius != .zero{
path.addLine(to: CGPoint(x: bottomLeft.x+bottomLeftRadius.width, y: bottomLeft.y))
path.addCurve(to: CGPoint(x: bottomLeft.x, y: bottomLeft.y-bottomLeftRadius.height), control1: CGPoint(x: bottomLeft.x, y: bottomLeft.y), control2: CGPoint(x: bottomLeft.x, y: bottomLeft.y-bottomLeftRadius.height))
} else {
path.addLine(to: CGPoint(x: bottomLeft.x, y: bottomLeft.y))
}
if topLeftRadius != .zero{
path.addLine(to: CGPoint(x: topLeft.x, y: topLeft.y+topLeftRadius.height))
path.addCurve(to: CGPoint(x: topLeft.x+topLeftRadius.width, y: topLeft.y) , control1: CGPoint(x: topLeft.x, y: topLeft.y) , control2: CGPoint(x: topLeft.x+topLeftRadius.width, y: topLeft.y))
} else {
path.addLine(to: CGPoint(x: topLeft.x, y: topLeft.y))
}
path.closeSubpath()
cgPath = path
}
}
Then, add this UIView extension:
extension UIView{
func roundCorners(topLeft: CGFloat = 0, topRight: CGFloat = 0, bottomLeft: CGFloat = 0, bottomRight: CGFloat = 0) {//(topLeft: CGFloat, topRight: CGFloat, bottomLeft: CGFloat, bottomRight: CGFloat) {
let topLeftRadius = CGSize(width: topLeft, height: topLeft)
let topRightRadius = CGSize(width: topRight, height: topRight)
let bottomLeftRadius = CGSize(width: bottomLeft, height: bottomLeft)
let bottomRightRadius = CGSize(width: bottomRight, height: bottomRight)
let maskPath = UIBezierPath(shouldRoundRect: bounds, topLeftRadius: topLeftRadius, topRightRadius: topRightRadius, bottomLeftRadius: bottomLeftRadius, bottomRightRadius: bottomRightRadius)
let shape = CAShapeLayer()
shape.path = maskPath.cgPath
layer.mask = shape
}
}
Finally, call method
myView.roundCorners(topLeft: 10, topRight: 20, bottomLeft: 30, bottomRight: 40)
And add border. Apparently, layer.borderRadius won't work properly, so create a border using CAShapeLayer and previously created path.
let borderLayer = CAShapeLayer()
borderLayer.path = (myView.layer.mask! as! CAShapeLayer).path! // Reuse the Bezier path
borderLayer.strokeColor = UIColor.red.cgColor
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.lineWidth = 5
borderLayer.frame = myView.bounds
myView.layer.addSublayer(borderLayer)
Voila!
You could set the default layer.cornerRadius to the smallest value and then set the layer mask's border to the bigger value.
let demoView = UIView(frame: CGRect(x: 100, y: 200, width: 100, height: 100))
demoView.backgroundColor = UIColor.red
demoView.layer.cornerRadius = 3.0
let maskPath = UIBezierPath(roundedRect: demoView.bounds,
byRoundingCorners: [.topLeft, .topRight, .bottomLeft],
cornerRadii: CGSize(width: 18.0, height: 0.0))
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.cgPath
demoView.layer.mask = maskLayer
view.addSubview(demoView)
A slightly improved and simplified answer based on #Kirill Dobryakov's. Curves can leave very small but noticeable irregularities, when you look at it and you know it's not ideally round (try e.g. view side 40 and radius 20). I have no idea how it's even possible, but anyway, the most reliable way is to use arcs which make ideal round corners, and also an #IBDesigneable component for you:
extension UIBezierPath {
convenience init(shouldRoundRect rect: CGRect, topLeftRadius: CGFloat, topRightRadius: CGFloat, bottomLeftRadius: CGFloat, bottomRightRadius: CGFloat){
self.init()
let path = CGMutablePath()
let topLeft = rect.origin
let topRight = CGPoint(x: rect.maxX, y: rect.minY)
let bottomRight = CGPoint(x: rect.maxX, y: rect.maxY)
let bottomLeft = CGPoint(x: rect.minX, y: rect.maxY)
if topLeftRadius != 0 {
path.move(to: CGPoint(x: topLeft.x + topLeftRadius, y: topLeft.y))
} else {
path.move(to: topLeft)
}
if topRightRadius != 0 {
path.addLine(to: CGPoint(x: topRight.x - topRightRadius, y: topRight.y))
path.addArc(tangent1End: topRight, tangent2End: CGPoint(x: topRight.x, y: topRight.y + topRightRadius), radius: topRightRadius)
}
else {
path.addLine(to: topRight)
}
if bottomRightRadius != 0 {
path.addLine(to: CGPoint(x: bottomRight.x, y: bottomRight.y - bottomRightRadius))
path.addArc(tangent1End: bottomRight, tangent2End: CGPoint(x: bottomRight.x - bottomRightRadius, y: bottomRight.y), radius: bottomRightRadius)
}
else {
path.addLine(to: bottomRight)
}
if bottomLeftRadius != 0 {
path.addLine(to: CGPoint(x: bottomLeft.x + bottomLeftRadius, y: bottomLeft.y))
path.addArc(tangent1End: bottomLeft, tangent2End: CGPoint(x: bottomLeft.x, y: bottomLeft.y - bottomLeftRadius), radius: bottomLeftRadius)
}
else {
path.addLine(to: bottomLeft)
}
if topLeftRadius != 0 {
path.addLine(to: CGPoint(x: topLeft.x, y: topLeft.y + topLeftRadius))
path.addArc(tangent1End: topLeft, tangent2End: CGPoint(x: topLeft.x + topLeftRadius, y: topLeft.y), radius: topLeftRadius)
}
else {
path.addLine(to: topLeft)
}
path.closeSubpath()
cgPath = path
}
}
#IBDesignable
open class VariableCornerRadiusView: UIView {
private func applyRadiusMaskFor() {
let path = UIBezierPath(shouldRoundRect: bounds, topLeftRadius: topLeftRadius, topRightRadius: topRightRadius, bottomLeftRadius: bottomLeftRadius, bottomRightRadius: bottomRightRadius)
let shape = CAShapeLayer()
shape.path = path.cgPath
layer.mask = shape
}
#IBInspectable
open var topLeftRadius: CGFloat = 0 {
didSet { setNeedsLayout() }
}
#IBInspectable
open var topRightRadius: CGFloat = 0 {
didSet { setNeedsLayout() }
}
#IBInspectable
open var bottomLeftRadius: CGFloat = 0 {
didSet { setNeedsLayout() }
}
#IBInspectable
open var bottomRightRadius: CGFloat = 0 {
didSet { setNeedsLayout() }
}
override open func layoutSubviews() {
super.layoutSubviews()
applyRadiusMaskFor()
}
}
best way to do this after iOS 11, it looks more smooth in that way.
func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
clipsToBounds = true
layer.cornerRadius = radius
layer.maskedCorners = CACornerMask(rawValue: corners.rawValue)
}
for original answer: https://stackoverflow.com/a/50289822/4206186

Resources