Swift UIButton Subclass not Showing on device or Simulator - ios

I have the following code and have declared IBDesignable.
The DrawRect is shown perfectly well in Interface Builder, but not at all in the Simulator or on Device.
Does anybody have any ideas why?
import UIKit
import QuartzCore
#IBDesignable class VideoButton: UIButton {
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect)
{
let color2 = UIColor(red: 0.500, green: 0.500, blue: 0.500, alpha: 0.000)
//// Oval Drawing
var ovalPath = UIBezierPath(ovalInRect: CGRectMake(frame.minX + floor(frame.width * 0.03571) + 0.5, frame.minY + floor(frame.height * 0.03571) + 0.5, floor(frame.width * 0.96429) - floor(frame.width * 0.03571), floor(frame.height * 0.96429) - floor(frame.height * 0.03571)))
color2.setFill()
ovalPath.fill()
UIColor.whiteColor().setStroke()
ovalPath.lineWidth = 3
ovalPath.stroke()
//// Rectangle Drawing
let rectanglePath = UIBezierPath(roundedRect: CGRectMake(frame.minX + floor(frame.width * 0.25714 + 0.5), frame.minY + floor(frame.height * 0.34286 + 0.5), floor(frame.width * 0.60000 + 0.5) - floor(frame.width * 0.25714 + 0.5), floor(frame.height * 0.64286 + 0.5) - floor(frame.height * 0.34286 + 0.5)), cornerRadius: 2)
color2.setFill()
rectanglePath.fill()
UIColor.whiteColor().setStroke()
rectanglePath.lineWidth = 3
rectanglePath.stroke()
//// Bezier Drawing
var bezierPath = UIBezierPath()
bezierPath.moveToPoint(CGPointMake(frame.minX + 0.61429 * frame.width, frame.minY + 0.50536 * frame.height))
bezierPath.addLineToPoint(CGPointMake(frame.minX + 0.75714 * frame.width, frame.minY + 0.34286 * frame.height))
bezierPath.addLineToPoint(CGPointMake(frame.minX + 0.75714 * frame.width, frame.minY + 0.64286 * frame.height))
bezierPath.addLineToPoint(CGPointMake(frame.minX + 0.61429 * frame.width, frame.minY + 0.50536 * frame.height))
bezierPath.closePath()
bezierPath.lineJoinStyle = kCGLineJoinRound;
color2.setFill()
bezierPath.fill()
UIColor.whiteColor().setStroke()
bezierPath.lineWidth = 3
bezierPath.stroke()
// }
}
}

Change the references to 'frame' to 'rect' and it should draw in the device and simulator.

You should not be overriding drawRect: for a UIButton subclass. There is no need; you can customize the look of a UIButton using its various properties and methods. It is far from clear why you are doing this. (The fact that you are doing it, and not calling super, probably explains the problem; but the solution is not, call super, but rather, don't do it in the first place.)

I have been trying to do a similar thing recently - create a subclass of UIButton, overriding drawRect() in order to draw a simple custom icon (I am making a play/stop button that alternates between "Play" and "Stop" on each tap):
Maybe I don't know enough about iOS development yet, but in response to other answers and older posts online that discourage extending the UIButton class, I don't understand why this would be a bad idea. Of course you could customize a button by setting custom background images, but in my opinion this isn't as flexible as overriding drawRect (not to mention it can be a pain to edit your button anytime you want to change something because you have to edit an actual image instead of a few lines of code).
I'm sure there are other ways to achieve the same result (implement a button via a custom UIView listening for touch events, for example), but I think the cleanest and easiest way is still just to extend the UIButton class. After all, it is a subclass itself of UIView.
Regarding your code - it appears to work correctly in my environment, although I had to change the colors slightly to get it to show up against a white background (i.e. UIColor.blackColor().setStroke() instead of UIColor.whiteColor().setStroke()). Also, as #Astrodan mentioned, it might be a good idea to use rect instead of frame, since it is being passed to you (although the code worked with frame for me):
Live-rendered Storyboard in XCode:
On iPhone 6 Simulator:

Related

Animating CAShapeLayer path smoothly

I'm trying to make a Gauge UIView to mimic the following image as close as possible
func gradientBezierPath(percent: CGFloat) -> UIBezierPath {
// vary this to move the start of the arc
let startAngle = CGFloat(180).toRadians()//-CGFloat.pi / 2 // This corresponds to 12 0'clock
// vary this to vary the size of the segment, in per cent
let proportion = CGFloat(50 * percent)
let centre = CGPoint (x: self.frame.size.width / 2, y: self.frame.size.height / 2)
let radius = self.frame.size.height/4//self.frame.size.width / (CGFloat(130).toRadians())
let arc = CGFloat.pi * 2 * proportion / 100 // i.e. the proportion of a full circle
// Start a mutable path
let cPath = UIBezierPath()
// Move to the centre
cPath.move(to: centre)
// Draw a line to the circumference
cPath.addLine(to: CGPoint(x: centre.x + radius * cos(startAngle), y: centre.y + radius * sin(startAngle)))
// NOW draw the arc
cPath.addArc(withCenter: centre, radius: radius, startAngle: startAngle, endAngle: arc + startAngle, clockwise: true)
// Line back to the centre, where we started (or the stroke doesn't work, though the fill does)
cPath.addLine(to: CGPoint(x: centre.x, y: centre.y))
return cPath
}
override func draw(_ rect: CGRect) {
// let endAngle = percent == 1.0 ? 0 : (percent * 180) + 180
path = UIBezierPath(arcCenter: CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2),
radius: self.frame.size.height/4,
startAngle: CGFloat(180).toRadians(),
endAngle: CGFloat(0).toRadians(),
clockwise: true)
percentPath = UIBezierPath(arcCenter: CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2),
radius: self.frame.size.height/4,
startAngle: CGFloat(180).toRadians(),
endAngle: CGFloat(0).toRadians(),
clockwise: true)
let shapeLayer = CAShapeLayer()
shapeLayer.path = self.path.cgPath
shapeLayer.strokeColor = UIColor(red: 110 / 255, green: 78 / 255, blue: 165 / 255, alpha: 1.0).cgColor
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineWidth = 5.0
shapeLayer.lineCap = .round
self.layer.addSublayer(shapeLayer)
percentLayer.path = self.percentPath.cgPath
percentLayer.strokeColor = UIColor(red: 255 / 255, green: 93 / 255, blue: 41 / 255, alpha: 1.0).cgColor
percentLayer.fillColor = UIColor.clear.cgColor
percentLayer.lineWidth = 8.0
// percentLayer.strokeEnd = CGFloat(percent)
percentLayer.lineCap = .round
self.layer.addSublayer(percentLayer)
// n.b. as #MartinR points out `cPath.close()` does the same!
// circle shape
circleShape.path = gradientBezierPath(percent: 1.0).cgPath//cPath.cgPath
circleShape.strokeColor = UIColor.clear.cgColor
circleShape.fillColor = UIColor.green.cgColor
self.layer.addSublayer(circleShape)
gradient.frame = frame
gradient.mask = circleShape
gradient.type = .radial
gradient.colors = [UIColor(red: 255 / 255, green: 93 / 255, blue: 41 / 255, alpha: 0.0).cgColor,
UIColor(red: 255 / 255, green: 93 / 255, blue: 41 / 255, alpha: 0.0).cgColor,
UIColor(red: 255 / 255, green: 93 / 255, blue: 41 / 255, alpha: 0.4).cgColor]
gradient.locations = [0, 0.35, 1]
gradient.startPoint = CGPoint(x: 0.49, y: 0.55) // increase Y adds more orange from top to bottom
gradient.endPoint = CGPoint(x: 0.98, y: 1) // increase x pushes orange out more to edges
self.layer.addSublayer(gradient)
//myTextLayer.string = "\(Int(percent * 100))"
myTextLayer.backgroundColor = UIColor.clear.cgColor
myTextLayer.foregroundColor = UIColor.white.cgColor
myTextLayer.fontSize = 85.0
myTextLayer.frame = CGRect(x: (self.frame.size.width / 2) - (self.frame.size.width/8), y: (self.frame.size.height / 2) - self.frame.size.height/8, width: 120, height: 120)
self.layer.addSublayer(myTextLayer)
}
This produces the following in a playground which is pretty close to what i'm aiming for:
The problem comes when trying to animate the change in the gauge value. I can animate the percentLayer pretty easy with modifying strokeEnd, but animating the circleShape.path for the gradient results in some non-smooth animations if there's a large change in the percent value of the gauge. Here's the function i use to animate both layers (it's called on a timer every 2 seconds right now to simulate gauge value changes).
func randomPercent() {
let random = CGFloat.random(in: 0.0...1.0)
// Animate the percent layer
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = percentLayer.strokeEnd
animation.toValue = random
animation.duration = 1.5
percentLayer.strokeEnd = random
percentLayer.add(animation, forKey: nil)
// Animate the gradient layer
let newShapePath = gradientBezierPath(percent: random)
let gradientAnimation = CABasicAnimation(keyPath: "path")
gradientAnimation.duration = 1.5
gradientAnimation.toValue = newShapePath
gradientAnimation.fromValue = circleShape.path
circleShape.path = newShapePath.cgPath
self.circleShape.add(gradientAnimation, forKey: nil)
myTextLayer.string = "\(Int(random * 100))"
}
Notice how when the animation is done with small changes in the value, the animation looks good. However when there's a large change the gradient animation doesn't look natural at all. Any ideas on how to improve this? Or maybe is it possible to animate a different keyPath for better performance? Any help would be greatly appreciated!
You can't use the Bezier path addArc() function to animate an arc and change the arc distance.
The problem is control points. In order for an animation to work smoothly, the starting and ending shape must have the same number and type of control points. Under the covers, the UIBezierPath (and CGPath) objects create arcs approximating a circle by combining Bezier curves (I don't remember if it uses Quadratic or Cubic Bezier curves.) The entire circle is made up of multiple connected Bezier curves ("Bezier" the mathematical spline function, not UIBeizerPath, which is a UIKit function that creates shapes that can include Bezier paths.) I seem to remember a Bezier approximation of a circle is made up of 4 linked cubic Bezier curves. (See this SO answer for a discussion of what that looks like, if you're interested.)
Here is my understanding of how it works. (I might have the details wrong, but it illustrates the problem in any case.) As you move from <= 1/4 of a full circle to > 1/4 of a full circle, the arc function will use first 1 cubic Bezier section, then 2. At the transition from <= 1/2 of a circle to > 1/2 of a circle, it will shift to 3 Bezier curves, and at the transition from <= 3/4 of a circle to > 3/4 of a circle, it will switch to 4 Bezier curves.
The solution:
You are on the right track with using strokeEnd. Always create your shape as the full circle, and set strokeEnd to something less than 1. That will give you a part of a circle, but in a way that you can animate smoothly. (You can animate strokeStart as well.)
I've animated circles just like you describe using CAShapeLayer and strokeEnd (It was a number of years ago, so it was in Objective-C.) I wrote an article here on OS on using the approach to animate a mask on a UIImageView and create a "clock wipe" animation. If you have an image of your full shaded circle you could use that exact approach here. (You should be able to add a mask layer to any UIView's content layer or other layer, and animate that layer as in my clock wipe demo. Let me know if you need help deciphering the Objective-C.
Here is the sample clock wipe animation I created:
Note that you can use this effect to mask any layer, not just an image view.
EDIT: I posted an update to my clock wipe animation question and answer with a Swift version of the project.
You can get to the new repo directly at https://github.com/DuncanMC/ClockWipeSwift.
For your application I would set up the parts of your gauge that you need to animate as a composite of layers. You'd then attach a CAShapeLayer based mask layer to that composite layer and add a circle arc path to that shape layer and animate the strokeEnd as shown in my sample project. My clock wipe animation reveals the image like the sweep of a clock hand from the center of the layer. In your case you'd center the arc on the bottom center of your layer, and only use a half-circle arc in your shape layer. Using a mask that way would give you a sharp-edged crop to your composited layer. you'd lose the round end caps on your red arc. To fix that you'd have to animate the red arc as it's own shape layer (using strokeEnd) and animate the gradient fill's arc strokeEnd separately.

SKSpriteNode will not center

I have this inside my GameScene which is called in the didMove()
for i in 1...5 {
// path to create the circle
let path = UIBezierPath(arcCenter: CGPoint(x: center.x, y: center.y), radius: CGFloat(((43 * i) + 140)), startAngle: CGFloat(GLKMathDegreesToRadians(-50)), endAngle: CGFloat(M_PI * 2), clockwise: false)
// the inside edge of the circle used for creating its physics body
let innerPath = UIBezierPath(arcCenter: CGPoint(x: center.x, y: center.y), radius: CGFloat(((43 * i) + 130)), startAngle: CGFloat(GLKMathDegreesToRadians(-50)), endAngle: CGFloat(M_PI * 2), clockwise: false)
// create a shape from the path and customize it
let shape = SKShapeNode(path: path.cgPath)
shape.lineWidth = 20
shape.strokeColor = UIColor(red:0.98, green:0.99, blue:0.99, alpha:1.00)
// create a texture and apply it to the sprite
let trackViewTexture = self.view!.texture(from: shape)
let trackViewSprite = SKSpriteNode(texture: trackViewTexture)
trackViewSprite.physicsBody = SKPhysicsBody(edgeChainFrom: innerPath.cgPath)
self.addChild(trackViewSprite)
}
It uses UIBezierPaths to make a few circles. It converts the path into a SKShapeNode then a SKTexture and then applies it to the final SKSpriteNode.
When I do this, the SKSpriteNode is not where it should be, it is a few to the right:
But when I add the SKShapeNode I created, it is set perfectly fine to where it should be:
Even doing this does not center it!
trackViewSprite.position = CGPoint(x: 0, y: 0)
No matter what I try it just will not center.
Why is this happening? Some sort of bug when converting to a texture?
P.S - This has something to do with this also Keep relative positions of SKSpriteNode from SKShapeNode from CGPath
But there is also no response :(
Edit, When I run this:
let testSprite = SKSpriteNode(color: UIColor.yellow, size: trackViewSprite.size)
self.addChild(testSprite)
It shows it has the same frame also:
After a long discussion, we determined that the problem is due to the frame size not being the expected size of the shape.
To combat this, the OP created an outer path of his original path, and calculated the frame that would surround this. Now this approach may not work for everybody.
If anybody else comes across this issue, they will need to do these things:
1) Check the frame of the SKShapeNode to make sure that it is correct
2) Determine what method is best to calculate the correct desired frame
3) Use this new frame when getting textureFromNode to extract only the desired texture size

Resize parent UIView based on its children size

I'm new in iOS programming and still don't know how to handle correctly basic stuff like this so I hope someone has good practice to share.
I created a custom keyboard for the user to answer to a question.
It's an UIView containing some UIButton.
How does one center the whole keyboard?
I know I could calculate the width of the keyboard by adding up the width of each key but this seems quite complicated for such a simple action.
Here's my code (in Swift) for now, thanks.
keyboardContainer = UIView(frame: CGRectMake(0, 0, self.frame.width, 200))
keyboardContainer!.center = CGPoint(x: keyboardContainer!.frame.width / 2, y: self.frame.height - keyboardContainer!.frame.height / 2)
self.addSubview(keyboardContainer!)
let gap = Int(self.frame.width) / 8
for i in 0..<keyboardLetters!.count {
let posX = Int(i % 7) * gap + 22
let posY = Int(i / 7) * gap + 25
let key = Key(frame: CGRectMake(0, 0, 44, 44))
key.letter = keyboardLetters![i]
key.tag = i
key.center = CGPoint(x: posX, y: posY)
keyboardContainer!.addSubview(key)
key.addTarget(self, action: "onKeyboardTap:", forControlEvents: .TouchUpInside)
}
Move the center of keyboardContainer and all the buttons will move with it.

SKShapeNode position line up with ground

I am simply trying to draw a rectangle and placing it in the bottom left hand side of the screen
var rectW:CGFloat = CGFloat(200.0)
var rectH:CGFloat = ceil(self.frame.height * 0.15)
var rect = SKShapeNode(rectOfSize: CGSize(width: rectW, height: rectH));
let posX:CGFloat = 0.0 + (rect.frame.width / 2)
let posY:CGFloat = self.frame.height - (self.frame.height - rect.frame.height)
rect.position = CGPointMake(posX,posY)
rect.fillColor = SKColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 1.0)
rect.lineWidth = 1
self.addChild(rect)
The issue is that even though i believe all the maths is correct the rectangle is about 38 points/pixels that are under the screen, as you can see from the image below (the white border shows the limit).
For your information here is an output of the positions, heights and widths.
PosX: 100.5
PosY: 117.0
Rect Width: 201.0
Rect Height: 117.0
Frame Height: 768.0
Frame Weight: 1024.0
If i simple take this line but add 38 points/pixels it works, but why? Is there something I am missing?
let posY:CGFloat = self.frame.height - (self.frame.height - rect.frame.height) + 38
I found the answer via the following two answers:
SpriteKit coordinate system messed up
Problems understanding coordinate system SpriteKit using Swift
The problem turns out to be with GameScene.sks having it's size set differently.
Open up GameScene.sks and go to 'Show SKNodeInspector' should be the third box in the top right hand side of the screen.
Then set the dimensions to 320 x 568
Save then run. Should be working.

Is the Bluetooth logo available as a character on iPhone?

Is there a font on iOS where there's a glyph for the Bluetooth logo? Some Dingbats, maybe, or Emoji? How about the WiFi logo?
EDIT: how about a third party font where there's such a character, the one that I could license and ship?
No, the Bluetooth logo is not a glyph or a font-face character.
Like Seva said, It's a combination of runic Hagall (ᚼ) and Bjarkan (ᛒ). I was trying to do the same thing by combining the two symbols.
I accomplished this by first finding a font that had these two characters. I ended up using LeedsUni. You can download it here: http://www.personal.leeds.ac.uk/~ecl6tam/.
You'll need to reference the path where the font is located in info.plist.
<key>UIAppFonts</key>
<array>
<string>Fonts/LeedsUni10-12-13.ttf</string>
</array>
I then created two UIView objects(UIButton objects in my case) which overlapped each other so that the two characters lined up properly. Depending on the font you use, you may need to adjust x and y values for the UIView frames.
My code is in C# because I'm using Xamarin, but you should be able to do the same thing in Objective C or Swift.
UIView bleView = new UIView(new CGRect(0, 0, 34.0f, 34.0f));
string fontName = "LeedsUni";
UIButton bluetoothToSerialButton = new UIButton(UIButtonType.RoundedRect);
bluetoothToSerialButton.Frame = new CGRect(0, 0, 34.0f, 34.0f);
bluetoothToSerialButton.SetTitleColor(UIApplication.SharedApplication.Delegate.GetWindow().TintColor, UIControlState.Normal);
bluetoothToSerialButton.SetTitle("ᛒ", UIControlState.Normal);
bluetoothToSerialButton.Font = UIFont.FromName(fontName, 34.0f);
UIButton bluetoothToSerialButton2 = new UIButton(UIButtonType.RoundedRect);
bluetoothToSerialButton2.Frame = new CGRect(-3.5f, 0, 34.0f, 34.0f);
bluetoothToSerialButton2.SetTitleColor(UIApplication.SharedApplication.Delegate.GetWindow().TintColor, UIControlState.Normal);
bluetoothToSerialButton2.SetTitle("ᚼ", UIControlState.Normal);
bluetoothToSerialButton2.Font = UIFont.FromName(fontName, 34.0f);
bleView.AddSubviews(new UIView[] { bluetoothToSerialButton, bluetoothToSerialButton2 });
Using Quartz2D in Swift 4.1
If you hate using external fonts or adding a bunch of .png files, you may prefer a simple class to get the same effect using Quartz2D.
This works for me with a logo of 20x20 points. You may want to optimize the geometry or line width. Also note that the frame's width should be equal the height.
Note that you will need to use setNeedsDisplay if the size changes.
import UIKit
class BluetoothLogo: UIView {
var color: UIColor!
convenience init(withColor color: UIColor, andFrame frame: CGRect) {
self.init(frame: frame)
self.backgroundColor = .clear
self.color = color
}
override func draw(_ rect: CGRect) {
let context = UIGraphicsGetCurrentContext()
let h = self.frame.height
let y1 = h * 0.05
let y2 = h * 0.25
context?.move(to: CGPoint(x: y2, y: y2))
context?.addLine(to: CGPoint(x: h - y2, y: h - y2))
context?.addLine(to: CGPoint(x: h/2, y: h - y1))
context?.addLine(to: CGPoint(x: h/2, y: y1))
context?.addLine(to: CGPoint(x: h - y2, y: y2))
context?.addLine(to: CGPoint(x: y2, y: h - y2))
context?.setStrokeColor(color.cgColor)
context?.setLineCap(.round)
context?.setLineWidth(2)
context?.strokePath()
}
}
These are the icons from google material design you can download them from here https://material.io/tools/icons/?icon=bluetooth&style=baseline
No emoji, just checked on my iPad.
Just use a PDF or EPS of the bluetooth logo if you wan't it scalable, or just use a png otherwise.

Resources