2014-07-17 1 views
0

J'essaye de faire un commutateur vertical personnalisé avec CoreGraphics. J'ai l'arrière-plan de commutateur et le dessin de pouce de commutateur dans des vues séparées, mais pour une raison quelconque, je ne peux pas sembler placer la couleur de fond de la vue de pouce à clearcolor. Toute aide serait grandement appréciée!Dessin de dessin personnalisé UIView avec CoreGraphics

enter image description here

![import UIKit 
import QuartzCore 

class ThumbView:UIView { 

    var thumbPath = UIBezierPath() 
    init(frame: CGRect) { 
     super.init(frame: frame) 
     // self.opaque = false 
     // self.backgroundColor = UIColor.clearColor() 
    } 

    init(coder aDecoder: NSCoder!) { 
     super.init(coder: aDecoder) 
     self.opaque = false 
     self.backgroundColor = UIColor.clearColor() 
    } 

    override func drawRect(rect: CGRect) { 
     let contentFrame = rect 
     let context = UIGraphicsGetCurrentContext() 

     let bgPath = UIBezierPath(rect: self.frame) 
     let bgColor = UIColor.clearColor() 
     bgColor.setFill() 
     bgPath.fill() 

     self.backgroundColor = bgColor; 

     let white = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000) 
     let shadowOffset = CGSizeMake(0.1, 3.1) 
     let shadowBlurRadius: CGFloat = 5 
     let shadow = UIColor.darkGrayColor() 

     CGContextSaveGState(context) 
     //// thumb Drawing 
     thumbPath = UIBezierPath(ovalInRect: CGRectMake(0, 0, rect.size.height, rect.size.width)) 
     CGContextSaveGState(context) 
     CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius, shadow.CGColor) 
     white.setFill() 
     thumbPath.fill() 
     CGContextRestoreGState(context) 
    } 
} 

class VerticalSwitch: UIView { 

    var switchBackgroundPath = UIBezierPath() 
    var thumbView = ThumbView() 

    init(frame: CGRect) { 
     super.init(frame: frame) 
    } 

    init(coder aDecoder: NSCoder!) { 
     super.init(coder: aDecoder) 
     self.clipsToBounds = true 
     thumbView = ThumbView() 
     NSLog("%@", NSStringFromCGRect(self.frame)) 
     self.addSubview(thumbView) 
    } 

    override func layoutSubviews() { 
     thumbView.frame = CGRectMake(5, 5, self.frame.size.width - 10, self.frame.size.width - 10) 
    } 

    // Only override drawRect: if you perform custom drawing. 
    // An empty implementation adversely affects performance during animation. 
    override func drawRect(rect: CGRect) 
    { 
     let contentFrame = rect 
     //// General Declarations 
     let context = UIGraphicsGetCurrentContext() 

     //// Color Declarations 
     let gDGreen = UIColor(red: 0.157, green: 0.475, blue: 0.153, alpha: 1.000) 

     //// Shadow Declarations 
     let innerShadow = UIColor.darkGrayColor().colorWithAlphaComponent(0.9) 
     let innerShadowOffset = CGSizeMake(0.1, -5.1) 
     let innerShadowBlurRadius: CGFloat = 10 

     //// switchBackground Drawing 
     switchBackgroundPath.moveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.06764 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.23095 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 95.12, contentFrame.minY + 0.11274 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.17184 * contentFrame.height)) 
     switchBackgroundPath.addLineToPoint(CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.76905 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.93236 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.82816 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 95.12, contentFrame.minY + 0.88726 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 14.64, contentFrame.minY + 0.93236 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 65.83, contentFrame.minY + 1.02255 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 34.17, contentFrame.minY + 1.02255 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX, contentFrame.minY + 0.76905 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 4.88, contentFrame.minY + 0.88726 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX, contentFrame.minY + 0.82816 * contentFrame.height)) 
     switchBackgroundPath.addLineToPoint(CGPointMake(contentFrame.minX, contentFrame.minY + 0.23095 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 14.64, contentFrame.minY + 0.06764 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX, contentFrame.minY + 0.17184 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 4.88, contentFrame.minY + 0.11274 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.06764 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 34.17, contentFrame.minY + -0.02255 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 65.83, contentFrame.minY + -0.02255 * contentFrame.height)) 
     switchBackgroundPath.closePath() 
     gDGreen.setFill() 
     switchBackgroundPath.fill() 

     ////// switchBackground Inner Shadow 
     CGContextSaveGState(context) 
     CGContextClipToRect(context, switchBackgroundPath.bounds) 
     CGContextSetShadow(context, CGSizeMake(0, 0), 0) 
     CGContextSetAlpha(context, CGColorGetAlpha(innerShadow.CGColor)) 
     CGContextBeginTransparencyLayer(context, nil) 
     let switchBackgroundOpaqueShadow = innerShadow.colorWithAlphaComponent(1) 
     CGContextSetShadowWithColor(context, innerShadowOffset, innerShadowBlurRadius, switchBackgroundOpaqueShadow.CGColor) 
     CGContextSetBlendMode(context, kCGBlendModeSourceOut) 
     CGContextBeginTransparencyLayer(context, nil) 

     switchBackgroundOpaqueShadow.setFill() 
     switchBackgroundPath.fill() 

     CGContextEndTransparencyLayer(context) 
     CGContextRestoreGState(context) 
    } 

    override func touchesBegan(touches: NSSet!, withEvent event: UIEvent!) { 

    } 
}] 
+0

Essayez d'ajouter 'CGContextClearRect (contexte, rect)' juste après que vous avez obtenu contexte actuel . – Keenle

+0

@Keenle Ne fonctionne pas, ayant toujours le même problème. – JonahGabriel

+0

Dans la méthode 'init', essayez de définir' self.layer.backgroundColor = UIColor.clearColor(). CGColor' – Keenle

Répondre

4

Vous devez créer Thumbview utilisant constructeur avec paramètre Frame:

thumbView = ThumbView(frame: CGRectMake(0,0, 0, 0)) 

Et ThumbView init(frame: CGRect) devrait être:

init(frame: CGRect) { 
    super.init(frame: frame) 
    self.opaque = false 
    self.backgroundColor = UIColor.clearColor() 
} 

Sinon, vous pouvez créer parameterless construire dans ThumbView mais doit appeler super.init(frame:CGRectMake(0,0, 0, 0)) et définir les propriétés opaque et arrière-plan de toute façon.

MISE À JOUR:

  • Vous avez oublié aussi appeler CGContextRestoreGState dans la méthode ThumbView drawRect:. Devrait être ajouté à la fin de la méthode.
  • Et avez oublié d'appeler CGContextEndTransparencyLayer dans la méthode VerticalSwitch drawRect:. Doit être ajouté juste après un autre appel de méthode CGContextEndTransparencyLayer.

capture d'écran Emulator:

Final Screenshot

Tout le code (avec corrections):

import Foundation 
import UIKit 
import QuartzCore 

class ThumbView:UIView { 

    var thumbPath = UIBezierPath() 
    init(frame: CGRect) { 
     super.init(frame: frame) 
     self.opaque = false 
      self.backgroundColor = UIColor.clearColor() 
    } 

    init(coder aDecoder: NSCoder!) { 
     super.init(coder: aDecoder) 
     self.opaque = false 
     self.backgroundColor = UIColor.clearColor() 
    } 

    override func drawRect(rect: CGRect) { 
     let contentFrame = rect 
     let context = UIGraphicsGetCurrentContext() 

     let bgPath = UIBezierPath(rect: self.frame) 
     let bgColor = UIColor.clearColor() 
     bgColor.setFill() 
     bgPath.fill() 

     self.backgroundColor = bgColor; 

     let white = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000) 
     let shadowOffset = CGSizeMake(0.1, 3.1) 
     let shadowBlurRadius: CGFloat = 5 
     let shadow = UIColor.darkGrayColor() 

     CGContextSaveGState(context) 
     //// thumb Drawing 
     thumbPath = UIBezierPath(ovalInRect: CGRectMake(0, 0, rect.size.height, rect.size.width)) 
     CGContextSaveGState(context) 
     CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius, shadow.CGColor) 
     white.setFill() 
     thumbPath.fill() 
     CGContextRestoreGState(context) 
     CGContextRestoreGState(context) 
    } 
} 

class VerticalSwitch: UIView { 

    var switchBackgroundPath = UIBezierPath() 
    var thumbView = ThumbView() 

    init(frame: CGRect) { 
     super.init(frame: frame) 
    } 

    init(coder aDecoder: NSCoder!) { 
     super.init(coder: aDecoder) 
     self.clipsToBounds = true 
     thumbView = ThumbView(frame: CGRectMake(0,0, 0, 0)) 
     NSLog("%@", NSStringFromCGRect(self.frame)) 
     self.addSubview(thumbView) 
    } 

    override func layoutSubviews() { 
     thumbView.frame = CGRectMake(5, 5, self.frame.size.width - 10, self.frame.size.width - 10) 
    } 

    // Only override drawRect: if you perform custom drawing. 
    // An empty implementation adversely affects performance during animation. 
    override func drawRect(rect: CGRect) 
    { 
     let contentFrame = rect 
     //// General Declarations 
     let context = UIGraphicsGetCurrentContext() 

     //// Color Declarations 
     let gDGreen = UIColor(red: 0.157, green: 0.475, blue: 0.153, alpha: 1.000) 

     //// Shadow Declarations 
     let innerShadow = UIColor.darkGrayColor().colorWithAlphaComponent(0.9) 
     let innerShadowOffset = CGSizeMake(0.1, -5.1) 
     let innerShadowBlurRadius: CGFloat = 10 

     //// switchBackground Drawing 
     switchBackgroundPath.moveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.06764 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.23095 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 95.12, contentFrame.minY + 0.11274 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.17184 * contentFrame.height)) 
     switchBackgroundPath.addLineToPoint(CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.76905 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.93236 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.82816 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 95.12, contentFrame.minY + 0.88726 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 14.64, contentFrame.minY + 0.93236 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 65.83, contentFrame.minY + 1.02255 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 34.17, contentFrame.minY + 1.02255 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX, contentFrame.minY + 0.76905 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 4.88, contentFrame.minY + 0.88726 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX, contentFrame.minY + 0.82816 * contentFrame.height)) 
     switchBackgroundPath.addLineToPoint(CGPointMake(contentFrame.minX, contentFrame.minY + 0.23095 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 14.64, contentFrame.minY + 0.06764 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX, contentFrame.minY + 0.17184 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 4.88, contentFrame.minY + 0.11274 * contentFrame.height)) 
     switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.06764 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 34.17, contentFrame.minY + -0.02255 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 65.83, contentFrame.minY + -0.02255 * contentFrame.height)) 
     switchBackgroundPath.closePath() 
     gDGreen.setFill() 
     switchBackgroundPath.fill() 

     ////// switchBackground Inner Shadow 
     CGContextSaveGState(context) 
     CGContextClipToRect(context, switchBackgroundPath.bounds) 
     CGContextSetShadow(context, CGSizeMake(0, 0), 0) 
     CGContextSetAlpha(context, CGColorGetAlpha(innerShadow.CGColor)) 
     CGContextBeginTransparencyLayer(context, nil) 
     let switchBackgroundOpaqueShadow = innerShadow.colorWithAlphaComponent(1) 
     CGContextSetShadowWithColor(context, innerShadowOffset, innerShadowBlurRadius, switchBackgroundOpaqueShadow.CGColor) 
     CGContextSetBlendMode(context, kCGBlendModeSourceOut) 
     CGContextBeginTransparencyLayer(context, nil) 

     switchBackgroundOpaqueShadow.setFill() 
     switchBackgroundPath.fill() 

     CGContextEndTransparencyLayer(context) 
     CGContextEndTransparencyLayer(context) 
     CGContextRestoreGState(context) 
    } 

    override func touchesBegan(touches: NSSet!, withEvent event: UIEvent!) { 

    } 
} 
+0

Essayé cela, mais le ThumbView ne montre pas du tout encore. Cela a-t-il fonctionné pour vous? – JonahGabriel

+0

Oui. Il a résolu le problème. – Keenle

+0

Comment initialisez-vous VerticalSwitch? Pouvez-vous partager le code? – Keenle

Questions connexes