#hoodsdream

Hey what's up everyone! Hope ya'll been staying humble and tryna learn something new everyday. I know It's hard to stay consistent but If these up and coming rappers can post outside of shopping malls all day with a mediocre flow and a cd player, we can definitely sit at our Macbooks and chill with a lil tutorial (whatever that means lol).

Today we're going to build a basic app that displays the multiplications table for a number given to us by our UISlider! 

As Dan Dotson from Storage Wars would say, "Are you ready? Let's go!"

First we're going to open up XCode and select, Create New Project

Select** Single View Application**

We'll call our Product Name: TimesTables

(I'm going to call it TimesTabless because I already have a project named TimesTables) 

Also leave "Use Core Data" checkbox unchecked!

Once you have all that we can click Next

After that we should be presented with a nice blank project including a ViewController.swift hooked up to our View begging to be modified! 

But before we start coding, lets first look inside the Main.storyboard file! It should be on your left hand side under the ViewController.swift file.

Your screen should look like this:

Make sure your Utilities Pane is open (the farthest icon on the top right corner should be highlighted like in the photo above) use those icons to show or hide those panes. When that pane is revealed make sure that your Object Library is selected (the small square inside the circle)

When you have that open, you can scroll down or use the text field on the bottom to search for the Slider object. Once you find the Slider, you can click and drag it to the View Controller.

Drag the slider towards the top of the View Controller and expand it so that it can go across the the top of the screen.

Now if you don't know about Auto Layout, it's Apple's way of helping developers manage screen sizes across multiple devices. 

For that we use Constraints. We give an object constraints to have them clipped to certain objects or the screen, so that no matter what device the user is on the object will always be, for example, the same distance from the top of the screen. 

It's very easy to add a constraint to an object. Simply click on the object in this case our Slider and look for the small "hieroglyphic" type icons on the bottom right of our Main.storyboard. Click on the second one that looks like a spaceship.

To keep our Slider consistent across multiple devices we clip our slider to the top distance of the screen, the left and right side as well. To do that we have to highlight those distances by clicking on the small red lines. Then click on Add 3 Constraints

Now when we run this project on our simulator the slider will take up the same amount of screen on any device or rotation.

Now how do we actually use this slider?

Let's close our Utilities Pane by un-highlighting the small icon farthest to the right on the top right corner of our project window. 

Now slightly to the left of those 3 icons is yet another set of 3 icons. 

Click on the Assistant Editor (the tuxedo icon or the two circle icon if your Mac is running Yosemite) to connect our Slider to our code.

Your screen should look something like this

If it does then congratulations, you puttin' in work like those up and coming rappers outside Fox Hills Mall!

To use our slider in code we have to create an IBOutlet for it. 

To do that we have to CTRL-Click and drag to our ViewController.swift file! Make sure to drag inside our class and above the viewDidLoad method

For your connection type choose: Outlet

Name: sliderValue

Type: UISlider

Storage: Weak

Click Connect

Then we're going to make another connection on the same slider object but this time make sure the Outlet type is Action! 

Name: sliderMoved

Your screen should look like this now:

Now let's close our Assistant Editor and go back to our Standard Editor.

Let's go back to our Main.storyboard file and drag a Table View item from our Objects menu to our View Controller, just like how we added the Slider.

Also you guys are smart now, make sure that you expand the** Table View to take up the whole screen below the slider and add Constraints just like we did before, except this time to all 4 sides.**

COOL! Now we got a lil table view and a lil slider chillin on the screen that both use Auto-Layout to manage multiple screen sizes. 

Before we move on make sure have your Utilities Pane open and set the Prototype Cells to 1

Click on that cell and set the Identifier to "Cell"

Also make sure that you set the Delegate and Datasource of the Table View by CTRL-Click and drag the Table View to our view (small yellow circle on top of view controller)

You should have this now 

Okay, now let's focus on this Table View that we just added. Let's open up our ViewController.swift file and add a UITableViewDelegate

This just tells the View Controller that it is responsible for the Table View. Once we add that Delegate to our ViewController class. We have to add our Table View Delegate Methods.

https://gist.github.com/8d5250ffcb820c6be866.git

Add these two delegate methods above your viewDidLoad. You should have some errors but don't worry we'll make those go away right now (:

Usually our numberOfRowsInSection method counts a set of data and returns that value but for now we're just going to return an Integer (20).

Your numberOfRowsInSection method should look like this

https://gist.github.com/7e1a78c15277a942bfeb

Once you have that we can start tweaking our cellForRowAtIndexPath method. First we're going to create a UITableViewCell object for us to return at the end of the method. After that we're going to create a constant called timesTable. Then we're going to set the text of our cell to our timesTable constant. Sounds a bit confusing but it's not that crazy.

Your cellForRowAtIndexPath method should look like this now.

https://gist.github.com/84a4183d8475c41ae060

If you build your application now you should see this

Cool! We're almost done! Our slider is giving us a stock value of ten, and as we can see it seems to be multiplying 10 x (the index of the cell). Let's slide the slider and...wait?! It doesn't change the text of all the cells!!

To fix that all we have to do is reload the table data every time we move the slider! But to do that we have to be able to call on our Table View directly.

Let's create an outlet for our for our Table View. 

CTRL-Click and drag to our ViewController.swift 

So now we need to update our table data every time our slider gets moved.

Oh yeah don't we have a sliderMoved function?

let's reload our table data every time the sliderMoved is executed !

Your sliderMoved function should look like this now:

https://gist.github.com/ChristianNavarrete/54124c969d6213f895fe

And if we build our project now we should see our table data update when we move our slider!

Awesome, we did it! But now this 0 is annoying me. That's because our cell index starts at 0. Let's fix that! Let's go back to our cellForRowAtIndexPath method and tweak it a bit. We're just going to add 1 to each cell index so that the count can start at 1 instead of 0.

Your cellForRowAtIndexPath method should look like this now:

https://gist.github.com/ChristianNavarrete/410a907659728b0a3ead

Now you should see something like this:

AWESOME! 

This tutorial might be over but them rappers is still tryna slang mixtapes outside of Fox Hills Mall as we speak. We must always show respect to them and their hustle. Even if their music sucks, you gotta try and match their passion. Some Hood words of wisdom from your Swift teacher lol 

Now we can chill and get back to this Justified album!