I have put a normal UIView in IB in my UIViewController, and set the view to a UIView subclass with the following draw method:
override func draw(_ rect: CGRect) {
super.draw(rect)
self.isOpaque = false
self.backgroundColor?.setFill()
UIRectFill(rect)
let insetRect = self.bounds.insetBy(dx: 0, dy: 4)
UIColor.clear.setFill()
UIRectFill(insetRect)
}
The expected result should be that the background color (white) is shown as a line on top and bottom of the view. That indeed is what happens. But I would like the inset rectangle to be transparent, that is why I set the color to clear. But the result is black instead. See the image.
I found another way of doing it, subclassing UIView, and this time I get the expected transparency in the middle:
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func draw(_ rect: CGRect) {
super.draw(rect)
let top = UIBezierPath(rect: CGRect(x: 0, y: 0, width: self.bounds.width, height: 4))
UIColor.white.setFill()
top.fill()
let bottom = UIBezierPath(rect: CGRect(x: 0, y: self.bounds.height - 4, width: self.bounds.width, height: 4))
bottom.fill()
}
Related
I want to pose my problem with the hope that someone can help me:
I created a subclass of UINavigationBar, adding an image as a background.
here is the code:
class NavigationBarN: UINavigationBar {
let customHeight: CGFloat = UIScreen.main.bounds.height / 8
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
translatesAutoresizingMaskIntoConstraints = true
self.barStyle = UIBarStyle.black
self.tintColor = .white
}
override init(frame: CGRect) {
super.init(frame: frame)
translatesAutoresizingMaskIntoConstraints = true
self.barStyle = UIBarStyle.black
self.tintColor = .white
}
override func sizeThatFits(_ size: CGSize) -> CGSize {
return CGSize(width: UIScreen.main.bounds.width, height: customHeight)
}
var i = 0
override open func layoutSubviews() {
super.layoutSubviews()
frame = CGRect(x: frame.origin.x, y: 0, width: frame.size.width, height: customHeight) // problem here
for subview in self.subviews {
var stringFromClass = NSStringFromClass(subview.classForCoder)
if stringFromClass.contains("BarBackground") {
subview.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: self.frame.height)
let imageViewBackground = UIImageView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: customHeight))
imageViewBackground.image = UIImage(named: “Image”1)
imageViewBackground.contentMode = .scaleToFill
subview.addSubview(imageViewBackground)
}
stringFromClass = NSStringFromClass(subview.classForCoder)
if stringFromClass.contains("BarContent") {
let centerY = subview.frame.heigh
subview.frame = CGRect(x: subview.frame.origin.x, y: centerY, width: subview.frame.width, height: subview.frame.height)
}
}
}
/*
// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
// Drawing code
}
*/
}
Up to iOS 11, it works without problems since iOS 12 the problems begin, the subclass enters an infinite loop. However the infinite loop occurs only when I try to initialize a new VC through the "navigationController? .PushViewController" function, otherwise it works.
The line of code causing the loop apparently is:
frame = CGRect(x: frame.origin.x, y: 0, width: frame.size.width, height: customHeight)
But removing it the navigation bar is not created correctly.
Anyone have any solution?
Thank You
You shouldn't change your frame in layoutSubviews – you should only be laying out your subviews. Changing the size of the frame in layoutSubviews couples the layout and sizing of the view, which you shouldn't do.
It's likely that under the hood, UINavigationBar is calling setNeedsLayout when its frame gets set.
I am trying to draw a rectangle with a random border color with a clear background on top of an imageView. I need to loop through a set of co-ordinates and add appropriate rectangles to my image. I can't manage to get the rectangle background colour to be clear. Code below:
// the draw class
class Draw: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
let h = rect.height
let w = rect.width
let color:UIColor = Palette.getRandomColour()
//var drect = CGRect(x: (w * 0.25),y: (h * 0.25),width: (w * 0.5),height: (h * 0.5))
let drect = CGRect(x: rect.minX ,y: rect.minY , width: w, height: h)
let bpath:UIBezierPath = UIBezierPath(rect: drect)
UIColor.clear.setFill()
color.set()
bpath.stroke()
print("it ran")
NSLog("drawRect has updated the view")
}
}
// and in my viewDidLoad
for bp in sbp {
if let master = Bodyparts.getID(bp.masterid) {
let width = master.x2 - master.x1
let height = master.y2 - master.y1
let k = Draw(frame: CGRect(origin: CGPoint(x: master.x1, y: master.y1), size: CGSize(width: width, height: height)))
self.imgView.addSubview(k)
}
}
You need to set the background to clear. Here is a playground that you can copy and paste:
import PlaygroundSupport
import UIKit
class Draw: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .clear
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
let h = rect.height
let w = rect.width
let color:UIColor = .red
let drect = CGRect(x: rect.minX ,y: rect.minY , width: w, height: h)
let bpath:UIBezierPath = UIBezierPath(rect: drect)
UIColor.clear.setFill()
color.set()
bpath.stroke()
}
}
let d = Draw(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
view.backgroundColor = .green
view.addSubview(d)
PlaygroundPage.current.liveView = view
I'm not exactly sure if mean a transparent center of the rect by clear but you can use the following method.
You would need to set the style of the Paint to stroke, to draw a box instead of a filled rect. Basically you will draw a bounding box if you use the Paint.Style.Stroke option of your Paint.
// Give the canvas an image to draw on
val canvas: Canvas = bitmap?.let { Canvas(it) }!!
// Test points for rect
val left = 100f
val right = 300f
val top = 100f
val bottom = 500f
// Paint definition for bounding box
var borderPaint: Paint = Paint()
borderPaint.strokeWidth = 10f
borderPaint.color = Color.GREEN
borderPaint.style = Paint.Style.STROKE
// Draw border
canvas.drawRect(left, top, right, bottom+100, borderPaint)
// Show the bitmap on display
viewBinding.imageView.setImageBitmap(bitmap)
I am using the draw function in a custom UIView to create a custom texture. The issue is that the width and height are determined by a UIStackView. When I create the view I use CustomView(frame: CGRect(x: 0, y: 0, width: 50, height: 50, color: color) If the actual width and height are unknown at the time of the custom UIView uses the draw function. Is there a way to guarantee a UIBezierPath is centered within the bounds given by the UIStackView?
import Foundation
import UIKit
class CustomView: UIView {
let color: UIColor
required init(coder aDecoder: NSCoder) {
color = UIColor()
super.init(coder: aDecoder)!
}
init(frame: CGRect, color: UIColor) {
self.color = color
super.init(frame: frame)
self.backgroundColor = UIColor.init(hexString: CustomColors.pale_blue)
}
override func draw(_ rect: CGRect) {
color.setFill()
color.setStroke()
let width = Int(rect.size.width)
let height = Int(rect.size.height)
let yValue = Int(rect.origin.y)
let xValue = Int(rect.origin.x)
let rectBottom = UIBezierPath(rect: CGRect(x: xValue , y: yValue + height - (height/4), width: width, height: height/4))
let ovalTop = UIBezierPath(ovalIn: CGRect(x: xValue + (width/4), y:yValue + (height/3), width: width/2, height: height/2))
rectBottom.stroke()
rectBottom.fill()
ovalTop.fill()
ovalTop.stroke()
}
}
At the time that your draw method is called, layout has already happened. Just look at self.bounds inside draw().
To be clear, don't look at the rect passed to draw to determine your geometry. You would only use that rect if you wanted to only redraw what bits needed updating.
I want to rotate a UIView with a drawing inside (circle, rectangle or line). The problem is when I rotate the view and refresh the drawing (I need ir when I change some properties of the drawing, i.e) the drawing doesn't follow the view...
UIView without rotation:
UIView with rotation:
Here is my simple code (little extract from the original code):
Main ViewController
class TestRotation: UIViewController {
// MARK: - Properties
var drawingView:DrawingView?
// MARK: - Actions
#IBAction func actionSliderRotation(_ sender: UISlider) {
let degrees = sender.value
let radians = CGFloat(degrees * Float.pi / 180)
drawingView?.transform = CGAffineTransform(rotationAngle: radians)
drawingView?.setNeedsDisplay()
}
// MARK: - Init
override func viewDidLoad() {
super.viewDidLoad()
drawingView = DrawingView(frame:CGRect(x:50, y:50, width: 100, height:75))
self.view.addSubview(drawingView!)
drawingView?.setNeedsDisplay()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
UIView
class DrawingView: UIView {
override func draw(_ rect: CGRect) {
let start = CGPoint(x: 0, y: 0)
let end = CGPoint(x: self.frame.size.width, y: self.frame.size.height)
drawCicrle(start: start, end: end)
}
func drawCicrle(start:CGPoint, end:CGPoint) {
//Contexto
let context = UIGraphicsGetCurrentContext()
if context != nil {
//Ancho
context!.setLineWidth(2)
//Color
context!.setStrokeColor(UIColor.black.cgColor)
context!.setFillColor(UIColor.orange.cgColor)
let rect = CGRect(origin: start, size: CGSize(width: end.x-start.x, height: end.y-start.y))
let path = UIBezierPath(ovalIn: rect)
path.lineWidth = 2
path.fill()
path.stroke()
}
}
// MARK: - Init
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.gray
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
It seems that the problem is temporally solved if I don't refresh the view after rotating, but if I have to refresh later for some other reason (properties changed), the problem appears again.
What can I do? Thanks in advance
You are using the frame when you should be using the bounds.
The frame is the rectangle which contains the view. It is specified in the coordinate system of the superview of the view, and the frame changes when you rotate the view (because a rotated square extends further in the X and Y directions than a non-rotated square).
The bounds is the rectangle which contains the contents of the view. It is specified in the coordinate system of the view itself, and it doesn't change as the view is rotated or moved.
If you change frame to bounds in your draw(_:) function, it will work as you expect:
override func draw(_ rect: CGRect) {
let start = CGPoint(x: 0, y: 0)
let end = CGPoint(x: self.bounds.size.width, y: self.bounds.size.height)
drawCicrle(start: start, end: end)
}
Here's a demo showing the oval being redrawn as the slider moves.
Here's the changed code:
class DrawingView: UIView {
var fillColor = UIColor.orange {
didSet {
setNeedsDisplay()
}
}
override func draw(_ rect: CGRect) {
let start = CGPoint(x: 0, y: 0)
let end = CGPoint(x: self.bounds.size.width, y: self.bounds.size.height)
drawCircle(start: start, end: end)
}
func drawCircle(start:CGPoint, end:CGPoint) {
//Contexto
let context = UIGraphicsGetCurrentContext()
if context != nil {
//Ancho
context!.setLineWidth(2)
//Color
context!.setStrokeColor(UIColor.black.cgColor)
context!.setFillColor(fillColor.cgColor)
let rect = CGRect(origin: start, size: CGSize(width: end.x-start.x, height: end.y-start.y))
let path = UIBezierPath(ovalIn: rect)
path.lineWidth = 2
path.fill()
path.stroke()
}
}
// MARK: - Init
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.gray
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
#IBAction func actionSliderRotation(_ sender: UISlider) {
let degrees = sender.value
let radians = CGFloat(degrees * Float.pi / 180)
drawingView?.transform = CGAffineTransform(rotationAngle: radians)
drawingView?.fillColor = UIColor(hue: CGFloat(degrees)/360.0, saturation: 1.0, brightness: 1.0, alpha: 1.0)
}
Do I have to create a custom class in order to use the BezierPath in the Swift playgrounds?
The following code displays nothing but black background:
import UIKit
import XCPlayground
class GraphView : UIView {
override func drawRect(rect: CGRect) {
let path = UIBezierPath(rect: rect)
path.moveToPoint(CGPointMake(0,0))
path.addLineToPoint(CGPointMake(50,100))
path.closePath()
UIColor.redColor().setFill()
path.stroke()
}
}
let graphView = GraphView(frame: CGRectMake(0,0,960,640))
You have to use this at the end of your code:
XCPlaygroundPage.currentPage.liveView = graphView
and to open the Playground's "Assistant Editor" to see the result.
And also to change the background color of the view since it's black... and your line is also black. ;)
In Swift 5:
import UIKit
class GraphView : UIView {
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .white
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
let path = UIBezierPath(rect: rect)
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 50, y: 100))
path.stroke()
}
}
let graphView = GraphView(frame: CGRect(x: 0, y: 0, width: 960, height: 640))
Swift 5.2, Xcode 11.4