I’m building out a UI that has a few screens with a gradient background and a tiled PNG (blend mode: multiply # 9% opacity) on top to create noise.
I've managed to create the gradient programatically with this snippet I found here but I'm struggling to figure out how to edit this to add the PNG over it
import Foundation
import UIKit
#IBDesignable class DarkGradient: UIView {
let titleLabel = UILabel()
#IBInspectable var title: String? = nil {
didSet {
titleLabel.text = title
}
}
override func layoutSubviews() {
super.layoutSubviews()
// Necessary in layoutSubviews to get the proper frame size.
configure()
}
func configure() {
let gradient = CAGradientLayer()
gradient.frame = bounds
gradient.colors = [UIColor(red: 0.16, green: 0.0, blue: 0.54, alpha: 1).cgColor,
UIColor(red: 0.26, green: 0.0, blue: 0.88, alpha: 1).cgColor]
gradient.startPoint = CGPoint(x: -0.5, y: 0.5)
gradient.endPoint = CGPoint(x: 0.5, y: 1.5)
layer.insertSublayer(gradient, at: 0)
}
}
Grateful for any help, all the answers I've found have been overlaying gradients over images.
Related
With the help of CGContextSetTextDrawingMode we are able to draw bordered Text. How can we fill the border with a brush (Gradient/Picture) instead of a solid color?
Can't find this on Apple Docs.
by using context.addPath(path) , then context.clip(to: pathFrame)
then you can use context.drawLinearGradient
in order to draw without side effects,
remember to use context.saveGState() and context.restoreGState(),
Here is an example for iOS version,
you should edit it to MacOS version
class CustomV: UIView{
override func draw(_ rect: CGRect) {
// Create a gradient from white to red
let colors: [CGFloat] = [
1.0, 1.0, 1.0, 1.0,
1.0, 0.0, 0.0, 1.0]
let baseSpace = CGColorSpaceCreateDeviceRGB()
guard let context = UIGraphicsGetCurrentContext(), let gradient =
CGGradient(colorSpace: baseSpace, colorComponents: colors, locations: nil, count: 2) else{ return }
context.saveGState()
let offset: CGFloat = 10
let startPoint = CGPoint(x: rect.maxX - offset, y: rect.minY)
let endPoint = CGPoint(x: rect.maxX - offset, y: rect.maxY)
let p = CGMutablePath()
p.move(to: startPoint)
p.addLine(to: endPoint)
context.addPath(p)
context.clip(to: CGRect(origin: startPoint, size: CGSize(width: 3, height: 800)))
context.setLineWidth(offset)
context.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: [])
context.restoreGState()
}
}
I have a popup view, that I would like to populate with ~15 UISwitches. Now it would be stupid to do all of that manually, so in Android I have set up a for loop to create said UISwitches from an array and you are able to toggle each one on and off and so on, each having their own value. I have created one switch, but when trying to create multiple from an array, none show up and I have no idea how I would be able to position them one after another.
let mySwitch = UISwitch()
mySwitch.isOn = false
mySwitch.center = self.view.center
mySwitch.thumbTintColor = UIColor(red: 23.0/255, green: 145.0/255, blue: 255.0/255, alpha: 1.0)
mySwitch.tintColor = UIColor(red: 23.0/255, green: 145.0/255, blue: 255.0/255, alpha: 1.0)
mySwitch.onTintColor = UIColor.black
mySwitch.backgroundColor = UIColor.white
self.view.addSubview(mySwitch)
var scrol = UIScrollView()
override func viewDidLoad() {
super.viewDidLoad()
scrol.frame = CGRect(x: 10, y: 0, width: self.view.frame.size.width, height: 200)
var yPos = 0.0
for i in 0...10 {
let mySwitch = UISwitch()
mySwitch.frame = CGRect(x: 10, y: yPos + 10, width: 50, height: 25)
mySwitch.isOn = false
// mySwitch.center = self.view.center
mySwitch.tag = i
mySwitch.thumbTintColor = UIColor(red: 23.0/255, green: 145.0/255, blue: 255.0/255, alpha: 1.0)
mySwitch.tintColor = UIColor(red: 23.0/255, green: 145.0/255, blue: 255.0/255, alpha: 1.0)
mySwitch.onTintColor = UIColor.black
mySwitch.backgroundColor = UIColor.white
yPos = Double(mySwitch.frame.origin.y + mySwitch.frame.size.height)
mySwitch.addTarget(self, action: #selector(onSwitchChange(_:)), for: .touchUpInside)
scrol.addSubview(mySwitch)
}
scrol.backgroundColor = .yellow
scrol.isScrollEnabled = true
self.view.addSubview(scrol)
}
func onSwitchChange(_ sender: UISwitch) {
print(" switch tapped \(sender.tag)")
}
Check out this, i have added a scrollView inside a UIView and have added multiple UISwitch as you have given in code with Frame set for UISwitch.
I'd recommend looking at UIStackView.
This allows you to easily add multiple UI elements to the screen at consistent positions without any hassle.
First you'd want to create a stack view:
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
stackView.spacing = 10
add it and constrain it:
view.addSubview(stackView)
NSLayoutConstraint.activate([
stackView.topAnchor.constraint(equalTo: view.topAnchor),
// etc, etc
])
Then you'd simply add a series of switches to the stack view:
for i in 0..<10 {
let switch = UISwitch()
// Configure switch
stackView.addArrangedSubview(switch)
}
Im new with Xcode and swift.
Im doing this game from this tutorial ( https://www.youtube.com/watch?v=hLOhirsXx9c&list=PL1YTxp2xLtqSiBhoAiaImXFcjAAxvo1es&index=1 )
The game is working good, but i wanna do that game with pictures, not code.
I can add background but i can't get pictures top of the background and get them moving.
example : this is the code for the ground that its moving to the right, but i wanna put 2 images instead of code.
import Foundation
import SpriteKit
class KBMovingGround: SKSpriteNode {
let NUMBER_OF_SEGMENTS = 20
let COLOR_ONE = UIColor(red: 88.0/255.0, green: 148.0/255.0, blue: 87.0/255.0, alpha: 1.0)
let COLOR_TWO = UIColor(red: 120.0/255.0, green: 195.0/255.0, blue: 118.0/225.0, alpha: 1.0)
init(size: CGSize) {
super.init(texture: nil, color: UIColor.brownColor(), size: CGSizeMake(size.width*2, size.height))
anchorPoint = CGPointMake(0, 0.5)
for var i = 0; i < NUMBER_OF_SEGMENTS; i++ {
var segmentColor: UIColor!
if i % 2 == 0 {
segmentColor = COLOR_ONE
} else {
segmentColor = COLOR_TWO
}
let segment = SKSpriteNode(color: segmentColor, size: CGSizeMake(self.size.width / CGFloat (NUMBER_OF_SEGMENTS), self.size.height))
segment.anchorPoint = CGPointMake(0.0, 0.5)
segment.position = CGPointMake(CGFloat(i)*segment.size.width, 0)
addChild(segment)
}
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func start(){
let moveLeft = SKAction.moveByX(-frame.size.width/2, y: 0, duration: 1.0)
let resetPosition = SKAction.moveToX(0, duration: 0)
let moveSequence = SKAction.sequence([moveLeft, resetPosition])
runAction(SKAction.repeatActionForever(moveSequence))
}
}
And i wanna do same thing with that "ninja" moving top on the ground.
Then i wanna make the ground and the objective thats moving on it go for the same speed so how do i make that?
And how i can make it speeding up when the player gets further at the game.
Thank you for the help beforehand and sorry for my bad english!
I'm trying to get a Live View to show a simple animation in a Swift Playground. Whenever I import the XCPlayground framework to execute the XCPShowView function i get this error:
Playground execution failed: error: Couldn't lookup symbols:_CGPointMake
The error changes for a few other "symbols" as well, including CGRectMake.
After being advised to modifying my code to remove the "make" from methods such as CGRectMake I still get an error from Xcode when I try to animate my view. The error message is really long, but basically it says
"Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want."
Here is the code I am trying to work with:
//Circle Button
class timerButtonGraphics: UIView {
override func drawRect(rect: CGRect) {
let colorGreen = UIColor(red: 0.310, green: 0.725, blue: 0.624, alpha: 1.000)
let colorRed = UIColor(red: 241/255, green: 93/255, blue: 79/255, alpha: 100)
var bounds = self.bounds
var center = CGPoint()
center.x = bounds.origin.x + bounds.size.width / 2
center.y = bounds.origin.y + bounds.size.height / 2
var radius = 61
var path:UIBezierPath = UIBezierPath()
path.addArcWithCenter(center, radius: CGFloat(radius), startAngle: CGFloat(0.0), endAngle: CGFloat(Float(M_PI) * 2.0), clockwise: true)
path.strokeWithBlendMode(kCGBlendModeNormal, alpha: 100)
path.lineWidth = 2
if strokeRed == true {
colorRed.setStroke()
}
else {
colorGreen.setStroke()
}
path.stroke()
}
var strokeRed = true
}
var test = timerButtonGraphics(frame: CGRect(x: 0, y: 400, width: 400, height: 400))
UIView.animateWithDuration(2.0, delay: 2, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5, options: nil, animations: {
test.transform = CGAffineTransformMakeTranslation(0.5, 0)
}, completion: nil)
XCPShowView("Circle Animation", test)
try with this, maybe it can help you
test.setTranslatesAutoresizingMaskIntoConstraints(false)
Been going nuts trying to get a live view of an animation in a Swift Playground like in the WWDC "Swift Playgrounds" video. I tried to do a UIView.animateWithDuration with no luck so I am now trying to do a CABasicaAnimation because this seems to be what was used in the demo. I'be gotten rid of a lot of confusing errors and have imported the proper frameworks but am still having no luck getting my little circle to do anything but sit still in the center of my XCPShowView. Here is my code:
import Foundation
import XCPlayground
import UIKit
import QuartzCore
//Circle Button
class timerButtonGraphics: UIView {
override func drawRect(rect: CGRect) {
let colorGreen = UIColor(red: 0.310, green: 0.725, blue: 0.624, alpha: 1.000)
let colorRed = UIColor(red: 241/255, green: 93/255, blue: 79/255, alpha: 100)
var bounds = self.bounds
var center = CGPoint()
center.x = bounds.origin.x + bounds.size.width / 2
center.y = bounds.origin.y + bounds.size.height / 2
var radius = 61
var path:UIBezierPath = UIBezierPath()
path.addArcWithCenter(center, radius: CGFloat(radius), startAngle: CGFloat(0.0), endAngle: CGFloat(Float(M_PI) * 2.0), clockwise: true)
path.strokeWithBlendMode(kCGBlendModeNormal, alpha: 100)
path.lineWidth = 5
colorGreen.setStroke()
path.stroke()
//Define the animation here
var anim = CABasicAnimation()
anim.keyPath = "scale.x"
anim.fromValue = 1
anim.toValue = 100
anim.delegate = self
self.layer.addAnimation(anim, forKey: nil)
}
}
var test = timerButtonGraphics(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
test.setTranslatesAutoresizingMaskIntoConstraints(true)
XCPShowView("Circle Animation", test)`
The first part of the solution is to enable the Run in Full Simulator option. See this answer for a step-by-step.
The second part of the solution is to contain your animated view in a container view, e.g.:
let container = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
XCPShowView("Circle Animation", container)
let test = timerButtonGraphics(frame: CGRect(x: 198, y: 0, width: 4, height: 400))
container.addSubview(test)
The third part of the solution is to correct your animation. The keyPath should be transform.scale.x instead of scale.x and you need to add a duration, e.g.:
anim.keyPath = "transform.scale.x"
anim.duration = 5
You should then be able to view the animation in your playground.