I use the third party SwiftAlertView class(https://github.com/dinhquan/SwiftAlertView) and update Swift from 2.3 to 3.When I complied, the app and I found the error message as following.
Binary operator '+' cannot be applied to operands of type 'Double' and 'Double!'
The code is following. The titleTopMargin and titleToMessageSpacing are Double!That can't add Double(titleLabel.frame.size.height).
let topPartHeight = (contentView == nil) ? (titleTopMargin + Double(titleLabel.frame.size.height) + titleToMessageSpacing + Double(messageLabel.frame.size.height) + messageBottomMargin) : Double(contentView!.frame.size.height)
The definition is following.
// customize the margin & spacing of title & message
open var titleSideMargin: Double! // default is 20 px
open var messageSideMargin: Double! // default is 20 px
open var titleTopMargin: Double! // default is 20 px
open var messageBottomMargin: Double! // default is 20 px
open var titleToMessageSpacing: Double! // default is 10 px
How do I fix the problem? Thanks.
Thanks everybody for giving me suggestion.
These variables still need to use Double. So I need to update the following code.
open var titleSideMargin: Double = 20.0
open var messageSideMargin: Double = 20.0
open var titleTopMargin: Double = 20.0
open var messageBottomMargin: Double = 20.0
open var titleToMessageSpacing: Double = 10.0
UIKit and CoreGraphics always use CGFloat for size, they never use to Double type. So, I think we should use to CGFloat here.
Exactly as #Rahul answers. So set type to CGFloat:
var titleSideMargin: CGFloat = 20.0
var messageSideMargin: CGFloat = 20.0
var titleTopMargin: CGFloat = 20.0
var messageBottomMargin: CGFloat = 20.0
var titleToMessageSpacing: CGFloat = 10.0
let topPartHeight = (contentView == nil) ? (titleTopMargin + titleLabel.frame.size.height + titleToMessageSpacing + messageLabel.frame.size.height + messageBottomMargin) : contentView!.frame.size.height
Related
I want to achieve the following effect, shown below in my iOS app (written in Swift)
So far I have been able to achieve this, using Charts by danielgindi. But I am not able to get the desired effect as I want to. Is there any way to add rounded corners to each Pie Chart slice like in this example image here?:
My Chart setup is as follows:
let data1 = PieChartDataEntry(value: 3)
let data2 = PieChartDataEntry(value: 5)
let data3 = PieChartDataEntry(value: 4)
let data4 = PieChartDataEntry(value: 6)
let data5 = PieChartDataEntry(value: 8)
let values = [data1, data2, data3, data4, data5]
let chartDataSet = PieChartDataSet(entries: values, label: nil)
let chartData = PieChartData(dataSet: chartDataSet)
let colors = [UIColor.fuelTintColor, UIColor.maintenanceTintColor, UIColor.insuranceTintColor, UIColor.fastagTintColor, UIColor.miscTintColor]
chartDataSet.colors = colors as! [NSUIColor]
chartDataSet.sliceSpace = 10
pieChart1.data = chartData
pieChart1.holeRadiusPercent = 0.8
I think it can be done using the PieChartRenderer but I have no idea how I should proceed.
Also, if you have any suggestions for other ways to implement this do let me know.
Solved it, and here's the output:
ring-chart-img
Basically I am using this library, called CircularProgressView (https://cocoapods.org/pods/CircleProgressView) to achieve the individual rings. Since I needed 5 rings, I stacked 5 such views (with clear background) on top of each other and rotated them to achieve my desired effect.
Cocoapod setup
First, you have to install the CircularProgressView pod in your project. I am using Cocoapods for importing the library here.
NOTE: If you do not have Cocoapods setup already then you need to install Cocoapods first using steps here: https://guides.cocoapods.org/using/getting-started.html
To add it using Cocoapods, add the following line in your Podfile.
pod 'CircleProgressView'
and run pod install on the Terminal from within your project directory.
Interface Builder
In your Storyboard file, go to your View Controller and add a view and set its contents. You can also create this view programmatically but here I will be using the storyboard.
Create 4 more views and use Auto Layout to stack them on top of one another.
Select all 5 views and go to the Identity Inspector (right panel in storyboard, 4th item in top bar).
Set the Class field value (under Custom Class) as 'CircularProgressView'.
Link all 5 views to your ViewController.swift file.
I have named them as follows:
#IBOutlet weak var pieChart1: CircleProgressView!
#IBOutlet weak var pieChart2: CircleProgressView!
#IBOutlet weak var pieChart3: CircleProgressView!
#IBOutlet weak var pieChart4: CircleProgressView!
#IBOutlet weak var pieChart5: CircleProgressView!
Call the function showRingChart() in viewDidLoad() to setup the views.
Here is the code for the functions:
// Function to convert degrees to radian
func degToRad(_ rotationDegrees: Double) -> CGFloat {
let rotationAngle = CGFloat(rotationDegrees * .pi/180.0)
return rotationAngle
}
// Function to Show Ring Chart
func showRingChart() {
// Values for the graph, can be changed as per your need
let val1 = self.val1
let val2 = self.val2
let val3 = self.val3
let val4 = self.val4
let val5 = self.val5
let totalVal = (val1 + val2 + val3 + val4 + val5)
var spacing = 0.05 * totalVal // Spacing is set to 5% (ie. 0.05). Change it according to your needs
print("Spacing: ", spacing)
let totalSpacing = 5 * spacing //Total spacing value to be added in the chart
let total = totalVal + totalSpacing //Total corresponding to 100% on the chart
if val1 == 0.0
&& val2 == 0.0
&& val3 == 0.0
&& val4 == 0.0
&& val5 == 0.0 {
// NO DATA, HIDE ALL CHARTS
pieChart1.isHidden = true
pieChart2.isHidden = true
pieChart3.isHidden = true
pieChart4.isHidden = true
pieChart5.isHidden = true
} else {
// DATA AVAILABLE
// Calculate Percentage of each value in the ring chart (ie. progress)
let valOnePerc = (val1 / total)
let valTwoPerc = (val2 / total)
let valThreePerc = (val3 / total)
let valFourPerc = (val4 / total)
let valFivePerc = (val5 / total)
let spacingPerc = spacing / total
// Angle offsets (in degrees)
let offset1 = (valOnePerc + spacingPerc) * 360
let offset2 = (valOnePerc + valTwoPerc + (2 * spacingPerc)) * 360
let offset3 = (valOnePerc + valTwoPerc + valThreePerc + (3 * spacingPerc)) * 360
let offset4 = (valOnePerc + valTwoPerc + valThreePerc + valFourPerc + (4 * spacingPerc)) * 360
print("--- PRINTING CHART VALUES HERE ---- ")
print(total)
print(valOnePerc)
print(valTwoPerc)
print(valThreePerc)
print(valFourPerc)
print(valFivePerc)
print(offset1)
print(offset2)
print(offset3)
print(offset4)
print("------------------")
// Setup ring chart sections
pieChart1.trackFillColor = UIColor.tintColorOne
pieChart1.progress = valOnePerc
pieChart2.trackFillColor = UIColor.tintColorTwo
pieChart2.progress = valTwoPerc
pieChart2.transform = CGAffineTransform(rotationAngle: degToRad(offset1))
pieChart3.trackFillColor = UIColor.tintColorThree
pieChart3.progress = valThreePerc
pieChart3.transform = CGAffineTransform(rotationAngle: degToRad(offset2))
pieChart4.trackFillColor = UIColor.tintColorFour
pieChart4.progress = valFourPerc
pieChart4.transform = CGAffineTransform(rotationAngle: degToRad(offset3))
pieChart5.trackFillColor = UIColor.tintColorFive
pieChart5.progress = valFivePerc
pieChart5.transform = CGAffineTransform(rotationAngle: degToRad(offset4))
// Unhide all charts
pieChart1.isHidden = false
pieChart2.isHidden = false
pieChart3.isHidden = false
pieChart4.isHidden = false
pieChart5.isHidden = false
}
}
It should do it. Change the (val1, val2, ..., val5) values to change the progress of the rings.
I am extremely new to writing code in Swift. Only part way through one book - iOS 10 App Development Essentials by Neil Smyth. But I have a question about setting constants and specifically looking for a maximum of two doubles that were assigned.
I have the following code:
Let Transfer1055 = 10
Let Diameter1: Double = 6.25
Let Diameter2: Double = 8.125
Let CenterDim: Double = 12
Let StructureWidth: Double = 60
Let Rad1 = Diameter1 / 2
Let Rad2 = Diameter2 / 2
Let RadMax = Max(Rad1,Rad2)
The problem I am having is in the last line, I can't get the max() function to work properly. Having Diameter1 set to 6.25 and Diameter2 set to 8.125. This would make Rad1=3.125 and Rad2=4.0625. I want RadMax to equal 4.0625, then I want to use that later in the code, but I can't get it to work.
Any suggestions would help. Thanks!
UPDATE: Thanks for the suggestions. Yes, this is just preliminary code in Playground to try out writing some variables and learning how to use a few math functions.
Works as expected
let transfer1055 = 10
let diameter1: Double = 6.25
let diameter2: Double = 8.125
let centerDim: Double = 12
let structureWidth: Double = 60
let rad1 = diameter1 / 2
let rad2 = diameter2 / 2
let radMax = max(rad1, rad2)
print(radMax) // Prints: "4.0625\n"
Just refactor your code a little:
let transfer1055 = 10
let diameter1: Double = 6.25
let diameter2: Double = 8.125
let centerDim: Double = 12
let structureWidth: Double = 60
let rad1 = diameter1 / 2
let rad2 = diameter2 / 2
let radMax = max(rad1,rad2)
And radMax is equal to rad2.
Where do you have this block on code? In playground it should work. Above viewDidLoad in a viewController it might require you to make the computed variable lazy.
I wish I had more reputation so I could attach a screenshot of what I'm working on but you can see an example in the second link down below.
Basically there is a middle button in the tab bar which brings out option buttons (apple images in this case).
These apple icons are animated to their positions using UIDynamicAnimator and UIAttachmentBehavior.
Here is the code which adds the option buttons
func showOptions() {
var numberOfItems = self.delegate.brOptionsButtonNumberOfItems(self)
//NSAssert(numberOfItems > 0 , "number of items should be more than 0")
var angle = 0.0
var radius:Int = 20 * numberOfItems
angle = (180.0 / Double(numberOfItems))
// convert to radians
angle = angle/180.0 * M_PI
for(var i = 0; i<numberOfItems; i++) {
var csCalc = Float((angle * Double(i)) + (angle/2))
var buttonX = Float(radius) * cosf(csCalc)
var buttonY = Float(radius) * sinf(csCalc)
var wut = (angle * Double(i)) + (angle/2)
var brOptionItem = self.createButtonItemAtIndex(i)
var mypoint = self.tabBar.convertPoint(self.center, fromView:self.superview)
var x = mypoint.x + CGFloat(buttonX)
var y = self.frame.origin.y - CGFloat(buttonY)
var buttonPoint = CGPointMake(x, y)
//println("Button Point of Button Item x:\(x) y: \(y)")
brOptionItem.layer.anchorPoint = self.layer.anchorPoint
brOptionItem.center = mypoint
var attachment = UIAttachmentBehavior(item:brOptionItem, attachedToAnchor:buttonPoint)
attachment.damping = self.damping
attachment.frequency = self.frequency
attachment.length = 1
// set the attachment for dragging behavior
brOptionItem.attachment = attachment
self.dynamicItem!.addItem(brOptionItem)
//if(self.delegate.respondsToSelector("willDisplayButtonItem")) { //Fix me
//self.delegate.brOptionsButton(self, willDisplayButtonItem:brOptionItem)
//}
self.tabBar.insertSubview(brOptionItem, belowSubview: self.tabBar)
self.dynamicsAnimator!.addBehavior(attachment)
self.items.addObject(brOptionItem)
}
}
func createButtonItemAtIndex(indexz:NSInteger) -> BROptionsItem {
println("Create button item at index")
var brOptionItem = BROptionsItem(initWithIndex:indexz)
brOptionItem.addTarget(self, action:"buttonItemPressed:", forControlEvents:.TouchUpInside)
brOptionItem.autoresizingMask = UIViewAutoresizing.None
var image = self.delegate.brOptionsButton(self, imageForItemAtIndex:indexz)
//if((image) != nil) {
brOptionItem.setImage(image, forState: UIControlState.Normal)
//}
/*
var buttonTitle = self.delegate.brOptionsButton(self, titleForItemAtIndex:indexz)
if(buttonTitle.utf16Count > 0) {
brOptionItem.setTitle(buttonTitle, forState:UIControlState.Normal)
}
*/
return brOptionItem;
}
In showOptions the animator is assigned an attachment behavior for a brOptionItem that was just created when createButtomItemAtIndex was called.
In createButtonItemAtIndex, the brOptionItem is created and a target was added to execute a function when the button was tapped.
The option buttons work without the animation. I can click them and the target function is executed.
However, when the animation is added and the option buttons are placed where they are, nothing happens when the buttons are tapped.
I am extremely stuck on this. I have no idea why the animation stops the tapping actions. The buttons are supposed to be draggable as well.
Here is my source code. The code I reference can be see in the BROptiosnButton file.
https://github.com/WobbleDev/BROptionsSwift
Here is the reference code I used
https://github.com/BasheerSience/BROptionsButton
Thanks!
I'm trying to make a grid view on iOS with adaptive column width.
On Android it's possible to do this by setting stretchMode attribute to spacingWidth .
This attribute take the cell width as minimum width and grow cell automatically if there is free space available but no enough to add another column keeping the same space between column everywhere.
I didn't found any way to do that on iOS.
It look like that (left image) on iPhone 6, but on iPhone 5 (right image) the space is very big and ugly. I wan't to auto resize cells to avoid this big space.
How can i do that on iOS ?
(I'm using Xcode 6.1)
Thanks
EDIT :
This i why i wan't (black space is approximatively desired additional cell width, sorry my draw is ugly I did it quickly)
EDIT 2:
I tried to calculate new size with this code, but the result is "strange" (wrong size, position) , i think i missed something
let CELL_SIZE : Float = 92
let CELL_MARGIN : Float = 10
let COLLECTION_VIEW_MARGIN : Float = 20 //Left right margin
let screenWidth = Float(UIScreen.mainScreen().bounds.width)
let numberOfCell = Float(Int(screenWidth / (CELL_SIZE + CELL_MARGIN + COLLECTION_VIEW_MARGIN)))
let oldCellSize = Float(cell.frame.width)
var newCellSize : Float
if(numberOfCell >= 2){
newCellSize = (screenWidth / numberOfCell) - (CELL_MARGIN * (numberOfCell-1))
} else {
newCellSize = (screenWidth / numberOfCell) }
let indexPathRow = Float(indexPath.row)
var xOffsetMultiplier = indexPathRow % numberOfCell
if(xOffsetMultiplier == 0){
xOffsetMultiplier = numberOfCell
}
var newX : Float = 0
if(xOffsetMultiplier == 1){
newX = COLLECTION_VIEW_MARGIN / 2
} else {
newX = (newCellSize + CELL_MARGIN) * (xOffsetMultiplier-1) + (COLLECTION_VIEW_MARGIN / 2)
}
var frame = CGRectMake(CGFloat(newX), cell.frame.minY, CGFloat(newCellSize), cell.frame.height)
cell.frame = frame
This code is written in func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell in my ViewController
You should use UICollectionViewFlowLayout to adopt cell size according to collection view size.
Open this JS Fiddle Link. There are two paths which are animating. the dark blue bar animates according to minutes passed & the smaller green bar animates according to seconds. I want to loop this animations when they complete their animation. How can I do that?
JS Fiddle Link
window.onload= function aa () {
var paper = Raphael(0, 0, 1900, 1900);
var date = new Date;
var hour = date.getHours();
var mins = date.getMinutes();
var secs = date.getSeconds();
var secl = (60*60*1000)-(secs*1000);
var minl = 60 - mins;
var crx = 318*(mins/60);//sets width according to minutes passed when window is loaded
var cry = 318*(secs/60);//sets width according to seconds passed when window is loaded
var sec1 = (60-secs)*1000;
var x=1;
var y=1;
var pathhh = "M"+x+","+y+" "+"h"+320+" "+"v"+270+" "+"h"+(-320)+"z";//bg
var curbox = paper.path(pathhh).attr({fill:'315-#0299fa-#0473ba'});
var pathh3 = "M"+(x+1)+","+(242+y)+" "+"h"+318+" "+"v"+27+" "+"h"+(-318)+"z";//black bar
var cur1box = paper.path(pathh3).attr({fill:'black'});
var pathfm = "M"+(x+1)+","+(243+y)+" "+"h"+crx+" "+"v"+20+" "+"h"+"-"+crx+"z";//minutes bar
var pathto = "M"+(x+1)+","+(243+y)+" "+"h"+318+" "+"v"+20+" "+"h"+(-318)+"z";
var cu2box = paper.path(pathfm).attr({fill:'#03558b',stroke:'none'});
cu2box.animate({path: pathto},secl);
var patgfm = "M"+(x+1)+","+(265+y)+" "+"h"+cry+" "+"v"+4+" "+"h"+"-"+cry+"z"; //seconds bar
var patgto = "M"+(x+1)+","+(265+y)+" "+"h"+318+" "+"v"+4+" "+"h"+(-318)+"z";
var cu3box = paper.path(patgfm).attr({fill:'#0db1af',stroke:'none'});
cu3box.animate({path: patgto},sec1);
};
I think this question is relevant, while not quite the same as yours. The question and the answer together contain the solution for your case: use the callback at the end of the animation, reset the path to the original and set the new animation.
Alternatively, use setInterval to reset the animation every minute/hour.