I am new to swift and have created a viewcontroller and a mainView.swift which holds all the styling and ui elements however the button in the mainView.swift doesn't call the function i have created i should add that all the elements load in fine its just after they load and i tap the login button nothing happens , i did some research into the hierarchy of views in swift however noting helped solve the issue , any help would be appreciated
MainView.swift
import Foundation
import UIKit
import PureLayout
class login: UIView {
var shouldSetupConstraints = true
var logoImageContainer = UIView()
var logoImage = UIImageView(image: UIImage(named: "logo"))
var loginButton = UIButton()
var registerButton = UIButton()
let screenSize = UIScreen.main.bounds
let gradient = CAGradientLayer()
override init(frame: CGRect) {
super.init(frame: frame)
logoImage.center = CGPoint(x: screenSize.width/2, y:0)
logoImage.alpha = 0.0
self.addSubview(logoImage)
loginButton.frame = CGRect(x: screenSize.width/14, y: screenSize.height/1.35, width: 320, height: 50)
gradient.frame = loginButton.bounds
gradient.colors = [UIColor(red: (0/255.0), green: (114/255.0), blue: (255/255.0), alpha: 1).cgColor , UIColor(red: (0/255.0), green: (198/255.0), blue: (255/255.0), alpha: 1).cgColor]
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 0)
gradient.cornerRadius = 4
loginButton.layer.addSublayer(gradient)
loginButton.setTitle("SIGN IN", for: .normal)
loginButton.titleLabel?.font = UIFont(name: "HelveticaNeue-medium", size: 30)
loginButton.titleLabel?.textAlignment = .center
loginButton.alpha = 0.0
loginButton.addTarget(self, action: #selector(loginPressed), for: .touchUpInside)
self.addSubview(loginButton)
registerButton.frame = CGRect(x: screenSize.width/14, y: screenSize.height/1.175, width: 320, height: 50)
registerButton.setTitle("Create Account", for: .normal)
registerButton.setTitleColor(UIColor.gray, for: UIControlState.normal)
registerButton.titleLabel?.font = UIFont(name: "HelveticaNeue-medium", size: 24)
registerButton.titleLabel?.textAlignment = .center
registerButton.alpha = 0.0
self.addSubview(registerButton)
UIView.animate(withDuration: 1.0, animations: { () -> Void in
self.loginButton.alpha = 1.0
self.registerButton.alpha = 1.0
self.logoImage.alpha = 1.0
self.logoImage.center = CGPoint(x: self.screenSize.width/2, y:self.screenSize.height/2.5)
})
}
#objc func loginPressed() {
print("press")
/* UIView.animate(withDuration: 1.0, animations: { () -> Void in
self.loginButton.center = CGPoint(x: self.screenSize.width/14, y: self.screenSize.height/1.175)
self.registerButton.alpha = 0.0
self.registerButton.center = CGPoint(x: self.screenSize.width/2, y:self.screenSize.height/1)
self.logoImage.center = CGPoint(x: self.screenSize.width/2, y:self.screenSize.height/1.5)
}) */
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func updateConstraints() {
if(shouldSetupConstraints) {
// AutoLayout constraints
shouldSetupConstraints = false
}
super.updateConstraints()
}
}
MainViewController.swift
class MainViewController: UIViewController {
var loginView: login!
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor(red: (255/255.0), green: (255/255.0), blue: (255/255.0), alpha: 1)
loginView = login()
loginView.isUserInteractionEnabled = true
self.view.addSubview(loginView)
}
}
the problem in your code is your loginPressed method is missing a parameter. When a button is clicked it will call your method and as parameter it will send a button object which is clicked to your method.
But the signature of method being called and your loginPressed method is not matching. It should be like this
#objc func loginPressed(sender: UIButton!) {
print("login Clicked")
}
Since all actions work on the basis of the superView's frame making it like this
loginView = login()
and
loginButton.frame = CGRect(x: screenSize.width/14, y: screenSize.height/1.35, width: 320, height: 50)
where elemnts have there frame values relative to non-zero value because of
let screenSize = UIScreen.main.bounds
screenSize.width/height
despite the superView has a zero frame , will cause all actions to drop
Related
I am trying to use the same button in each createCircle() function, but when I press a button and it runs the handleTap() function, it only applies to the most recently added circle. I would like to use the same button but when I click on an individual button it should run the animation on the one I pressed.
import UIKit
class SecondViewController: UIViewController {
let shapeLayer = CAShapeLayer()
let percentageLabel: UILabel = {
let label = UILabel()
label.text = ""
label.textAlignment = .center
label.font = UIFont.boldSystemFont(ofSize: 28)
label.textColor = UIColor(red: 0.59, green: 0.42, blue: 0.23, alpha: 1.00)
return label
}()
override func viewDidLoad() {
super.viewDidLoad()
_ = createCircle(positionX: 100, positionY: 200)
_ = createCircle(positionX: 100, positionY: 375)
_ = createCircle(positionX: 100, positionY: 550)
_ = createCircle(positionX: 100, positionY: 725)
_ = createCircle(positionX: 300, positionY: 200)
_ = createCircle(positionX: 300, positionY: 375)
_ = createCircle(positionX: 300, positionY: 550)
_ = createCircle(positionX: 300, positionY: 725)
}
//MARK: - Create Circle
func createCircle(positionX: Int, positionY: Int) -> (CGPoint) {
let trackLayer = CAShapeLayer()
let button = UIButton(type: .custom)
button.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
button.layer.cornerRadius = 0.5 * button.bounds.size.width
button.clipsToBounds = true
button.center = view.center
button.addTarget(self, action: #selector(handleTap), for: .touchUpInside)
view.addSubview(button)
let circularPath = UIBezierPath(arcCenter: .zero, radius: 50, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
trackLayer.path = circularPath.cgPath
trackLayer.strokeColor = UIColor(red: 0.82, green: 0.69, blue: 0.52, alpha: 1.00).cgColor
trackLayer.fillColor = UIColor.clear.cgColor
trackLayer.lineWidth = 10
trackLayer.position = CGPoint(x: positionX, y: positionY)
view.layer.addSublayer(trackLayer)
shapeLayer.path = circularPath.cgPath
shapeLayer.strokeColor = UIColor(red: 0.59, green: 0.42, blue: 0.23, alpha: 1.00).cgColor
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineWidth = 10
shapeLayer.lineCap = CAShapeLayerLineCap.round
shapeLayer.position = CGPoint(x: positionX, y: positionY)
shapeLayer.transform = CATransform3DMakeRotation(-CGFloat.pi / 2, 0, 0, 1)
view.addSubview(percentageLabel)
percentageLabel.frame = CGRect(x: 0, y: 0, width: 150, height: 150)
percentageLabel.center = CGPoint(x: positionX, y: positionY)
return CGPoint(x: positionX, y: positionY)
}
//MARK: - Tap function
var done = 0
var toDo = 0
#objc func handleTap(sender: UIButton) {
toDo = 5
if done < toDo {
done += 1
} else {
done -= toDo
}
let percentage = CGFloat(done) / CGFloat(toDo)
percentageLabel.text = "\(Int(percentage * 100))%"
DispatchQueue.main.async {
self.shapeLayer.strokeEnd = percentage
}
view.layer.addSublayer(shapeLayer)
}
}
This is a picture of what happens when I run my code. When I click on any of the pictured buttons, instead of running the progress bar animation on whichever button I pressed, it only runs it on the button that was added last to the view controller.
Instead of using createCircle() in your view controller, make a new file for it and initialize the function like this inside.
import UIKit
class Button: UIButton {
override init(frame: CGRect) {
super.init(frame: frame)
createCircle()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
let percentageLabel: UILabel = {
let label = UILabel()
label.text = ""
label.textAlignment = .center
label.font = UIFont.boldSystemFont(ofSize: 28)
label.textColor = UIColor(red: 0.59, green: 0.42, blue: 0.23, alpha: 1.00)
return label
}()
let shapeLayer = CAShapeLayer()
func createCircle() {
let trackLayer = CAShapeLayer()
let button = UIButton(type: .custom)
button.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
button.layer.cornerRadius = 0.5 * button.bounds.size.width
button.clipsToBounds = true
button.center = center
button.addTarget(self, action: #selector(handleTap), for: .touchUpInside)
addSubview(button)
let circularPath = UIBezierPath(arcCenter: .zero, radius: 50, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
trackLayer.path = circularPath.cgPath
trackLayer.strokeColor = UIColor(red: 0.82, green: 0.69, blue: 0.52, alpha: 1.00).cgColor
trackLayer.fillColor = UIColor.clear.cgColor
trackLayer.lineWidth = 10
trackLayer.position = center
layer.addSublayer(trackLayer)
shapeLayer.path = circularPath.cgPath
shapeLayer.strokeColor = UIColor(red: 0.59, green: 0.42, blue: 0.23, alpha: 1.00).cgColor
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineWidth = 10
shapeLayer.lineCap = CAShapeLayerLineCap.round
shapeLayer.position = center
shapeLayer.transform = CATransform3DMakeRotation(-CGFloat.pi / 2, 0, 0, 1)
addSubview(percentageLabel)
percentageLabel.frame = CGRect(x: 0, y: 0, width: 150, height: 150)
// percentageLabel.center = CGPoint(x: positionX, y: positionY)
// return CGPoint(x: positionX, y: positionY)
}
var done = 0
var toDo = 0
#objc func handleTap(sender: UIButton) {
toDo = 5
if done < toDo {
done += 1
} else {
done -= toDo
}
let percentage = CGFloat(done) / CGFloat(toDo)
percentageLabel.text = "\(Int(percentage * 100))%"
DispatchQueue.main.async {
self.shapeLayer.strokeEnd = percentage
}
layer.addSublayer(shapeLayer)
}
}
You can remove the code from your secondViewController that has to do with your button and call the circle function inside of your viewDidLoad(). The problem was that your animation was affecting your view (not an individual circle), by creating a class for your circle button, you can call it in your secondViewController and it will affect only the circle in which the button was pressed.
I am trying to make a UIButton with rounded corners that has 2 colored shadows. Why is the red (and at this point also the blue "shadow" layer covering the button? How to get the shadows below the button canvas). I thought it was helping to insert sublayers instead of just adding them.
I have made a playground illustrating the issue
import UIKit
import PlaygroundSupport
This is the button I'm trying to implement
class PrimaryButton: UIButton {
required init(text: String = "Test 1", hasShadow: Bool = true) {
super.init(frame: .zero)
setTitle(text, for: .normal)
backgroundColor = UIColor.blue
layer.cornerRadius = 48 / 2
layer.masksToBounds = false
if hasShadow {
insertShadow()
}
}
fileprivate func insertShadow() {
let layer2 = CALayer(layer: layer), layer3 = CALayer(layer: layer)
layer2.applySketchShadow(color: UIColor.red, alpha: 0.5, x: 0, y: 15, blur: 35, spread: -10)
layer3.applySketchShadow(color: UIColor.blue, alpha: 0.5, x: 0, y: 10, blur: 21, spread: -9)
layer.insertSublayer(layer2, at: 0)
layer.insertSublayer(layer3, at: 0)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
super.layoutSubviews()
layer.sublayers?.forEach { (sublayer) in
sublayer.shadowPath = UIBezierPath(rect: bounds).cgPath
}
}
}
This is an extension that helps adding the shadow from Sketch specification:
extension CALayer {
func applySketchShadow(
color: UIColor = .black,
alpha: Float = 0.5,
x: CGFloat = 0,
y: CGFloat = 2,
blur: CGFloat = 4,
spread: CGFloat = 0)
{
shadowColor = color.cgColor
shadowOpacity = alpha
shadowOffset = CGSize(width: x, height: y)
shadowRadius = blur / 2.0
if spread == 0 {
shadowPath = nil
} else {
let dx = -spread
let rect = bounds.insetBy(dx: dx, dy: dx)
shadowPath = UIBezierPath(rect: rect).cgPath
}
masksToBounds = false
}
}
class MyViewController : UIViewController {
override func loadView() {
let view = UIView()
view.backgroundColor = .white
let button = PrimaryButton()
button.frame = CGRect(x: 150, y: 200, width: 200, height: 48)
view.addSubview(button)
self.view = view
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
It seems legit to me. layer1 & layer2 are sublayers of the button layer.
You could add a third layer that will serve as a background. Here is an example based on your code:
class PrimaryButton: UIButton {
let layer1 = CALayer(), layer2 = CALayer(), layer3 = CALayer()
override func layoutSubviews() {
super.layoutSubviews()
layer1.backgroundColor = UIColor.blue.cgColor
layer1.cornerRadius = 48 / 2
[layer1, layer2, layer3].forEach {
$0.masksToBounds = false
$0.frame = layer.bounds
layer.insertSublayer($0, at: 0)
}
layer2.applySketchShadow(color: UIColor.red, alpha: 0.5, x: 0, y: 15, blur: 35, spread: -10)
layer3.applySketchShadow(color: UIColor.blue, alpha: 0.5, x: 0, y: 10, blur: 21, spread: -9)
}
}
Note that I put most of the code inside layoutSubviews because most of your methods use the actual bounds of the button.
Change your insertions to:
layer.insertSublayer(layer2, at: 1)
layer.insertSublayer(layer3, at: 2)
That should do it.
Another way is to add double buttons without change your class.
let button = PrimaryButton()
button.frame = CGRect(x: 150, y: 200, width: 200, height: 48)
button.backgroundColor = UIColor.clear
view.addSubview(button)
self.view = view
let button1 = PrimaryButton()
button1.frame = CGRect(x: 0, y: 0, width: 200, height: 48)
button.addSubview(button1)
button1.layer.sublayers?.forEach{$0.removeFromSuperlayer()}
I'm trying to achieve UITextField editing or not editing style like this:
But the trickiest part for me is How to change that left image tint color. I have achieved this so far:
My code:
UITextField
lazy var email: UITextField = {
let name = UITextField()
name.layer.cornerRadius = 17.5
name.layer.borderColor = UIColor(red: 0.55, green: 0.61, blue: 0.69, alpha: 0.5).cgColor
name.layer.borderWidth = 1.5
name.placeholder = "Email"
name.font = UIFont.systemFont(ofSize: 15)
name.textColor = UIColor(red: 0.55, green: 0.61, blue: 0.69, alpha: 1)
name.backgroundColor = .clear
name.leftViewMode = UITextFieldViewMode.always
name.delegate = self
name.translatesAutoresizingMaskIntoConstraints = false
return name
}()
leftImage func:
func addLeftImageTo(txtField: UITextField, andImage img: UIImage) {
let leftView = UIView(frame: CGRect(x: 0, y: 0, width: 42.75, height: 40))
let centerX: CGFloat = (leftView.frame.midX) - (img.size.width / 2)
let centerY: CGFloat = (leftView.frame.midY) - (img.size.height / 2)
let leftImageView = UIImageView(frame: CGRect(x: centerX + 2 , y: centerY - 1, width: img.size.width, height: img.size.height))
leftImageView.contentMode = .scaleAspectFit
leftImageView.image = img
leftView.addSubview(leftImageView)
txtField.leftView = leftView
txtField.leftViewMode = .always
}
Adding leftImages:
let emailLeftImg = UIImage(named: "ic_txt_field_email")
addLeftImageTo(txtField: email, andImage: emailLeftImg!)
let passwordLeftImg = UIImage(named: "ic_txt_field_password")
addLeftImageTo(txtField: password, andImage: passwordLeftImg!)
editingBegains and Ending:
func textFieldDidBeginEditing(_ textField: UITextField) {
self.setTextBorder(textField: textField, color: UIColor.white, borderColor: UIColor.white, isSelected: true)
}
func textFieldDidEndEditing(_ textField: UITextField) {
self.setTextBorder(textField: textField, color: UIColor.clear, borderColor: UIColor(red: 0.55, green: 0.61, blue: 0.69, alpha: 0.5), isSelected: false)
}
func setTextBorder(textField: UITextField, color: UIColor, borderColor: UIColor, isSelected: Bool) {
textField.backgroundColor = color
textField.layer.borderColor = borderColor.cgColor
textField.tintColor = UIColor(red: 1.0, green: 0.2, blue: 0.33, alpha: 1)
textField.layer.masksToBounds = false
if isSelected == true {
textField.layer.shadowRadius = 3.0
textField.layer.shadowColor = UIColor.black.cgColor
textField.layer.shadowOffset = CGSize(width: 0, height: 2)
textField.layer.shadowOpacity = 0.125
} else {
textField.layer.shadowRadius = 0
textField.layer.shadowColor = UIColor.clear.cgColor
textField.layer.shadowOffset = CGSize(width: 0, height: 0)
textField.layer.shadowOpacity = 0
}
}
I had tried adding this code to change Image color but it didn't work.
var picTintColor: Bool = false
In LeftImage func:
if picTintColor == true {
leftImageView.image = img.withRenderingMode(.alwaysTemplate)
leftImageView.tintColor = .blue
} else {
leftImageView.image = img
}
And in editingBegains and Ending func:
if isSelected == true {
picTintColor = true
} else {
picTintColor = false
}
I'm a complete noob in IOS programming so thanks for your patience and sorry for my bad english. Thanks!
According the code ,it actually can not pass isSelected signal to the leftImageView,maybe leftImageView get in laster is not the earlier ,or the signal not pass successly.
I suggest that a easy way to do, just in editingBegains and Ending: to do what you want change the imageview,like this:
func textFieldDidBeginEditing(_ textField: UITextField) {
let emailLeftImg = UIImage(named: "ic_txt_field_email")
addLeftImageTo(txtField: email, andImage: emailLeftImg!)
}
func addLeftImageTo(txtField: UITextField, andImage img: UIImage) {
let leftView = UIView(frame: CGRect(x: 0, y: 0, width: 42.75, height: 40))
let centerX: CGFloat = (leftView.frame.midX) - (img.size.width / 2)
let centerY: CGFloat = (leftView.frame.midY) - (img.size.height / 2)
let leftImageView = UIImageView(frame: CGRect(x: centerX + 2 , y: centerY - 1, width: img.size.width, height: img.size.height))
leftImageView.contentMode = .scaleAspectFit
if picTintColor == true {
leftImageView.image = img.withRenderingMode(.alwaysTemplate)
leftImageView.tintColor = .blue
} else {
leftImageView.image = img
}
leftView.addSubview(leftImageView)
txtField.leftView = leftView
txtField.leftViewMode = .always
}
and in end delgate method ,just do that ,you can try this way to test.Hope to help you.
Just trying to follow some youtube tutorials and learn about custom views. I am sure I am missing something very basic here. After reading here and the net for hours I am giving up.
I have a custom view that slides out. I am planning on filling it with different custom views as needed. The slideOutView displays fine. However, I am not able to see the other custom view called FlashCardView inside it. I am calling FlashCardView from SlideOutView.
Thanks for the help!
code for FlashCardView class:
import UIKit
protocol FlashCardViewDelegate: class {
}
class FlashCardView: UIView {
weak var delegate: FlashCardViewDelegate?
let questionLabel = UILabel()
let scrollView = UIScrollView()
let dummyView = UIView()
//MARK: Initialization
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.black
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
code for SlideOutView class:
import UIKit
class SlideOutView: UIView {
let slideOutView = UIView()
let menuBarLine = UIView()
let menuBarView = UIView()
let menuButton = UIButton()
let backButton = UIButton()
let flashCardView = FlashCardView()
let ratio = DeviceSpecificValues()
override init(frame: CGRect) {
super.init(frame: frame)
self.addView()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func addView() {
if let window = UIApplication.shared.keyWindow {
slideOutView.frame = CGRect(x: 0, y: window.bounds.height, width: window.bounds.width, height: window.bounds.height / 2)
print("slideoutview frame is: \(slideOutView.frame)")
slideOutView.backgroundColor = UIColor.white
window.addSubview(slideOutView)
menuBarView.frame = CGRect(x: 0, y: 0, width: slideOutView.bounds.width, height: window.bounds.height / ratio.menuBarRatio)
menuBarView.backgroundColor = GlobalValues.menuBarViewColor
slideOutView.addSubview(menuBarView)
menuBarLine.frame = CGRect(x: 0, y: 0, width: menuBarView.bounds.width, height: GlobalValues.menuBarLineWidth)
menuBarLine.backgroundColor = GlobalValues.menuTextColor
menuBarView.addSubview(menuBarLine)
backButton.frame = CGRect(x: 0, y: 0, width: menuBarView.bounds.width * 0.1, height: menuBarView.bounds.height * 0.9)
backButton.center.y = menuBarView.bounds.height / 2 + GlobalValues.menuBarLineWidth
backButton.setTitle("<Back", for: .normal)
backButton.titleLabel?.adjustsFontSizeToFitWidth = true
backButton.setTitleColor(GlobalValues.menuTextColor, for: UIControlState())
backButton.showsTouchWhenHighlighted = true
menuBarView.addSubview(backButton)
menuButton.frame = CGRect(x: menuBarView.bounds.width * 0.9, y: 0, width: menuBarView.bounds.width * 0.1, height: menuBarView.bounds.height * 0.9)
menuButton.center.y = menuBarView.bounds.height / 2 + GlobalValues.menuBarLineWidth
menuButton.setTitle("Menu", for: .normal)
menuButton.titleLabel?.adjustsFontSizeToFitWidth = true
menuButton.setTitleColor(GlobalValues.menuTextColor, for: UIControlState())
menuButton.showsTouchWhenHighlighted = true
menuBarView.addSubview(menuButton)
addFlashCardView()
}
}
func slideIn() {
UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveLinear, animations: {
if let window = UIApplication.shared.keyWindow {
self.slideOutView.frame = CGRect(x: 0, y: window.bounds.height, width: window.bounds.width, height: window.bounds.height / 2)
}
}, completion: nil)
}
func slideOut() {
UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveLinear, animations: {
if let window = UIApplication.shared.keyWindow {
self.slideOutView.frame = CGRect(x: 0, y: window.bounds.height / 2, width: window.bounds.width, height: window.bounds.height / 2)
}
}, completion: nil)
}
func addFlashCardView() {
flashCardView.frame = slideOutView.frame
slideOutView.addSubview(flashCardView)
}
}
I'm relatively new to ios animations and I believe there's something wrong with the approach I took to animate UIView.
I will start with a UI screenshot to picture my problem more precisely:
There is a tableView cell with two labels and colorful filled circle
Anytime I introduce new value to the cell, I'd like to animate this left-most bulb so it looks like it's getting filled with red color.
This is the implementation od BadgeView, which is basically the aforementioned leftmost filled circle
class BadgeView: UIView {
var coeff:CGFloat = 0.5
override func drawRect(rect: CGRect) {
let topRect:CGRect = CGRectMake(0, 0, rect.size.width, rect.size.height*(1.0 - self.coeff))
UIColor(red: 249.0/255.0, green: 163.0/255.0, blue: 123.0/255.0, alpha: 1.0).setFill()
UIRectFill(topRect)
let bottomRect:CGRect = CGRectMake(0, rect.size.height*(1-coeff), rect.size.width, rect.size.height*coeff)
UIColor(red: 252.0/255.0, green: 95.0/255.0, blue: 95.0/255.0, alpha: 1.0).setFill()
UIRectFill(bottomRect)
self.layer.cornerRadius = self.frame.height/2.0
self.layer.masksToBounds = true
}
}
This is the way I achieve uneven fill - I introduced coefficient which I modify in viewController.
Inside my cellForRowAtIndexPath method I try to animate this shape using custom button with callback
let btn:MGSwipeButton = MGSwipeButton(title: "", icon: img, backgroundColor: nil, insets: ins, callback: {
(sender: MGSwipeTableCell!) -> Bool in
print("Convenience callback for swipe buttons!")
UIView.animateWithDuration(4.0, animations:{ () -> Void in
cell.pageBadgeView.coeff = 1.0
let frame:CGRect = cell.pageBadgeView.frame
cell.pageBadgeView.drawRect(frame)
})
return true
})
But it does nothing but prints to console
: CGContextSetFillColorWithColor: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
Although I'd love to know the right answer and approach, it would be great to know, for education purpose, why this code doesn't work.
Thanks in advance
The error part of the problem seems to be this part of the code:
cell.pageBadgeView.drawRect(frame)
From the Apple docs on UIView drawRect:
This method is called when a view is first displayed or when an event occurs that invalidates a visible part of the view. You should never call this method directly yourself. To invalidate part of your view, and thus cause that portion to be redrawn, call the setNeedsDisplay or setNeedsDisplayInRect: method instead.
So if you'd change your code to:
cell.pageBadgeView.setNeedsDisplay()
You'll get rid of the error and see the badgeView filled correctly. However this won't animate it, since drawRect isn't animatable by default.
The easiest workaround to your problem would be for BadgeView to have an internal view for the fill color. I'd refactor the BadgeView as so:
class BadgeView: UIView {
private let fillView = UIView(frame: .zero)
private var coeff:CGFloat = 0.5 {
didSet {
// Make sure the fillView frame is updated everytime the coeff changes
updateFillViewFrame()
}
}
// Only needed if view isn't created in xib or storyboard
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
// Only needed if view isn't created in xib or storyboard
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
override func awakeFromNib() {
setupView()
}
private func setupView() {
// Setup the layer
layer.cornerRadius = bounds.height/2.0
layer.masksToBounds = true
// Setup the unfilled backgroundColor
backgroundColor = UIColor(red: 249.0/255.0, green: 163.0/255.0, blue: 123.0/255.0, alpha: 1.0)
// Setup filledView backgroundColor and add it as a subview
fillView.backgroundColor = UIColor(red: 252.0/255.0, green: 95.0/255.0, blue: 95.0/255.0, alpha: 1.0)
addSubview(fillView)
// Update fillView frame in case coeff already has a value
updateFillViewFrame()
}
private func updateFillViewFrame() {
fillView.frame = CGRect(x: 0, y: bounds.height*(1-coeff), width: bounds.width, height: bounds.height*coeff)
}
// Setter function to set the coeff animated. If setting it not animated isn't necessary at all, consider removing this func and animate updateFillViewFrame() in coeff didSet
func setCoeff(coeff: CGFloat, animated: Bool) {
if animated {
UIView.animate(withDuration: 4.0, animations:{ () -> Void in
self.coeff = coeff
})
} else {
self.coeff = coeff
}
}
}
In your button callback you'll just have to do:
cell.pageBadgeView.setCoeff(1.0, animated: true)
try this playground code
import UIKit
import CoreGraphics
var str = "Hello, playground"
class BadgeView: UIView {
var coeff:CGFloat = 0.5
func drawCircleInView(){
// Set up the shape of the circle
let size:CGSize = self.bounds.size;
let layer = CALayer();
layer.frame = self.bounds;
layer.backgroundColor = UIColor.blue().cgColor
let initialRect:CGRect = CGRect.init(x: 0, y: size.height, width: size.width, height: 0)
let finalRect:CGRect = CGRect.init(x: 0, y: size.height/2, width: size.width, height: size.height/2)
let sublayer = CALayer()
sublayer.frame = initialRect
sublayer.backgroundColor = UIColor.orange().cgColor
sublayer.opacity = 0.5
let mask:CAShapeLayer = CAShapeLayer()
mask.frame = self.bounds
mask.path = UIBezierPath(ovalIn: self.bounds).cgPath
mask.fillColor = UIColor.black().cgColor
mask.strokeColor = UIColor.yellow().cgColor
layer.addSublayer(sublayer)
layer.mask = mask
self.layer.addSublayer(layer)
let boundsAnim:CABasicAnimation = CABasicAnimation(keyPath: "bounds")
boundsAnim.toValue = NSValue.init(cgRect:finalRect)
let anim = CAAnimationGroup()
anim.animations = [boundsAnim]
anim.isRemovedOnCompletion = false
anim.duration = 3
anim.fillMode = kCAFillModeForwards
sublayer.add(anim, forKey: nil)
}
}
var badgeView:BadgeView = BadgeView(frame:CGRect.init(x: 50, y: 50, width: 50, height: 50))
var window:UIWindow = UIWindow(frame: CGRect.init(x: 0, y: 0, width: 200, height: 200))
window.backgroundColor = UIColor.red()
badgeView.backgroundColor = UIColor.green()
window.becomeKey()
window.makeKeyAndVisible()
window.addSubview(badgeView)
badgeView.drawCircleInView()
More Modification to Above code , anchor point code was missing in above code
```
var str = "Hello, playground"
class BadgeView: UIView {
var coeff:CGFloat = 0.7
func drawCircleInView(){
// Set up the shape of the circle
let size:CGSize = self.bounds.size;
let layerBackGround = CALayer();
layerBackGround.frame = self.bounds;
layerBackGround.backgroundColor = UIColor.blue.cgColor
self.layer.addSublayer(layerBackGround)
let initialRect:CGRect = CGRect.init(x: 0, y: size.height , width: size.width, height: 0)
let finalRect:CGRect = CGRect.init(x: 0, y: 0, width: size.width, height: size.height)
let sublayer = CALayer()
//sublayer.bounds = initialRect
sublayer.frame = initialRect
sublayer.anchorPoint = CGPoint(x: 0.5, y: 1)
sublayer.backgroundColor = UIColor.orange.cgColor
sublayer.opacity = 1
let mask:CAShapeLayer = CAShapeLayer()
mask.frame = self.bounds
mask.path = UIBezierPath(ovalIn: self.bounds).cgPath
mask.fillColor = UIColor.black.cgColor
mask.strokeColor = UIColor.yellow.cgColor
layerBackGround.addSublayer(sublayer)
layerBackGround.mask = mask
self.layer.addSublayer(layerBackGround)
let boundsAnim:CABasicAnimation = CABasicAnimation(keyPath: "bounds")
boundsAnim.toValue = NSValue.init(cgRect:finalRect)
let anim = CAAnimationGroup()
anim.animations = [boundsAnim]
anim.isRemovedOnCompletion = false
anim.duration = 1
anim.fillMode = kCAFillModeForwards
sublayer.add(anim, forKey: nil)
}