Overlay Objects on TableView! (Swift in Xcode) Video Lecture | Swift in Xcode: The Complete iOS Development Guide - App Development

and what's going on everybody today I'm
going to show you how to add anything
pretty much over a table view capably
just make it a bit different and hard to
actually put things on top of those
today I'm going to show you how to do
that very easily with Swift in Xcode so
let's go ahead and get started alright
so let's go ahead open up Xcode create a
new Xcode project and this will be a
single view applications so go ahead
click Next and our product name I'm just
going to call my in table view although
this really doesn't apply to being a
table view our language will be set to
Swifter devices will be set to universal
click Next and create now let's go ahead
and make this a bit bigger head over to
our main dot storyboard right here and
rich just gonna delete this view
controller on our scene and let's go
ahead and add a table view like so now
let's also open up our assistant editor
now as you can see this assistant editor
is not connected with anything on our
main dot storyboard so let's go over
here go to manual and we're just gonna
change it up to our view controller dot
Swift now inside of our view controller
dot Swift as you can see we have our
class view controller UI view controller
we want to change this over to UI table
view controller so now we'll be able to
actually control the table view that we
just created right over here and now
let's connect this up so head over to
our table view right here go over to the
attributes inspector and we'll first
want to set this as initial view
controller so now this table view is
going to be the first thing that appears
and then we also want to go over to our
identity inspector and right inside of
the class right here we're gonna change
the CEO over to view controller like so
now if you wanted to add a button it's
not as simple as just clicking and
dragging oh I like this button and I
want it on the scene like so it's not as
easy as that so we need to go ahead and
just add this button program eclis so
let's go into our viewdidload and inside
of this viewdidload we were just going
to first create our button so we're
gonna save our button will be equal to a
UI button and then open parenthesis with
a frame now for a frame we're gonna
change the sequel to a cg rekt like so
and then open parenthesis and we're
going to get the origin and size right
here so the size will be equal to CG
size open parenthesis and this will be a
width of 50 and a height of 50 like so
and then our point at which this will be
is going to be CG point open parenthesis
an X value of self dot view dot frame
dot width divided by two so we're going
to cut this in half and this will be our
origin so we're going to cut the frame
in half and that's where it's going to
be as the width now for the Y value
we're gonna make this equal to self dot
view dot frame dot size dot height like
so and because this is a 50 by 50 square
we're gonna go right here and we're just
going to say plus 50 or actually plus
about 70 that way it's slightly above
the scene it's going to be about right
there so now let's add some color to
this button so let's say button dot
background color will be equal to and
this is going to be equal to a UI color
you can make this whatever you want I'm
going to make mine a UI color dot black
color like so now in order to add this
button on to our scene let's head back
over to our main dot storyboard right
here in this table view right here we
are not able to add this button straight
on to the table view itself so in order
to add this button we just need to click
and drag a navigation controller onto
our scene like so we can delete the
second the root view controller that I
created alongside with the navigation
controller then we take this navigation
controller right click or control click
and drag from your navigation controller
to the view controller that we created
and this will be our root view
controller like so now this still will
work because we actually need to click
and drag this arrow so it says this
navigation controller is the initial
view controller now so now that's going
to load the navigation controller first
now down here inside of our viewdidload
we say self dot navigation controller
dot view dot to add sub view and we're
going to add the sub view of our button
that we created now you can do this with
other things other than buttons like
just apply this to whatever thing you
can think of this is going to work with
that but for button it's just a simple
demonstration so I'm going to say self
dot navigation controller dot view dad
sub view and I'm going to add the button
so now if we were to build and run this
now I actually did mess up on the
calculations let's head back over to our
frame top size the height plus 70 this
should actually be minus so if we were
to build and run this now as you can see
we have this button right here now if
you want to make it more Center you can
go ahead and go back here we have the CG
rec the origin is
self dot view dot framed up width
divided by two but you may need to say
minus twenty five in order to actually
get it smack-dab in the center so now
let's build it run and there you have it
now our button is some active in the
center there now I showed you how to do
this with a button but pretty much you
can apply this to anything so if we were
to add this say to a UI image we could
save our image will be equal to a UI
image view open parenthesis I'm just
gonna give it the frame of our self dot
view dot frame dot frame like so and
then I'm going to say image dot
background color I'm going to set this
equal to a UI color dot blue color and
the Ray also can say the image dot alpha
will be equal to 0.5 or something like
that so we can still see our table view
then we're going to say self dot
navigation controller dot view dot add
sub view and we're going to add the sub
view of our image so if we were to
building on this as you can see I just
created this overlay for my table view
so you can apply this to pretty much
anything you want thank you all so much
for watching if you enjoyed this
tutorial be sure to hit that like button
down below and if you want to see more
tutorials like this Remy in the future
be sure to subscribe anyway I'll see you
in the next one