Related
Im making an app where i have to add fortune wheel, for this i search the pod and find this library very useful https://github.com/sh-khashimov/SwiftFortuneWheel. Almost every thing is customisable but now i'm facing one issue with the library. i have a requirement that each slice color will be change once wheel stop, means winning color will be different and losing color will be different after wheel stop. i try to update it color is changing but now wheel is not stoping at correct index. which was stoping before i update color. can any one let me know what i'm doing wrong here. im pasting my code implentation here too. also i raised detail issue in github too https://github.com/sh-khashimov/SwiftFortuneWheel/issues/20.
import UIKit
import SwiftFortuneWheel
class VariousWheelPodiumViewController: UIViewController {
var selectedIndex = -1
#IBOutlet weak var wheelControl: SwiftFortuneWheel!
var prizes = [(id:0,name: "MONEYMONEY", color: #colorLiteral(red: 0.9607843137, green: 0.768627451, blue: 0.568627451, alpha: 1),winningColor: #colorLiteral(red: 0.9333333333, green: 0.6078431373, blue: 0.2705882353, alpha: 1),losingColor: #colorLiteral(red: 0.737254902, green: 0.2901960784, blue: 0.6156862745, alpha: 1), textColor: #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)),
(id:1,name: "GRAPHIC", color: #colorLiteral(red: 0.9843137255, green: 0.9098039216, blue: 0.8274509804, alpha: 1),winningColor: #colorLiteral(red: 0.9607843137, green: 0.768627451, blue: 0.568627451, alpha: 1), losingColor: #colorLiteral(red: 0.737254902, green: 0.2901960784, blue: 0.6156862745, alpha: 1),textColor: #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)),
(id:2,name: "HOME", color: #colorLiteral(red: 0.9607843137, green: 0.768627451, blue: 0.568627451, alpha: 1),winningColor: #colorLiteral(red: 0.9333333333, green: 0.6078431373, blue: 0.2705882353, alpha: 1),losingColor: #colorLiteral(red: 0.737254902, green: 0.2901960784, blue: 0.6156862745, alpha: 1), textColor: #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)),
(id:3,name: "IDEA", color: #colorLiteral(red: 0.9843137255, green: 0.9098039216, blue: 0.8274509804, alpha: 1), winningColor: #colorLiteral(red: 0.9333333333, green: 0.6078431373, blue: 0.2705882353, alpha: 1), losingColor: #colorLiteral(red: 0.737254902, green: 0.2901960784, blue: 0.6156862745, alpha: 1),textColor: #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)),
(id:4,name: "MANAGMENT", color: #colorLiteral(red: 0.9607843137, green: 0.768627451, blue: 0.568627451, alpha: 1),winningColor: #colorLiteral(red: 0.9333333333, green: 0.6078431373, blue: 0.2705882353, alpha: 1), losingColor: #colorLiteral(red: 0.737254902, green: 0.2901960784, blue: 0.6156862745, alpha: 1),textColor: #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)),
(id:5,name: "SEARCH", color: #colorLiteral(red: 0.9843137255, green: 0.9098039216, blue: 0.8274509804, alpha: 1),winningColor: #colorLiteral(red: 0.9333333333, green: 0.6078431373, blue: 0.2705882353, alpha: 1), losingColor: #colorLiteral(red: 0.737254902, green: 0.2901960784, blue: 0.6156862745, alpha: 1),textColor: #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)),
(id:6,name: "TARGET", color: #colorLiteral(red: 0.9607843137, green: 0.768627451, blue: 0.568627451, alpha: 1),winningColor: #colorLiteral(red: 0.9333333333, green: 0.6078431373, blue: 0.2705882353, alpha: 1), losingColor: #colorLiteral(red: 0.737254902, green: 0.2901960784, blue: 0.6156862745, alpha: 1),textColor: #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)),
(id:7,name: "TIME", color: #colorLiteral(red: 0.9843137255, green: 0.9098039216, blue: 0.8274509804, alpha: 1),winningColor: #colorLiteral(red: 0.9333333333, green: 0.6078431373, blue: 0.2705882353, alpha: 1), losingColor: #colorLiteral(red: 0.737254902, green: 0.2901960784, blue: 0.6156862745, alpha: 1),textColor: #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1))]
var slices = [Slice] ()
var finishIndex: Int {
return Int.random(in: 0..<wheelControl.slices.count)
}
override func viewDidLoad() {
super.viewDidLoad()
wheelControl.configuration = .variousWheelPodiumConfiguration
wheelControl.spinImage = "center"
wheelControl.isSpinEnabled = false
updateSlice()
wheelControl.slices = slices
}
#IBAction func rotateTap(_ sender: Any) {
let finishingIndex = self.finishIndex
print(finishingIndex)
wheelControl.startRotationAnimation(finishIndex: finishingIndex, continuousRotationTime: 1) { (isFinished) in
guard isFinished else { return }
print(self.prizes[finishingIndex])
self.selectedIndex = finishingIndex
self.updateSlice()
self.wheelControl.slices = self.slices
self.wheelControl.rotate(toIndex: finishingIndex)
}
}
func updateSlice(){
slices = []
for (index,prize) in prizes.enumerated() {
print(index,prize.name)
var titleTextPreferences = TextPreferences(textColorType: .customPatternColors(colors: nil, defaultColor: .black), font: .systemFont(ofSize: 10, weight: .bold), verticalOffset: 20)
titleTextPreferences.horizontalOffset = 10
titleTextPreferences.orientation = .vertical
titleTextPreferences.spacing = 0
titleTextPreferences.alignment = .left
var descriptionTextPreferences = TextPreferences(textColorType: .customPatternColors(colors: nil, defaultColor: .red), font: .systemFont(ofSize: 10), verticalOffset:-75)
descriptionTextPreferences.horizontalOffset = 0
descriptionTextPreferences.orientation = .vertical
descriptionTextPreferences.spacing = 0
descriptionTextPreferences.alignment = .left
let content: [Slice.ContentType] = [.text(text: prize.name, preferences: titleTextPreferences),.text(text: prize.name, preferences: descriptionTextPreferences)]
var slice = Slice(contents: content)
if selectedIndex == -1{
slice.backgroundColor = prize.color
}else{
slice.backgroundColor = index == selectedIndex ? prize.winningColor : prize.losingColor
}
slices.append(slice)
}
}
}
It would be nice if you could loop through the current slices and set their background colors directly. Quick testing of that code, though, and it doesn't work. Apparently, anytime you touch a "slice" object, the wheel resets its rotation.
You can try replacing your rotateTap(...) function with this:
#IBAction func rotateTap(_ sender: Any) {
let finishingIndex = self.finishIndex
print(finishingIndex)
wheelControl.startRotationAnimation(finishIndex: finishingIndex, continuousRotationTime: 1) { (isFinished) in
guard isFinished else { return }
print(self.prizes[finishingIndex])
self.selectedIndex = finishingIndex
self.updateSlice()
self.wheelControl.slices = self.slices
// set rotation async on main queue
DispatchQueue.main.async {
self.wheelControl.rotate(toIndex: finishingIndex)
}
}
}
See if that gives you acceptable results. If not, there is a more complex work-around, but ideally modify the SwiftFortuneWheel code to provide for a "modify slice property" solution.
Is there a way to create an array of custom colors? I know I can create custom colors in class UIColors but in my case I need an array of my custom colors.
I would like to achieve something like this:
let listColors: [UIColor] = [
let color1 = UIColor(displayP3Red: 1, green: 1, blue: 1, alpha: 1),
let color2 = UIColor(displayP3Red: 2, green: 2, blue: 2, alpha: 1),
let color3 = UIColor(displayP3Red: 3, green: 3, blue: 3, alpha: 1),
]
You don't need a subclass to create an array do
let listColors = [
UIColor(displayP3Red: 1, green: 1, blue: 1, alpha: 1),
UIColor(displayP3Red: 2, green: 2, blue: 2, alpha: 1),
UIColor(displayP3Red: 3, green: 3, blue: 3, alpha: 1)
]
access
listColors[index]
or
class Colors {
static let color1 = UIColor(displayP3Red: 1, green: 1, blue: 1, alpha: 1)
static let color2 = UIColor(displayP3Red: 2, green: 2, blue: 2, alpha: 1)
static let color3 = UIColor(displayP3Red: 3, green: 3, blue: 3, alpha: 1)
}
access
Colors.color1
or as global
let color1 = UIColor(displayP3Red: 1, green: 1, blue: 1, alpha: 1)
let color2 = UIColor(displayP3Red: 2, green: 2, blue: 2, alpha: 1)
let color3 = UIColor(displayP3Red: 3, green: 3, blue: 3, alpha: 1)
access
color1
When you create a color divide by 255
UIColor(displayP3Red: 2/255.0, green: 2/255.0, blue: 2/255.0, alpha: 1)
Or if you want to be able to reference them by name or by array index:
let color1 = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0), //White
let color2 = UIColor(red: 0.5, green: 0.5, blue: 0.5, alpha: 1.0), //Gray
let color3 = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0), //Red
let listColors: [UIColor] = [color1, color2, color3]
If you are supporting dark and light modes in your App, it is best to define your custom colors as assets in your App and then access them something like this
extension String {
static let blueColorName = "Blue"
static let brownColorName = "Brown"
static let crustaColorName = "Crusta"
static let darkRedColorName = "DarkRed"
static let defaultColorName = "Default"
static let flamingoColorName = "Tango"
static let khakiColorName = "Khaki"
static let greenColorName = "Green"
static let limeColorName = "Lime"
static let lustColorName = "Lust"
static let oliveColorName = "Olive"
static let orangeColorName = "Orange"
static let pinkColorName = "Pink"
static let purpleColorName = "Purple"
static let roseColorName = "Rose"
static let redColorName = "Red"
static let skyColorName = "Sky"
static let steelColorName = "Steel"
static let sunColorName = "Sun"
static let tealColorName = "Teal"
static let yellowColorName = "Yellow"
// Tile Background Colors
static let tileGrayColorName = "TileGray"
static let tileGreenColorName = "TileGreen"
static let tileRedColorName = "TileRed"
static let tileYellowColorName = "TileYellow"
}
extension UIColor {
// MARK: - Custom Color List For Color Picker
static let customColorsList: [(colorName: String, uiColor: UIColor)] = [
("Orange", UIColor(named: .orangeColorName)!),
("Tango", UIColor(named: .flamingoColorName)!),
("Crusta", UIColor(named: .crustaColorName)!),
("Yellow", UIColor(named: .yellowColorName)!),
("Sun", UIColor(named: .sunColorName)!),
("Khaki", UIColor(named: .khakiColorName)!),
("Lime", UIColor(named: .limeColorName)!),
("Green", UIColor(named: .greenColorName)!),
("Olive", UIColor(named: .oliveColorName)!),
("Teal", UIColor(named: .tealColorName)!),
("Sky", UIColor(named: .skyColorName)!),
("Blue", UIColor(named: .blueColorName)!),
("Steel", UIColor(named: .steelColorName)!),
("Pink", UIColor(named: .pinkColorName)!),
("Rose", UIColor(named: .roseColorName)!),
("Purple", UIColor(named: .purpleColorName)!),
("Lust", UIColor(named: .lustColorName)!),
("Dark Red", UIColor(named: .darkRedColorName)!),
("Brown", UIColor(named: .brownColorName)!),
("Default", UIColor(named: .defaultColorName)!)
]
}
I have a button and i'm trying to set its background color gradient.I have three hex values which i converted to RGB and written three values in my code and pass all the three values to the button frame. But when i run the app button background not changes according to the color i have set in the code. My code to get three color codes is this,
let gradientColor = CAGradientLayer()
gradientColor.frame = loginButton.frame
let color1 = UIColor(red: 183, green: 46, blue: 79, alpha: 1)
let color2 = UIColor(red: 232, green: 79, blue: 80, alpha: 1)
let color3 = UIColor(red: 145, green: 21, blue: 79, alpha: 1)
gradientColor.colors = [color1,color2,color3]
self.loginButton.layer.addSublayer(gradientColor)
Try this and see:
#IBOutlet weak var loginButton: UIButton!
func testGradientButton() -> Void {
let gradientColor = CAGradientLayer()
gradientColor.frame = loginButton.frame
gradientColor.colors = [UIColor.blue.cgColor,UIColor.red.withAlphaComponent(1).cgColor]
self.loginButton.layer.insertSublayer(gradientColor, at: 0)
}
Here is result:
Also note: Values for RGB colors in your code, are much higher than its normal value. See your console log, it might printed following error:
[Graphics] UIColor created with component values far outside the expected range. Set a breakpoint on UIColorBreakForOutOfRangeColorComponents to debug. This message will only be logged once.
Divide all values with 255.0 and use insertSubLayer function.
let color1 = UIColor(red: 183.0/255.0, green: 46.0/255.0, blue: 79.0/255.0, alpha: 1)
let color2 = UIColor(red: 232.0/255.0, green: 79.0/255.0, blue: 80.0/255.0, alpha: 1)
let color3 = UIColor(red: 145.0/255.0, green: 21.0/255.0, blue: 79.0/255.0, alpha: 1)
Here is result with your color code values:
func testGradientButton() -> Void {
let gradientColor = CAGradientLayer()
gradientColor.frame = loginButton.frame
let color1 = UIColor(red: 183.0/255.0, green: 46.0/255.0, blue: 79.0/255.0, alpha: 1)
let color2 = UIColor(red: 232.0/255.0, green: 79.0/255.0, blue: 80.0/255.0, alpha: 1)
let color3 = UIColor(red: 145.0/255.0, green: 21.0/255.0, blue: 79.0/255.0, alpha: 1)
gradientColor.colors = [color1.cgColor,color2.cgColor,color3.cgColor]
self.loginButton.layer.insertSublayer(gradientColor, at: 0)
}
Hello Stack Overflow community,
I am working on a project in Xcode 8.0 using Swift 3.0. The application I am trying to develop is a life counter for Magic the Gathering for my class' final project. The first image is what appears on screen when the user navigates from the home screen of the app to the life counter screen.
Here's a link to an image that shows what the user sees when they navigate from the application's home screen to this view.
You will see in the photo that there is the view controller, named lifeCounterViewController, and inside of that view controller are two other views. These views are named player1View and player2View respectively.
Inside each of those views a rectangle is being drawn. It is a member of the CGRect class. The following code is from a cocoa touch swift file. It contains the code that has my override of the draw function.
//
// player1LifeCounterDrawing.swift
import UIKit
class player1LifeCounterDrawing: UIView {
let MagicRed = UIColor.init(red: 247.0/255.0, green: 170.0/255.0, blue: 146.0/255.0, alpha: 1.0)
let Purple = UIColor.init(red: 102.0/255.0, green: 0.0/255.0, blue: 204.0/255.0, alpha: 1.0)
let Magenta = UIColor.init(red: 102.0/255.0, green: 0.0/255.0, blue: 51.0/255.0, alpha: 1.0)
let Orange = UIColor.init(red: 255.0/255.0, green: 166.0/255.0, blue: 0.0/255.0, alpha: 1.0)
let Plum = UIColor.init(red: 179.0/255.0, green: 0.0/255.0, blue: 89.0/255.0, alpha: 1.0)
let Emerald = UIColor.init(red: 0.0/255.0, green: 204.0/255.0, blue: 102.0/255.0, alpha: 1.0)
let Teal = UIColor.init(red: 0.0/255.0, green: 153.0/255.0, blue: 153.0/255.0, alpha: 1.0)
let SlateBlue = UIColor.init(red: 0.0/255.0, green: 153.0/255.0, blue: 255.0/255.0, alpha: 1.0)
let Forest = UIColor.init(red: 51.0/255.0, green: 153.0/255.0, blue: 51.0/255.0, alpha: 1.0)
let NavyBlue = UIColor.init(red: 51.0/255.0, green: 102.0/255.0, blue: 153.0/255.0, alpha: 1.0)
let MagicBlue = UIColor.init(red: 157.0/255.0, green: 216.0/255.0, blue: 255.0/255.0, alpha: 1.0)
let MagicBlack = UIColor.init(red: 194.0/255.0, green: 179.0/255.0, blue: 180.0/255.0, alpha: 1.0)
let MagicGreen = UIColor.init(red: 141.0/255.0, green: 203.0/255.0, blue: 158.0/255.0, alpha: 1.0)
var colorLibrary = [UIColor]()
var index = 0
func fillLibrary(library: [UIColor]) -> [UIColor]{
let capture = [UIColor](arrayLiteral: MagicRed, MagicBlue, MagicGreen, MagicBlack, Purple, Magenta, Orange, Plum, Emerald, Teal, SlateBlue, Forest, NavyBlue )
return capture
}
func calling(){
colorLibrary = fillLibrary(library: colorLibrary)
}
override func draw(_ rect: CGRect){
calling()
let lineWidth = CGFloat(3.0)
let rectangle = CGRect(
origin: CGPoint(x: 0, y: 0),
size: CGSize(width: bounds.maxX, height: bounds.maxY)
)
let rectPath = UIBezierPath(
roundedRect: rectangle,
byRoundingCorners: UIRectCorner(rawValue: 0),
cornerRadii: CGSize(width: 0, height: 0)
)
rectPath.lineWidth = lineWidth
rectPath.lineCapStyle = CGLineCap.square
if index >= colorLibrary.count{
index = 0
}
colorLibrary[index].setFill()
colorLibrary[index].setStroke()
index += 1
rectPath.stroke()
rectPath.fill()
}
}
Now this solution works, but it is ugly. As you can see whenever the draw function is called the array named, colorLibrary, is being reinitialized.
I fear that this is a large waste of memory and I need help finding a solution so that whenever the user presses down on a button a call to setNeedsDisplay() is made and the setStroke() and setFill() methods color is changed to reflect the color represented in the colorLibrary at [index].
How can this be accomplished?
Also keep in mind that the proposed solution needs to work for both player1View and player2View. I have only shown the code in player1View, but it is the same in player2View only the number identifying which view is which has changed.
Again, in my mind this is a large waste of memory, and I would like to have this fixed before Tuesday since that is when I need to present my application to my class. If I can't get a working solution by then I'll just go with this current one.
Swift supports lazy initialisation to, among other things, avoid the duplication you are concerned about. You can replace your colorLibrary with:
lazy var colorLibrary: [UIColor] = [self.MagicRed, self.MagicBlue, self.MagicGreen,
self.MagicBlack, self.Purple, self.Magenta,
self.Orange, self.Plum, self.Emerald, self.Teal,
self.SlateBlue, self.Forest, self.NavyBlue]
Note this uses an array literal ([ ... ]).
Now the variable colorLibrary will be initialised on first use and its value retained.
(To be accurate the variable may be initialised more than once, in particular in multi-threaded scenarios, but this need not concern you.)
On another note you manage your index with code like:
if index >= colorLibrary.count{
index = 0
}
// use index...
index += 1
The common way to manage an index like this is to use modular arithmetic; that is arithmetic which wraps around, adding one to the maximum value results in the minimum value. (For a real world example consider an odometer or the counter on an electric meter, after reaching all 9's these cycle around to all 0's.)
Modular arithmetic can be perform using the mod operator %, which for this purpose you can think of as returning the remainder of a division. The above code outline becomes:
// use index...
index = (index + 1) % colorLibrary.count
and the if is avoided.
HTH
You already have everything set up, an instance variable for the array of colours etc, but you're recreating this array with every draw cycle when every time except the first you probably needn't be.
Consider changing the call to calling() function at the start of draw(_:) so that you can reuse the previous array of colours. This won't save any memory, but it will reduce the number of unnecessary and repeated allocations, significantly improving efficiency. best
if colorLibrary.count == 0 {
calling()
}
Changing the index inside of your draw code will result in increasing at every single draw (device rotation -> redraw, go to background and open again -> redraw, ...). But you only want to do it when pressing a button.
My suggestion is to extract the color and index functionality into a specialized class (because it is logic independent of ui, the view should only draw something not more). You can also use lazy loading to avoid to much object creations.
e.g.:
final class ColorLibrary {
// increase index logic (including overflow handling)
private var currentIndex: Int = 0
func increaseIndex() {
if currentIndex == colors.count - 1 {
currentIndex = 0
} else {
currentIndex += 1
}
}
// lazy loading: color array will be created only once and only if needed
private var _colors: [UIColor]?
private var colors: [UIColor] {
if _colors == nil {
_colors = [
UIColor.init(red: 247.0/255.0, green: 170.0/255.0, blue: 146.0/255.0, alpha: 1.0),
UIColor.init(red: 102.0/255.0, green: 0.0/255.0, blue: 204.0/255.0, alpha: 1.0),
UIColor.init(red: 102.0/255.0, green: 0.0/255.0, blue: 51.0/255.0, alpha: 1.0),
UIColor.init(red: 255.0/255.0, green: 166.0/255.0, blue: 0.0/255.0, alpha: 1.0),
UIColor.init(red: 179.0/255.0, green: 0.0/255.0, blue: 89.0/255.0, alpha: 1.0),
UIColor.init(red: 0.0/255.0, green: 204.0/255.0, blue: 102.0/255.0, alpha: 1.0),
UIColor.init(red: 0.0/255.0, green: 153.0/255.0, blue: 153.0/255.0, alpha: 1.0),
UIColor.init(red: 0.0/255.0, green: 153.0/255.0, blue: 255.0/255.0, alpha: 1.0),
UIColor.init(red: 51.0/255.0, green: 153.0/255.0, blue: 51.0/255.0, alpha: 1.0),
UIColor.init(red: 51.0/255.0, green: 102.0/255.0, blue: 153.0/255.0, alpha: 1.0),
UIColor.init(red: 157.0/255.0, green: 216.0/255.0, blue: 255.0/255.0, alpha: 1.0),
UIColor.init(red: 194.0/255.0, green: 179.0/255.0, blue: 180.0/255.0, alpha: 1.0),
UIColor.init(red: 141.0/255.0, green: 203.0/255.0, blue: 158.0/255.0, alpha: 1.0)
]
}
return _colors!
}
var currentColor: UIColor {
get { return colors[currentIndex] }
}
}
You can construct the object inside of your view now by:
private(set) var colorLibrary: ColorLibrary = ColorLibrary()
Accessing the color inside of your draw:
colorLibrary.currentColor.setFill()
At button press you may call now:
cardView.colorLibrary.increaseIndex()
cardView.setNeedsLayout()
I'm trying to modify the colour of a UIButton in Swift using the code below:
struct ColorWheel {
let colorsArray = [
UIColor(red: 90/255.0, green: 187/255.0, blue: 181/255.0, alpha: 1.0), //teal color
UIColor(red: 222/255.0, green: 171/255.0, blue: 66/255.0, alpha: 1.0), //yellow color
UIColor(red: 223/255.0, green: 86/255.0, blue: 94/255.0, alpha: 1.0), //red color
UIColor(red: 239/255.0, green: 130/255.0, blue: 100/255.0, alpha: 1.0), //orange color
UIColor(red: 77/255.0, green: 75/255.0, blue: 82/255.0, alpha: 1.0), //dark color
UIColor(red: 105/255.0, green: 94/255.0, blue: 133/255.0, alpha: 1.0), //purple color
UIColor(red: 85/255.0, green: 176/255.0, blue: 112/255.0, alpha: 1.0), //green color
]
func randomColor() -> UIColor {
var unsignedArrayCount = UInt32(colorsArray.count)
var unsignedRandomNumber = arc4random_uniform(unsignedArrayCount)
var randomNumber = Int(unsignedRandomNumber)
return colorsArray[randomNumber]
}
}
var colorWheel = ColorWheel()
var randomColor = colorWheel.randomColor()
view.backgroundColor = randomColor
myButton.setTitleColor(randomColor, forState: .Normal)
This code will work perfectly when changing the background colour, but when I try to use the setTitleColor method, I get the following error:
(UIButton) -> 0' does not have a member named 'setTitleColor'