Multiplications Table app

Ok, this app will be just an example of how to create things programmatically, without
using the Auto Layout or any of the other fancy things within XCode.
It’s a very simple app, but to me it was a very good experience learning to build and troubleshoot things directly in code.
The app will look something like that at the end:

I will break down some of the code here:

First we are going to create all the variables, views and labels we are planning on using:

 // Create Properties
    
    
    var numberLabel: UILabel!
    var numberBarView: UIView!
    var sliderBarView: UIView!
    var numberSlider: UISlider!
    var textView: UITextView!
    
    var number: Int = 10
    var minValue: Int = 1
    var maxValue: Int = 120

// Create Properties

var numberLabel: UILabel!

var numberBarView: UIView!

var sliderBarView: UIView!

var numberSlider: UISlider!

var textView: UITextView!

var number: Int = 10

var minValue: Int = 1

var maxValue: Int = 120

Getting the screen size of the device( in case we need it or just for fun ):

 // get size info
        println("Screen size bounds: (UIScreen.mainScreen().bounds)")
        println("Screen scale: (UIScreen.mainScreen().scale)")

// get size info

println("Screen size bounds: (UIScreen.mainScreen().bounds)")

println("Screen scale: (UIScreen.mainScreen().scale)")

Creating variables for later use with the current device Width and Height:

    // width
        let screenWidth = UIScreen.mainScreen().bounds.size.width
        
    //height
        let screenHeight = UIScreen.mainScreen().bounds.size.height

// width

let screenWidth = UIScreen.mainScreen().bounds.size.width

//height

let screenHeight = UIScreen.mainScreen().bounds.size.height

Creating a text label to display the slider value and making it round:

// text label

numberLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 60, height: 60))
numberLabel.backgroundColor = UIColor.orangeColor()

numberLabel.text = "10"
numberLabel.textAlignment = NSTextAlignment.Center
numberLabel.font = UIFont.boldSystemFontOfSize(32)

numberLabel.layer.cornerRadius = 20 // in case you want to make it a circle make the radius to be equal half of the width/height value, in this case it would be 30 to make it a circle...

numberLabel.clipsToBounds = true

// text label

numberLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 60, height: 60))

numberLabel.backgroundColor = UIColor.orangeColor()

numberLabel.text = "10"

numberLabel.textAlignment = NSTextAlignment.Center

numberLabel.font = UIFont.boldSystemFontOfSize(32)

numberLabel.layer.cornerRadius = 20 // in case you want to make it a circle make the radius to be equal half of the width/height value, in this case it would be 30 to make it a circle...

numberLabel.clipsToBounds = true

Animating the label:

//animate Number Label
        let numberEndX = numberLabel.frame.origin.x
        let numberStartX = numberEndX - screenWidth
        
        numberLabel.frame.origin.x = numberStartX
        
        UILabel.animateWithDuration(1.5, delay: 0.4, usingSpringWithDamping: 0.6, initialSpringVelocity: 0.4, options: nil, animations: {
            
            self.numberLabel.frame.origin.x = numberEndX
            
        }, completion: nil)

//animate Number Label

let numberEndX = numberLabel.frame.origin.x

let numberStartX = numberEndX - screenWidth

numberLabel.frame.origin.x = numberStartX

UILabel.animateWithDuration(1.5, delay: 0.4, usingSpringWithDamping: 0.6, initialSpringVelocity: 0.4, options: nil, animations: {

self.numberLabel.frame.origin.x = numberEndX

}, completion: nil)

Here is how we are creating the UISlider:

 // UISlider
        
        numberSlider = UISlider(frame: sliderBarView.bounds)
        
        numberSlider.minimumValue = Float(minValue)
        numberSlider.maximumValue = Float(maxValue)
        numberSlider.value = Float(number)
        
        numberSlider.minimumTrackTintColor = UIColor.greenColor()
        numberSlider.maximumTrackTintColor = UIColor.blueColor()
        
        
        sliderBarView.addSubview(numberSlider)
        view.addSubview(numberBarView)          // add BarView here so it's on top of the slider !
        
        // target the slider
        
        numberSlider.addTarget(self, action: Selector("numberSliderChanged:"), forControlEvents: UIControlEvents.ValueChanged)

// UISlider

numberSlider = UISlider(frame: sliderBarView.bounds)

numberSlider.minimumValue = Float(minValue)

numberSlider.maximumValue = Float(maxValue)

numberSlider.value = Float(number)

numberSlider.minimumTrackTintColor = UIColor.greenColor()

numberSlider.maximumTrackTintColor = UIColor.blueColor()

sliderBarView.addSubview(numberSlider)

view.addSubview(numberBarView) // add BarView here so it's on top of the slider !

// target the slider

numberSlider.addTarget(self, action: Selector("numberSliderChanged:"), forControlEvents: UIControlEvents.ValueChanged)

Very important, here is the code that actually fills out the text view with all the calculations:

func generateMultiplicationTable(value: Int) -> String {
        
        var output: String = ""
        
        for i in minValue...maxValue {
            output += "(i) x (value) = (i * value)n" // 'n' at the end to get a new line for each 'i' output
            
        }
        
        
        return output
        
    }

func generateMultiplicationTable(value: Int) -> String {

var output: String = ""

for i in minValue...maxValue {

output += "(i) x (value) = (i * value)n" // 'n' at the end to get a new line for each 'i' output

}

return output

}

And we are going to use that function within the function for the Slider Change:

func numberSliderChanged(slider: UISlider) {
        
        number = Int(slider.value)
        numberLabel.text = "(number)"
        
        textView.text = generateMultiplicationTable(number)
        
    }

func numberSliderChanged(slider: UISlider) {

number = Int(slider.value)

numberLabel.text = "(number)"

textView.text = generateMultiplicationTable(number)

}

We also use the generateMultiplicationTable function when we first format the text view area, so we can fill it out with all the data, based on the initial number we’ve picked( the initial slider value in our case ):

// text view
        
        let textViewY = sliderBarView.frame.origin.y + sliderBarView.frame.size.height
        let restOfHeight = (screenHeight - textViewY)
        
        textView = UITextView(frame: CGRect(x: 0, y: textViewY , width: screenWidth, height: restOfHeight))
        textView.backgroundColor = UIColor.grayColor()
        view.addSubview(textView)
        
        
        textView.text = "Line 1 n Line2 n Line3"
        textView.font = UIFont.systemFontOfSize(20)
        textView.textAlignment = NSTextAlignment.Center
        
        
        textView.text = generateMultiplicationTable(number)
        textView.editable = false

// text view

let textViewY = sliderBarView.frame.origin.y + sliderBarView.frame.size.height

let restOfHeight = (screenHeight - textViewY)

textView = UITextView(frame: CGRect(x: 0, y: textViewY , width: screenWidth, height: restOfHeight))

textView.backgroundColor = UIColor.grayColor()

view.addSubview(textView)

textView.text = "Line 1 n Line2 n Line3"

textView.font = UIFont.systemFontOfSize(20)

textView.textAlignment = NSTextAlignment.Center

textView.text = generateMultiplicationTable(number)

textView.editable = false

You can find the complete code on GitHub here:

Multiplications App – Custom Views on GitHub

Here you can test it ( portrait only ):

Tagged with

helpMeCodeSwift.com

Swift Coding For Beginners

Like this:

animation app calculator function ios ios8 iphone multiplication programmatically radius round slider swift table uislider uiview xcode

One thought on “Multiplications Table app”

Share this:

Like this:

animation app calculator function ios ios8 iphone multiplication programmatically radius round slider swift table uislider uiview xcode

One thought on “Multiplications Table app”