I've been trying to create an animation that increases the height of a view without changing the origin (the top left and right edges stay in the same position)
import UIKit
class SampRect: UIView {
var res : CGRect?
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor(red: 0.91796875, green: 0.91796875, blue: 0.91796875, alpha: 1)
self.layer.cornerRadius = 5
let recognizer = UITapGestureRecognizer(target: self, action:#selector(SampRect.handleTap(_:)))
self.addGestureRecognizer(recognizer)
}
func handleTap(recognizer : UITapGestureRecognizer) {
let increaseSize = CABasicAnimation(keyPath: "bounds")
increaseSize.delegate = self
increaseSize.duration = 0.4
increaseSize.fromValue = NSValue(CGRect: frame)
res = CGRect(x: self.frame.minX, y: self.frame.minY, width: frame.width, height: self.frame.height + 10)
increaseSize.toValue = NSValue(CGRect: res!)
increaseSize.fillMode = kCAFillModeForwards
increaseSize.removedOnCompletion = false
layer.addAnimation(increaseSize, forKey: "bounds")
}
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
self.frame = res!
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
but the animation increase the size from the middle (push the top edge up and the bottom edge down)
what am I missing?
You can Try this.
let newheight:CGFloat = 100.0
UIView.animateWithDuration(0.5) {
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, newheight)
}
Related
Using superview in the class paints the entire screen but I only want to paint the smaller subview (whose dimensions are defined by v.frame).
How do I have the class operate only on the "current view"?
#IBOutlet var storyboardView: UIView!
func selectView() {
var v = UIView()
switch viewchoice {
case false:
v = View1class()
case true:
v = View2class()
}
v.frame = CGRect(x: 20, y: 50, width: storyboardView.frame.width - 40, height: storyboardView.frame.height - 100)
storyboardView.addSubview(v)
}
class View1class: UIView {
override func draw(_ rect: CGRect) {
super.draw(rect)
superview!.backgroundColor = .red
}
}
class View2class: UIView {
override func draw(_ rect: CGRect) {
super.draw(rect)
superview!.backgroundColor = .blue
}
}
I tried using self instead of superview but that doesn't work.
EDIT: If I wanted to paint the entire screen, could I skip creating the subview and assign the class to storyboardView?
If you override draw(_ rect: CGRect) in a subclass, it is up to you to draw the view content. Setting .backgroundColor there will have no effect.
This is a common structure for a UIView subclass:
class View1Class: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
self.backgroundColor = .red
// do any other view setup here, such as
// adding subviews, adding sublayers, etc
}
}
Edit
Here is an example of two custom views - the first one uses shape layers, the second one overrides draw():
MyFirstView class
class MyFirstView: UIView {
let boxLayer = CAShapeLayer()
let circleLayer = CAShapeLayer()
let lineLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
self.backgroundColor = .systemYellow
layer.addSublayer(boxLayer)
layer.addSublayer(circleLayer)
layer.addSublayer(lineLayer)
boxLayer.fillColor = UIColor.red.cgColor
circleLayer.fillColor = UIColor.blue.cgColor
lineLayer.strokeColor = UIColor.green.cgColor
}
override func layoutSubviews() {
super.layoutSubviews()
// centered rectangle, half height and width
let halfWidth: CGFloat = bounds.width * 0.5
let halfHeight: CGFloat = bounds.height * 0.5
let boxRect: CGRect = CGRect(x: halfWidth * 0.5, y: halfHeight * 0.5, width: halfWidth, height: halfHeight)
let boxPath: UIBezierPath = UIBezierPath(rect: boxRect)
boxLayer.path = boxPath.cgPath
// circle centered in box, 3/4ths of the shorter of width or height
let wh: CGFloat = min(boxRect.width, boxRect.height) * 0.75
let circleRect: CGRect = CGRect(x: boxRect.midX - wh * 0.5, y: boxRect.midY - wh * 0.5, width: wh, height: wh)
let circlePath: UIBezierPath = UIBezierPath(ovalIn: circleRect)
circleLayer.path = circlePath.cgPath
// diagonal line from top-left to bottom-right
let linePath: UIBezierPath = UIBezierPath()
linePath.move(to: .zero)
linePath.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
lineLayer.path = linePath.cgPath
}
}
MySecondView class
class MySecondView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
self.backgroundColor = .systemTeal
}
override func draw(_ rect: CGRect) {
// centered rectangle, half height and width
let halfWidth: CGFloat = rect.width * 0.5
let halfHeight: CGFloat = rect.height * 0.5
let boxRect: CGRect = CGRect(x: halfWidth * 0.5, y: halfHeight * 0.5, width: halfWidth, height: halfHeight)
let boxPath: UIBezierPath = UIBezierPath(rect: boxRect)
UIColor.red.setFill()
boxPath.fill()
// circle centered in box, 3/4ths of the shorter of width or height
let wh: CGFloat = min(boxRect.width, boxRect.height) * 0.75
let circleRect: CGRect = CGRect(x: boxRect.midX - wh * 0.5, y: boxRect.midY - wh * 0.5, width: wh, height: wh)
let circlePath: UIBezierPath = UIBezierPath(ovalIn: circleRect)
UIColor.blue.setFill()
circlePath.fill()
// diagonal line from top-left to bottom-right
let linePath: UIBezierPath = UIBezierPath()
linePath.move(to: .zero)
linePath.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
UIColor.green.setStroke()
linePath.stroke()
}
override func layoutSubviews() {
setNeedsDisplay()
}
}
Example view controller
class CustomViewsViewController: UIViewController {
let firstView = MyFirstView()
let secondView = MySecondView()
override func viewDidLoad() {
super.viewDidLoad()
[firstView, secondView].forEach {
$0.translatesAutoresizingMaskIntoConstraints = false
view.addSubview($0)
}
// respect safe area
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
// firstView Top / Leading / Trailing to view (safe-area)
firstView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
firstView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
firstView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),
// firstView Height
firstView.heightAnchor.constraint(equalToConstant: 150.0),
// secondView Leading / Trailing to view (safe-area)
secondView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 60.0),
secondView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -60.0),
// secondView Top 20-pts from firstView Bottom
secondView.topAnchor.constraint(equalTo: firstView.bottomAnchor, constant: 20.0),
// secondView Bottom to View Bottom (safe-area)
secondView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
])
}
}
Output - first view has .systemYellow background, second view has .systemTeal background:
and rotated:
Use self instead of superView.
self.backgroundColor = .red
I am using the following code to scale a CAShapelayer instance (i.e., self.view.layer.sublayers![0]):
class ViewController: UIViewController {
override func viewDidLoad()
{
super.viewDidLoad()
self.view = Map(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: self.view.bounds.height))
let pinchGR = UIPinchGestureRecognizer(target: self, action: #selector(self.didPinch(_:)))
self.view.addGestureRecognizer(pinchGR)
}
#objc func didPinch(_ pinchGR: UIPinchGestureRecognizer)
{
let transformation = CGAffineTransform(a: pinchGR.scale, b: 0, c: 0, d: pinchGR.scale, tx: 0, ty: 0)
if pinchGR.state == .began || pinchGR.state == .changed
{
self.view.layer.sublayers![0].setAffineTransform(transformation)
}
}}
class Map: UIView{
override init(frame: CGRect)
{
super.init(frame: frame)
self.backgroundColor = UIColor.blue
drawTestShape()
}
required init?(coder aDecoder: NSCoder)
{
super.init(coder: aDecoder)
}
func drawTestShape()
{
let shapeLayer = CAShapeLayer()
shapeLayer.frame = self.frame
let path = UIBezierPath()
shapeLayer.lineWidth = 5.0
shapeLayer.fillColor = nil
shapeLayer.strokeColor = UIColor.white.cgColor
shapeLayer.backgroundColor = UIColor.red.cgColor
path.move(to: CGPoint(x:200,y:200))
path.addLine(to: CGPoint(x:300,y:300))
path.addLine(to: CGPoint(x:100,y:300))
path.close()
shapeLayer.path = path.cgPath
self.layer.addSublayer(shapeLayer)
}}
The scaling is performed correctly in the first pinch gesture. However, when a second pinch gesture is applied, the CAShapelayer instance starts again from its initial size, and not from the size it had after the first gesture.
I can't really get behind the idea of scaling a layer, but if you must do it, try something more like this; this is the standard pattern for implementing a pinch gesture recognizer, so it's really best to stick with it:
#IBAction func didPinch(_ pinchGR: UIPinchGestureRecognizer) {
self.view.layer.sublayers![0].setAffineTransform(
self.view.layer.sublayers![0].affineTransform().scaledBy(
x:pinchGR.scale, y:pinchGR.scale))
pinchGR.scale = 1.0;
}
I want to animate my custom view's background color.
My drawing code is very simple. The draw(in:) method is overridden like this:
#IBDesignable
class SquareView: UIView {
override func draw(_ rect: CGRect) {
super.draw(rect)
let strokeWidth = self.width / 8
let path = UIBezierPath()
path.move(to: CGPoint(x: self.width - strokeWidth / 2, y: 0))
path.addLine(to: CGPoint(x: self.width - strokeWidth / 2, y: self.height - strokeWidth / 2))
path.addLine(to: CGPoint(x: 0, y: self.height - strokeWidth / 2))
self.backgroundColor?.darker().setStroke()
path.lineWidth = strokeWidth
path.stroke()
}
}
The darker method just returns a darker version of the color it is called on.
When I set the background to blue, it draws something like this:
I want to animate its background color so that it gradually changes to a red color. This would be the end result:
I first tried:
UIView.animate(withDuration: 1) {
self.square.backgroundColor = .red
}
It just changes the color to red in an instant, without animation.
Then I researched and saw that I need to use CALayers. Therefore, I tried drawing the thing in layers:
#IBDesignable
class SquareViewLayers: UIView {
dynamic var squareColor: UIColor = .blue {
didSet {
setNeedsDisplay()
}
}
func setupView() {
layer.backgroundColor = squareColor.cgColor
let sublayer = CAShapeLayer()
let path = UIBezierPath()
let strokeWidth = self.width / 8
path.move(to: CGPoint(x: self.width - strokeWidth / 2, y: 0))
path.addLine(to: CGPoint(x: self.width - strokeWidth / 2, y: self.height - strokeWidth / 2))
path.addLine(to: CGPoint(x: 0, y: self.height - strokeWidth / 2))
self.tintColor.darker().setStroke()
path.lineWidth = strokeWidth
sublayer.path = path.cgPath
sublayer.strokeColor = squareColor.darker().cgColor
sublayer.lineWidth = strokeWidth
sublayer.backgroundColor = UIColor.clear.cgColor
layer.addSublayer(sublayer)
}
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
}
But the result is horrible
I used this code to try to animate this:
let anim = CABasicAnimation(keyPath: "squareColor")
anim.fromValue = UIColor.blue
anim.toValue = UIColor.red
anim.duration = 1
square.layer.add(anim, forKey: nil)
Nothing happens though.
I am very confused. What is the correct way to do this?
EDIT:
The darker method is from a cocoa pod called SwiftyColor. This is how it is implemented:
// in an extension of UIColor
public func darker(amount: CGFloat = 0.25) -> UIColor {
return hueColor(withBrightnessAmount: 1 - amount)
}
private func hueColor(withBrightnessAmount amount: CGFloat) -> UIColor {
var hue: CGFloat = 0
var saturation: CGFloat = 0
var brightness: CGFloat = 0
var alpha: CGFloat = 0
if getHue(&hue, saturation: &saturation, brightness: &brightness, alpha: &alpha) {
return UIColor(hue: hue, saturation: saturation,
brightness: brightness * amount,
alpha: alpha)
}
return self
}
You're on the right track with CABasicAnimation.
The keyPath: in let anim = CABasicAnimation(keyPath: "squareColor") should be backgroundColor.
anim.fromValue and anim.toValue require CGColor values (because you're operating on the CALayer, which uses CGColor). You can use UIColor.blue.cgcolor here.
Pretty sure this animation won't persist the color change for you though, so you might need to change that property manually.
Could you stroke the L-shape with a semi-transparent black instead?
Then you don't have to mess around with redrawing and color calculations, and you can use the basic UIView.animate()
Below the "LShadow" is added onto the SquareView, so you can set the SquareView background color as per usual with UIView.animate()
ViewController.swift
import UIKit
class ViewController: UIViewController {
var squareView: SquareView!
override func viewDidLoad() {
super.viewDidLoad()
squareView = SquareView.init(frame: CGRect(x:100, y:100, width:200, height:200))
self.view.addSubview(squareView)
squareView.backgroundColor = UIColor.blue
UIView.animate(withDuration: 2.0, delay: 1.0, animations: {
self.squareView.backgroundColor = UIColor.red
}, completion:nil)
}
}
SquareView.swift
import UIKit
class SquareView: UIView {
func setupView() {
let shadow = LShadow.init(frame: self.bounds)
self.addSubview(shadow)
}
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
}
class LShadow: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.backgroundColor = UIColor.clear
}
override func draw(_ rect: CGRect) {
let strokeWidth = self.frame.size.width / 8
let path = UIBezierPath()
path.move(to: CGPoint(x: self.frame.size.width - strokeWidth / 2, y: 0))
path.addLine(to: CGPoint(x: self.frame.size.width - strokeWidth / 2, y: self.frame.size.height - strokeWidth / 2))
path.addLine(to: CGPoint(x: 0, y: self.frame.size.height - strokeWidth / 2))
UIColor.init(white: 0, alpha: 0.5).setStroke()
path.lineWidth = strokeWidth
path.stroke()
}
}
Using CAKeyframeAnimation you need to animate backgroundColor property:
class SquareView: UIView
{
let sublayer = CAShapeLayer()
required init?(coder aDecoder: NSCoder)
{
super.init(coder: aDecoder)
let frame = self.frame
let strokeWidth = self.frame.width / 8
sublayer.frame = self.bounds
let path = UIBezierPath()
path.move(to: CGPoint(x: frame.width - strokeWidth / 2 , y: 0))
path.addLine(to: CGPoint(x: frame.width - strokeWidth / 2, y: frame.height - strokeWidth / 2))
path.addLine(to: CGPoint(x: 0, y: frame.height - strokeWidth / 2))
path.addLine(to: CGPoint(x: 0 , y: 0))
path.lineWidth = strokeWidth
sublayer.path = path.cgPath
sublayer.fillColor = UIColor.blue.cgColor
sublayer.lineWidth = strokeWidth
sublayer.backgroundColor = UIColor.blue.cgColor
layer.addSublayer(sublayer)
}
//Action
func animateIt()
{
let animateToColor = UIColor(cgColor: sublayer.backgroundColor!).darker().cgColor
animateColorChange(mLayer: self.sublayer, colors: [sublayer.backgroundColor!, animateToColor], duration: 1)
}
func animateColorChange(mLayer:CALayer ,colors:[CGColor], duration:CFTimeInterval)
{
let animation = CAKeyframeAnimation(keyPath: "backgroundColor")
CATransaction.begin()
animation.keyTimes = [0.2, 0.5, 0.7, 1]
animation.values = colors
animation.calculationMode = kCAAnimationPaced
animation.fillMode = kCAFillModeForwards
animation.isRemovedOnCompletion = false
animation.repeatCount = 0
animation.duration = duration
mLayer.add(animation, forKey: nil)
CATransaction.commit()
}
}
Note: I have edited the answer so that the shape will always fit the parent view added from storyboard
I had an implementation of changing the background color of view with animation and did some tweak in the source code to add inverted L shape using CAShapeLayer. I achieved the required animation. here is the sample of the view.
class SquareView: UIView, CAAnimationDelegate {
fileprivate func setup() {
self.layer.addSublayer(self.sublayer)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.setup
}
let sublayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
self.setup()
}
override func layoutSubviews() {
super.layoutSubviews()
let strokeWidth = self.bounds.width / 8
var frame = self.bounds
frame.size.width -= strokeWidth
frame.size.height -= strokeWidth
self.sublayer.path = UIBezierPath(rect: frame).cgPath
}
var color : UIColor = UIColor.clear {
willSet {
self.sublayer.fillColor = newValue.cgColor
self.backgroundColor = newValue.darker()
}
}
func animation(color: UIColor, duration: CFTimeInterval = 1.0) {
let animation = CABasicAnimation()
animation.keyPath = "backgroundColor"
animation.fillMode = kCAFillModeForwards
animation.duration = duration
animation.repeatCount = 1
animation.autoreverses = false
animation.fromValue = self.backgroundColor?.cgColor
animation.toValue = color.darker().cgColor
animation.delegate = self;
let shapeAnimation = CABasicAnimation()
shapeAnimation.keyPath = "fillColor"
shapeAnimation.fillMode = kCAFillModeForwards
shapeAnimation.duration = duration
shapeAnimation.repeatCount = 1
shapeAnimation.autoreverses = false
shapeAnimation.fromValue = self.sublayer.fillColor
shapeAnimation.toValue = color.cgColor
shapeAnimation.delegate = self;
self.layer.add(animation, forKey: "kAnimation")
self.sublayer.add(shapeAnimation, forKey: "kAnimation")
self.color = color
}
public func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
self.layer.removeAnimation(forKey: "kAnimation")
self.sublayer.removeAnimation(forKey: "kAnimation")
}
}
You can use the method animation(color: duration:) to change the color with animation on required animation duration.
Example
let view = SquareView(frame: CGRect(x: 10, y: 100, width: 200, height: 300))
view.color = UIColor.blue
view.animation(color: UIColor.red)
Here is the result
We have in the code below, two different CAShapeLayer, foreground and background. Background is a rectangle path drawn to the extent where inverted L actually starts. And L is the path created with simple UIBezierPath geometry. I animate the change to fillColor for each layer after color is set.
class SquareViewLayers: UIView, CAAnimationDelegate {
var color: UIColor = UIColor.blue {
didSet {
animate(layer: backgroundLayer,
from: oldValue,
to: color)
animate(layer: foregroundLayer,
from: oldValue.darker(),
to: color.darker())
}
}
let backgroundLayer = CAShapeLayer()
let foregroundLayer = CAShapeLayer()
func setupView() {
foregroundLayer.frame = frame
layer.addSublayer(foregroundLayer)
backgroundLayer.frame = frame
layer.addSublayer(backgroundLayer)
let strokeWidth = width / 8
let backgroundPathRect = CGRect(origin: .zero, size: CGSize(width: width - strokeWidth,
height: height - strokeWidth))
let backgroundPath = UIBezierPath(rect: backgroundPathRect)
backgroundLayer.fillColor = color.cgColor
backgroundLayer.path = backgroundPath.cgPath
let foregroundPath = UIBezierPath()
foregroundPath.move(to: CGPoint(x: backgroundPathRect.width,
y: 0))
foregroundPath.addLine(to: CGPoint(x: width,
y: 0))
foregroundPath.addLine(to: CGPoint(x: width, y: height))
foregroundPath.addLine(to: CGPoint(x: 0,
y: height))
foregroundPath.addLine(to: CGPoint(x: 0,
y: backgroundPathRect.height))
foregroundPath.addLine(to: CGPoint(x: backgroundPathRect.width,
y: backgroundPathRect.height))
foregroundPath.addLine(to: CGPoint(x: backgroundPathRect.width,
y: 0))
foregroundPath.close()
foregroundLayer.path = foregroundPath.cgPath
foregroundLayer.fillColor = color.darker().cgColor
}
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
func animate(layer: CAShapeLayer,
from: UIColor,
to: UIColor) {
let fillColorAnimation = CABasicAnimation(keyPath: "fillColor")
fillColorAnimation.fromValue = from.cgColor
layer.fillColor = to.cgColor
fillColorAnimation.duration = 1.0
layer.add(fillColorAnimation,
forKey: nil)
}
}
And here is the result,
Objective-C
view.backgroundColor = [UIColor whiteColor].CGColor;
[UIView animateWithDuration:2.0 animations:^{
view.layer.backgroundColor = [UIColor greenColor].CGColor;
} completion:NULL];
Swift
view.backgroundColor = UIColor.white.cgColor
UIView.animate(withDuration: 2.0) {
view.backgroundColor = UIColor.green.cgColor
}
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)
}
I am creating bottom bordered textfield. I am subclass of UITextField. Here it is:
#IBDesignable class LinedTextField: UITextField {
#IBInspectable var borderColor: UIColor = UIColor.whiteColor() {
didSet {
let border = CALayer()
border.borderColor = self.borderColor.CGColor
border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = borderWidth
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
}
#IBInspectable var borderWidth: CGFloat = 0.5 {
didSet {
let border = CALayer()
border.borderColor = self.borderColor.CGColor
border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = borderWidth
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
}
override init(frame : CGRect) {
super.init(frame : frame)
setup()
}
convenience init() {
self.init(frame:CGRectZero)
setup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
override func awakeFromNib() {
super.awakeFromNib()
setup()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
setup()
}
func setup() {
let border = CALayer()
border.borderColor = self.borderColor.CGColor
border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = borderWidth
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
override func layoutSubviews() {
super.layoutSubviews()
}
Then in interface builder I set that 2 properties(border colour and border width) and everything looks good:
But when I run application on my real 5.5" device, it looks this way:
Border is not long as the text field. What's wrong here?
I think it's because the border frame need to be computed on layoutSubviews. Here is an example on how to do so (plus a simplification of your code):
Supported in Swift 3
#IBDesignable class UnderlinedTextField: UITextField {
let border = CALayer()
#IBInspectable var borderColor: UIColor = UIColor.white {
didSet {
setup()
}
}
#IBInspectable var borderWidth: CGFloat = 0.5 {
didSet {
setup()
}
}
override init(frame : CGRect) {
super.init(frame : frame)
setup()
}
convenience init() {
self.init(frame:CGRect.zero)
setup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
override func awakeFromNib() {
super.awakeFromNib()
setup()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
setup()
}
func setup() {
border.borderColor = self.borderColor.cgColor
border.borderWidth = borderWidth
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
override func layoutSubviews() {
super.layoutSubviews()
border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width: self.frame.size.width, height: self.frame.size.height)
}
override func textRect(forBounds bounds: CGRect) -> CGRect {
return editingRect(forBounds: bounds)
}
override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
return editingRect(forBounds: bounds)
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return bounds.insetBy(dx: 10, dy: 0)
}
}
EDIT:
I Added code for the text area. In this example, there is a 20px horizontal inset. There in more infos on editingRectForBounds (and its friends) in the Apple's doc: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextField_Class/#//apple_ref/occ/instm/UITextField/textRectForBounds:
import UIKit
#IBDesignable
class MyTextField: UITextField {
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
func setupView(){
self.borderStyle = UITextBorderStyle.None
let border = CALayer()
let borderWidth: CGFloat = 2
border.borderColor = UIColor(red: 5/255, green: 84/255, blue: 115/255, alpha: 1.0).CGColor
border.frame = CGRectMake(0, self.frame.size.height - borderWidth, self.frame.size.width, self.frame.size.height)
border.borderWidth = borderWidth
self.layer.addSublayer(border)
}
}
let border = CALayer()
border.borderColor = UIColor.blackColor().CGColor
border.frame = CGRectMake(-30, textField.frame.size.height - 1.0, textField.frame.size.width*1.5 , 1.0)
border.borderWidth = 1.0
textField.layer.addSublayer(border)
textField.layer.masksToBounds = true