Second app that i have developed on IOS platform.
This is my second app on IOS platform. I support the idea that “The best way to learn is to make it”. So I open Xcode and create a new project with the name “CalculateMe”. And here we are a blank design and code page.
This time i plan to make a Calculator app. It will be a simple calculator. It can make Summation, Subtraction, Multiplication and Division. Before start to code, I draw a very simple calculator on a screen. There will be Buttons for Numbers, Calculations(Sum, Subtraction ,etc.), Reset, Decimal and Plus/Minus operations. Also there will be 2 line screen bottom line will show the current number entering by the user and the upper line will show the history.
I put the Buttons for Numbers and Calculations also I put two label for Screen part. Also I add some visualization stuff to see some color when I run the programm. I add some constraints like numbers should be shown like dial numbers. And the calculations should be vertically aligned. Then I push Cmd + R to see my perfect design and Bammm !!! The worst designed app on literature.
I don’t hope see an Apple Native Calculator app screen, but don’t hope to see a mess either. When I make the design on Storyboard, I put numbers on a View object also I put calculations on another View object. That was not useful as you can see from the result.
I search internet to solve my problem and I discover Stack Views. With Stack Views you can group your object on Vertical or Horizontal aligned. I think this is the most useful design tool for mobile applications. And as I learned this is the only way to make my app looks like my simple design. If you know any other useful ways please let me know on the comments.
I put my numbers on three vertical stack views. Than i put reset button (AC) and number on two horizontal stack views. This creates my Number part on my sketch design. Than i put my calculations on a vertical stack views. And leave the Screen part inside a view object; as it will stay on the same position either on landscape and portrait mode.
As i tested my design on landscape and portrait mode (because I planned to use calculator in both orientation) and it works perfect.
After that i start to make it look better and also make the calculation algorithm.
//Design Part StartplusButton.layer.cornerRadius = plusButton.frame.size.height/4minusButton.layer.cornerRadius = plusButton.frame.size.height/4multiplyButton.layer.cornerRadius = plusButton.frame.size.height/4divideButton.layer.cornerRadius = plusButton.frame.size.height/4buttonEqual.layer.cornerRadius = plusButton.frame.size.height/4buttonReset.layer.cornerRadius = plusButton.frame.size.height/4buttonZero.layer.cornerRadius = plusButton.frame.size.height/4buttonOne.layer.cornerRadius = plusButton.frame.size.height/4buttonTwo.layer.cornerRadius = plusButton.frame.size.height/4buttonThree.layer.cornerRadius = plusButton.frame.size.height/4buttonFour.layer.cornerRadius = plusButton.frame.size.height/4buttonFive.layer.cornerRadius = plusButton.frame.size.height/4buttonSix.layer.cornerRadius = plusButton.frame.size.height/4buttonSeven.layer.cornerRadius = plusButton.frame.size.height/4buttonEight.layer.cornerRadius = plusButton.frame.size.height/4buttonNine.layer.cornerRadius = plusButton.frame.size.height/4buttonDecimal.layer.cornerRadius = plusButton.frame.size.height/4buttonPlusMinus.layer.cornerRadius = plusButton.frame.size.height/4buttonZero.layer.borderWidth = 1buttonZero.layer.borderColor = CGColor.init(srgbRed: 0, green: 0, blue: 0, alpha: 1)self.buttonZero.backgroundColor = UIColor.darkGraybuttonOne.layer.borderWidth = 1buttonOne.layer.borderColor = CGColor.init(srgbRed: 0, green: 0, blue: 0, alpha: 1)self.buttonOne.backgroundColor = UIColor.darkGraybuttonTwo.layer.borderWidth = 1buttonTwo.layer.borderColor = CGColor.init(srgbRed: 0, green: 0, blue: 0, alpha: 1)self.buttonTwo.backgroundColor = UIColor.darkGraybuttonThree.layer.borderWidth = 1buttonThree.layer.borderColor = CGColor.init(srgbRed: 0, green: 0, blue: 0, alpha: 1)self.buttonThree.backgroundColor = UIColor.darkGraybuttonFour.layer.borderWidth = 1buttonFour.layer.borderColor = CGColor.init(srgbRed: 0, green: 0, blue: 0, alpha: 1)self.buttonFour.backgroundColor = UIColor.darkGraybuttonFive.layer.borderWidth = 1buttonFive.layer.borderColor = CGColor.init(srgbRed: 0, green: 0, blue: 0, alpha: 1)self.buttonFive.backgroundColor = UIColor.darkGraybuttonSix.layer.borderWidth = 1buttonSix.layer.borderColor = CGColor.init(srgbRed: 0, green: 0, blue: 0, alpha: 1)self.buttonSix.backgroundColor = UIColor.darkGraybuttonSeven.layer.borderWidth = 1buttonSeven.layer.borderColor = CGColor.init(srgbRed: 0, green: 0, blue: 0, alpha: 1)self.buttonSeven.backgroundColor = UIColor.darkGraybuttonEight.layer.borderWidth = 1buttonEight.layer.borderColor = CGColor.init(srgbRed: 0, green: 0, blue: 0, alpha: 1)self.buttonEight.backgroundColor = UIColor.darkGraybuttonNine.layer.borderWidth = 1buttonNine.layer.borderColor = CGColor.init(srgbRed: 0, green: 0, blue: 0, alpha: 1)self.buttonNine.backgroundColor = UIColor.darkGraybuttonDecimal.backgroundColor = UIColor.init(red: 1, green: 0.83, blue: 0.36, alpha: 1)buttonPlusMinus.backgroundColor = UIColor.init(red: 1, green: 0.83, blue: 0.36, alpha: 1)//Design Part End
The huge code above is all about making buttons look better :) I assign every single button on a different variable. Than I make them beautiful round and assign them a background color.
ALGORITHM TIME
After ending the deisgn part. I start to make the algorithm. There are 6 different function on my calculator app.
First one is buttonTapped function (0,1,2,3,4,5,6,7,8,9 buttons). If the user click one of the numbers, the number should be shown on the screen.
Second we have a decimal function (, button)to create float numbers.
Third we have plus or minus function (+/- button) to create minus signed numbers.
Fourth we have calculation functions (+, -, /, x buttons). According to selection of calculation, program makes the calculation of two numbers entered by the user. User can see the previously entered number on the upper line of the screen. Also the selected calculation button’s background will be different from other buttons.
Fifth we have equal function to see the result of the calculation.
And last we have reset function (AC button) to reset everything.
I create the algorithm according to the native calculator app. Of course I had some bugs after. Then make another commit to Github. You can find what are the bugs i discovered on commits part of the repository. Also you can find the code and other files on my Github profile i shared below.
Thank you for reading and please share your thoughts on Github or leave comments here. Happy Coding :)
Github Link : https://github.com/volkansahn/CalculateMe
