hey guys how we doing my name is Cal and in today's Swift and Xcode tutorial we're going to
be creating a simple pop-up picker view our pop-up picker view is going to display a list of colors
and once the user selects a color we're going to change the background of our view to match
the color that the user selected to achieve this we're just going to nest a ui picker view inside
an alert dialog and i'll show you how to get that all working so we've got a working example by the
end of this tutorial in the final part of the tutorial i'll give an example of how you can
put two components inside the one picker view so we'll have one component to select the background
color and another component to select the text color it's not too much more work once you've got
the picker view implemented to make it work for multiple components by the end of this tutorial
hopefully you'll have a working pop-up picker view you'll have learnt some things about how to
use ui picker views as well as alert dialogues and stack views with all that said let's get started
first things first new Xcode project this is an iOS app we're building i'm going to give it a name
of pop-up picker tutorial selecting our interface storyboard and our programming language is swift
and then we're just going to pop into the main storyboard add in a horizontal stack view we're
going to change the background color of our stack view so just change it to whatever color you like
but i'm going to choose this light gray color next we're going to drag in a button into our
horizontal stack view and then i'm just going to hit copy and paste on that button so that
there's now two buttons inside our horizontal stack view the second button i'm going to select
an image i'm just going to select this down arrow image remove the text change the render mode to
original so that it's black next we're just going to change the text to white this is going to be
the default color of the background making the font a little bigger and heavy i'm just going
to give our stack view some constraints so i'm going to give it equal width top space and center
horizontally in the container we can now head in and modify those constraints so i'm just making it
40 a massive difference there from 39 changing proportional width to 0.75 so that our button
takes up 75 of the screen so we're going to select our stack view set our distribution
to fill proportionately oh and now we just have a tiny bit more styling to do i'm just going to
change the text color of our button to black next we're going to select our horizontal stack view
and we're going to define a runtime attribute key path of layer corner radius we're going to change
the type to number and give it a value of 10. the only thing this runtime attribute does is make our
stack view look a little bit prettier when the application is run it rounds the corners of our
pop-up picker view button cool so i think we're ready to create some outlets so i'm just open up
the assistant editor i'm going to right-click and drag from our first button i'm going to declare
this as picker view button and then i'm going to drag below our view did load and create an action
i'm going to call this pop-up picker then from that action we're going to drag and click onto
our second button so the both buttons are linked to the same function nice one so we can close that
off and head into our main view controller player a variable i'm going to call it background colors
this is going to be a dictionary you don't have to use a dictionary here i just figured this would be
one of the easier ways to do it so the first input i'm putting is white because that's our default
background color and so it's got a key of white and a value of ui colored white add in gray blue
yellow green red in that same format next we're going to make our view controller class implement
ui picker delegate as well as ui picker view data source this is going to create some errors
it's going to say that we're not conforming to ui picker view protocol because we don't have these
non-optional functions we're going to hit fix on that error message and that's going to implement
these two functions cool so inside our number of components we're just going to return one for now
and for our number of rows and component functions we're going to return the count of our background
colors dictionary next we want to override row height for component function so i've just started
typing row height and then hit enter that function has appeared and we're going to return 60. so
that's the height of each one of our picker view components the next function we want to override
is view for row function so i've just started typing view for row and same thing once i can see
the function that i'm after i just select and hit enter this function we're going to declare a label
so i'm just saying let label equal to ui label and i'm going to give it a frame frame is the cg rect
and so i've just hit x and we're going to give x y 0 and then with we're going to create declare at
the top because there's going to be a few things we want to give with so i'm just saying let's
screen width equal to ui screen main bounds width and then -10 so it's just not right up against the
edge and then for height we're just going to give it 30. and then we're going to say label
text is equal to array of our background colors row key here we're putting the name of each of
our colors into our picker view and then we just want to say label size to fit next we're going
to head up to the top we're going to declare a variable calling it selected row and its default
value is zero so our default selected row is zero which is our white background and then inside our
pop-up picker function i'm going to declare a view controller and just call it vc vc dot preferred
content size is equal to cg size we're going to give it screen width and then we're also going to
declare a screen height variable we're just going to copy and paste down our screen width and change
it to height and then say divided by two we can now pass in our screen height into our cg size
and then we're going to say let picker view equal to ui picker view we're going to give it a frame
which is also a cg rect and for this one we're going to use x y width and height x and y 0 width
is equal to screen width and height is equal to screen height then we're going to say picker
view data source is equal to self and picker view delegate is equal to self picker view select row
we're going to give it selected row in component 0 so our first component and animated is false this
line is making sure that whatever background color we've already selected when we open it a
second or third time that that background color is the selected component in the picker view
next we're going to say vc view add sub view and giving it our picker view then we're going to say
picker view center x anchor constraint is equal to vc view center x anchor is active is equal to true
and copy and paste down that line and just change it to the y axis and so basically it's a
constraint layout to say that put our picker view in the dead middle of our view controller next
we're going to declare a ui alert controller i've just named it alert it's going to have a title of
select background color we're not going to give it a message and it's preferred style is action
sheet the next few lines are only relevant if the ios app is running on a tablet but basically it's
where the pop-up can pop up from so we're just going to say alert popover presentation source
view is equal to picker view button and alert popover presentation dot source rect is equal to
picker view bounce next we're going to say alert set value for view controller and our key actually
needs to be content view controller not vc key i just got that blatantly wrong alert add action i'm
going to give it a title of cancel and our style is going to be cancelled give it a handler but in
this handler we don't actually need to do anything it will just dismiss the pop-up picker view when
cancel is hit and then we're going to copy and paste that down but change it to select and change
the style to default inside our alert select action self selected row is equal to picker view
selected row component of zero they let selected equal to an array of our background colors at the
position of our selected row color is equal to our selected dictionary value and our name is equal to
our selected dictionary key and then we're going to say view dot background color is equal to color
and as well we're going to say picker view button set title is name for state normal cool and now we
just need to show our alert dialogue picker view and to do this we just say self present alert
animated is true and completion is nil now i'm just going to change that alert value to content
view controller which i should have done earlier as well our dictionary i'm going to make them of
type key value pairs and that's just going to help keep the order and now if we build and run this
we should have a very simple pop-up picker view built in Swift and Xcode using storyboard if we
select on our picker view button it will show us an alert dialog with the picker view inside we can
then select a color and that will apply that color to the background of our entire view controller
in the next and final part of this swift tutorial i'd like to show you how you can use
multiple components inside one picker view for example right now we can select the background
color but maybe we want to select the text color as well so first we're going to copy and paste our
selected row and we're just going to change that to selected row text color and then we're going
to scroll down and return number of components is equal to two and then our self dot selected
row we're going to copy and paste that down and change it to selected row text color in
component one we're going to copy and paste our selected variable and just change it to selected
text color and changing the row to selected row text color now we can say picker view button
set title color for our selected text row color dot value for state normal and then finally we
just need to head up and copy and paste our select row in component 2 1 and selected row
is selected row text color cool and if we build and run this again you can see that there's now
two components in our pop-up picker view and the first one relates to the background color and the
second one is changing the color of the text it's really confusing when you change the text color
to a different thing it's been one of those mind puzzles but yeah anyway i hope you enjoyed this
Swift and Xcode tutorial hopefully after watching this tutorial you have a better understanding of
how to use picker views alert dialogues stack views as well as some other Swift and Xcode
components but yeah i'll leave it there today and i'll catch you guys in the next tutorial
you