hey guys my name's cal and in today's tutorial we're going to be building a
simple table view example using Swift and Xcode in the first part of the tutorial
we're just going to get it working so that it displays a list of shapes
in our table view and then in the second part of the tutorial we're going to work with
a segue so that when you tap on one of the shapes it takes you to a more detailed view of that shape
all right so let's get started i'm just going to create a new Xcode project
it's a single view application i'm going to call it table view example
and we don't need to use core data or unit tests or anything like that
i'm just going to rename our main view controller i'm going to call it table view controller
i'm going to create a new file it's going to be a swift file i'm going to call it table view cell
renaming the swift file to table view controller then i'm just going to head into the main
storyboard i'm going to create a new component so i'm just going to type table view and then drag
and drop that in there and then i'm going to right click and add the constraints equal widths equal
heights and center vertical and center horizontal and then we're just going to go in and modify
those constraints so that the multiplier is one so that takes up the whole screen and then next what
we're going to do is just drag in our table view cell and i'm going to change the row height to 100
and then we're just going to name our table view cell so just creating the class table view cell
it's of type UITableView cell and now we can apply that to our table view cell so we're
just clicking on there we're giving it the class of our table view cell not just a generic one
and then we're going to do the same thing for the view controller so rename that to table
view controller for the class so that those links so the swift file is now linked to the component
and then i'm just going to add in an image view put that in our table view cell i'm
just resizing it here so center vertically in the container and give it a width and an aspect ratio
and then i'm just going to edit those constraints trailing space is equal to 20 width is equal to 90
making the multiplier one and then next thing i'm going to do is just add in our images so i'm just
going to select them all and drag and drop into our assets file nice little thing i appreciate
with Swift and Xcode how easy they make that just dragging images into your assets file and
then i'm just going to assign our image just a placeholder so we can see what it looks like
and then i'm going to add a label to our table view cell and just giving it some constraints
i'm going to make the text size 35 so make it quite big and then i'm just going to create a
horizontal spacing to the right but for this one i'm going to say rather than equal to i'm going
to say greater than or equal to 20. so basically what this does i'll show you when you put in a
bunch of text it gives you the three little dots it doesn't overlap the image view it's heading
up the top i'm just going to hit editor and then assistant editor and if you select on your table
you sell if you've got it linked correctly it should just show you the table view cell and
we're just going to import the ui kit because that's why it's giving us that error message if
you right click on the label and you drag into the class we're going to create the outlets for both
the label and the image view and then we're going to click on the table view and do the same thing
as long as we've got it set to automatic and we've got the class connected correctly the assistant
editor should just auto switch to the table view controller now just closing that off and
heading into the table view controller we're just going to make it extend UITableView data source
and UITableView delegate and then if we wait long enough we should get an error message saying
it doesn't conform to protocol and then you're just going to click on the error message to add
the protocol stubs getting a bit sidetracked i'm actually going to create a new Swift file this is
going to be our shape class so just calling that shape and then i'm just going to type in class
of type shape and i'm going to give it an id of type string and a name also of type string and an
image name also of type string maybe there's a specific Swift name for this but basically we're
going to create a constructor for this so yeah just passing in those three fields and assigning
them so this dot id is equal to id and same for the other two take note that all three i've given
an exclamation mark which is basically saying that they are non-optional you have to provide a name
and id and an image name to create this object so heading back into the table view controller i'm
going to create a shape list so an array of shapes so i'm just declaring that at the top and then i'm
going to create a new method this is called init list and basically i'm just going to populate
the shape list with a bunch of dummy data so maybe you've already got a list sorted so you
don't you could probably skip this step but basically i just want to have something in the
list so i'm just creating an object there i'm calling it circle i'm giving it an id of zero
and the image name is circle and the name is circle so the Swift terminology is to append
the circle to the list but it's really just adding the circle to the list and then i'm just going to
copy and paste down those two lines and change to all the appropriate shapes i'm going to have i've
got five shapes and i'm going to put two of each into our list nice one so for our number of rows
in section method it's quite easy we're just going to return shapeless dot count and then in our cell
for row at index path first thing we're going to do is just create a variable we're going to
say let table view cell equal to table view which is the one that gets passed in through the method
dot dequeueReusableCell with identifier and then i'm going to call this table view cell id and then
i'm just going to copy that and head into our main storyboard and then click on our cell and where
it says identifier copy paste in that there and then we're going to head back into the table view
controller and just say as our table view cell so as our table view cell class and then i'm going to
say let this shape equal to shape list at index path dot row and then we're going to say table
view cell dot shape name dot text is equal to this shape dot id plus a little bit of space plus the
shape and name we've assigned the text for each of our cells each of our rows in our table view next
we're just going to assign the image so i'm just going to say table view cell dot shape image image
is equal to ui image named this shape and i put in name here but it should actually be image name
and then we're just going to return our table view cell so heading back to the main storyboard just
two things i forgot to do we just need to assign our table view to our controller we need to assign
it as a delegate and as a data source so i'm just right clicking on the table view and clicking on
the table view controller and assigning the delegate and the data source earlier we set
the row height on each of our cells to be 100 it actually needs to be set on the table view
not the table view cell so i'm just going back and assigning row height to 100 on the table view and
setting it to automatic on the table view cell and if we build and run this you can see we've got a
populated list um the rectangle is giving us a little bit of drama so i'm just going to rearrange
one of those constraints so i'm just going to set this instead of being greater than or equal to
20 i'm going to say zero i'm pretty happy with our table view example at this point next what
we're going to do though is get it so that when you click on one of the shapes it takes you to
a more detailed view controller i think we need to create another view control this is going to
be our detail view controller so just drag that into the storyboard and then i'm going to drag
a label onto it i'm going to leave it a text size of 35 and then i'm going to drag some constraints
so center horizontally in the safe area and top space to the container see my label is not where
it should be so if i just hit this button down the bottom here it just auto corrects the template to
what it is and then i'm going to drag in an image view i'm going to give it an aspect ratio i'm
going to say center horizontally and vertically in the container and then give it a little bit
of trailing space and then just adjust that to 10 and the multiplier of 1 for the aspect ratio so
it's a square and then i'm just going to assign a placeholder image so giving it circle again
and then i'm going to add the change the text to the label to id name because that's what we're
going to put in there and i'm going to say file new Swift file going to name this Swift file table
view detail and then just hit create and then in this file i'm just going to import the ui kit i'm
going to say class table view detail is of type UIViewController and then i'm going to copy and
paste in the override function viewDidLoad() and get rid of the init list because that's obviously
not going to happen on our table view detail and then just heading back into the main storyboard
i'm just going to assign our class to our table view detail so linking again the view controller
to the class and then same thing we're just going to assist the editor and create our outlet for our
name and our image so right click and drag into there from our table view controller i'm going to
create a segue for this you've just got to right click on the table view controller and then drag
onto the table detail controller selecting show as the animation so we want to select
on the segue and just give it an identifier so i'm calling this detail segue next heading into
table view detail dot swift we're just going to create a variable called selected shape
it's of type shape and it is non-optional back into the table view controller we're just going
to write function and then table view and then we're going to scroll down and select did select
row at index path and then we're going to say self dot perform segue with identifier we're going to
give the identifier detail segue which is the one we gave earlier that's what we named that segue
the sender is self so the view controller is sending the segue down below we're just going
to type override function and prepare and then select prepare for segue and then inside that
method we're going to say if segue is equal to detail segue actually it's segue dot identifier is
equal to detail segue we want to find which of the rows have been selected so we're just going to say
let index path equal to self dot shape table view dot index path for selected row so we know which
number has been selected from the row and then we're going to create our destination so our table
view detail and we're just going to say segue dot destination as table view detail because that's
where we're going to that view controller and then we say let's selected shape equal to shape list
is index path dot row so we know which shape based on our list and then we're going to say
table view detail dot selected shape is equal to selected shape so passing the selected shape from
this view controller into the next and then i'm going to say self dot shape table view deselect
row at index path and then just fixing that up i said segue description not destination and then
finally we're just going to head into the table view detail and all we need to do is assign the
name text to our selected shape id and name and then also assign the image from our selected shape
and if we give this one more build and run you can see it all seems to be working correctly you can
click on a shape and it will show you a detailed view version of that shape that's a table view
example if you like the video remember to like and subscribe and i'll catch you guys in the next one
cheers