iOS Swift Tutorial: From Sketch Design to Real App

hi and welcome to another very exciting tutorial last week Nina or STC speaker and design expert showed you how you can create this great-looking login screen in under 10 minutes using sketch and if you haven't already seen this video then check it out its link in the infobox below and she created this great-looking login screen using sketch and many of you just want to know how you can actually transfer this design into code and this week we're going to do just that we are going to translate this design into code so that we can run it in the simulator and also on a real device and it's going to look something like that you see it's these are buttons these are real text fields where we can enter real text and this is what we are going to do today and by the way and I are also going to plan a course together where we will focus on designing for iOS developers which means that you can learn how you as iOS developers can make great designs and also how you can afterwards translate those designs into code so let us know what you think about that and maybe also what you expect from such a course down in the comments below and now let's get started with creating this application and translating this design into code but before we fire up Xcode let's see what we really need to create that application well Nyna exported for me some of the design elements and we're going to have a look at that in the assets folder and as you can see we actually only have three assets so we do have the background image in two different resolutions a two X version and a three X version as JPEGs we do have this background card as PNG in a 2x and 3x version and we do have the logo also in a 2x and 3x version also as jpg and notice please that the background color of the logo and the background color of the background card are the same this means we can use JPEGs and using J packs instead of PNG s-sometimes are in most cases increases the performance of your ass because you don't have alpha channels or transparencies that need to be rendered so whenever possible try to export JPEGs without an alpha Channel so without a pass 'ti because this is going to increase your apps performance so this is what we have and another thing that we have here are the colors which we are going to use so we have four two text fields we do have this the color of the text itself we have the color for the labels that describe what we should place into those text fields and we do have the button background color so with that information we can now fire up Xcode and see what we can do so let me bring up the beta version of Xcode and let's create a new application which is going to be a single view application let's just call it login screen click Next and create that on the desktop and let's make this a little bigger and let's move to the assets folder in our project navigator here and I will bring up now my Finder window where I've got the assets so let's do it that way and all we need to do now is select all of those assets and drag and drop them into our assets folder and Xcode automatically generates the the appropriate items your father login for the background card FAFSA for the background for the log in the background card and for the logo which was called my app and we do not use 1x versions because there is no app out there that supports iOS 10 and only that does not have a Retina display so we don't need a 1x version here so now that we have that let's head to our main storyboard and our view controller and what we want to do here first of all is add an image view for our background image so let's bring that up and size it so that it fits to the whole screen which is by the way iPhone 6s screen at the moment but Muir will make that adapter so that it runs on iPhone 6s or 6s plus on a 5s or 5 se and let's now move to our size inspector and since we're working with the beta version of Xcode Adar if you watch this video later you can use of course Xcode 8 and we do have those Auto resizing classes here and that means that we do not need for this easy case we do not have to create all the layout constraints we can just use those auto resizing masks and we pin it to not only to the top and to the left but also to the right into the bottom and make sure that our image view stretches so that exactly what happens in this animation also happens in our application so that our image resizes with the screen size and let's now move to the attributes inspector and simply select the BG login image here and make sure that we have a SPECT feel selected as the content mode and that's it and if we now have a look at the different sizes so can click on the view ass and then we can choose different phones so let me zoom out a little and let's choose the 6s works fine let's choose the 5 se also works fine and this is pretty cool and as you can see what Nina also did was if you remember her video she created the background image and then placed a solid layer on top of it and then reduced its opacity so that everything is a little more visible and she also exported the background image together with this solid layer so that we don't have to put a special view on top of it and this also saves again performance on your application so now with that done let's go one step ahead and and another image view which is going to be responsible for our and what's it called for our login background card so once then place this log in background card right here make sure that we have the career content mode selected let's choose aspect fit here this helps us to define the correct size for our acid here and let's choose the success if it's not already chosen and then we position it somewhere in the center and let's maybe make this a little bigger something like that and center it and depending on how how your designer feels about things like that they're going to be arguments about positioning and I can help nor that and don't have to worry about the perfect positioning I'm just making sure it's centered and if you want to translate the design one to one hundred percent then make sure that you also have the distances noted and that you place everything just correctly but we're completely content with that for the moment you it's about getting the principle idea behind translating designs into code or into real applications so we have our background login view here now which is simply an image view and what we can do now already is positioning it and what we want to do here is we want to create some constraints so I press ctrl on the keyboard and click drag from my login BG card to my view which is the view of the view controller and what I want to do is I want to Center it horizontally and vertically in the container which means I can press shift on the keyboard and just select both of them and then I hit return to apply those constraints and what I also want to do is fix its size in width and height and simply do the same again hit return on the keyboard and as you can see all lines turn blue and this means the on layout engine is satisfied now let's have a look on the different devices so again do 6 plus works fine 6s works fine and the 5se also works fine so we're all good with that so let's continue with the logo and let's choose the 6s again and you might have guessed it we put another image view right here and then this was called my app again we select aspect fit here maybe it's useful to select clips to balance if we were to use aspect fill for example if we do not have clips to bounce activated you see that the the image exceeds its actual space so let's just activate it make s make this aspect fit scale that down a little maybe something like this and again depending on how much you're designing once how you self want the design reflected in your real app you can play a little around here with the sizes and find out what works for you or apply the exact positions that you were provided with so now let's also apply some constraints to that logo so again I press ctrl on my keyboard and click drag to my log in BG card and release here and what we want to do is a first of all vertical spacing to the top of the background card and also Center horizontally this is so weak I can press shift to select both of those constraints and then hit enter and we're done and then all I need to do is fix the width and height of my logo press Enter and we're done in Annecy we again have the the blue lines which means that our auto layout engine it is satisfied and now we are coming to the most complicated part actually which are the text fields since these are not custom text fields if we have a look at the design again you can see that the text fields do have such a solid border and they also have a label indicating what we should place in there which means that we also need kind of an edge in said that we need to apply to the text we're putting into our text field so let's first of all start really simple by simply adding a text field or two to our view and let's make some adjustments here I'm placing a demo text in here let's say Tim Cook and first thing we want to change is the border style and I'm going to choose this first option here which deactivates all border styles and gives us kind of a plain looking text field and then I'm going to make sure that its height is kind of 50 pixels and well I can't see a lot right now so I'm placing it some way here increasing the size a little but this doesn't look too good um so first of all let's change the fund a little you can choose a custom font here I'm choosing Helvetica here and the text size let's keep it at 17 and I'm saying this should be bold and let's now take the color which we have here so I have the text field color which is 5 B 6 5 7 C so I'm copying that color code and choosing the RGB slider here which is currently at grayscale so I'm changing that to RGB and then I'm simply inserting this hexadecimal code here hitting return and then we have the correct color here but what we don't have is the nice arm is a nice color or the solid a frame around our text field and what we can do here and also to make sure that we have the correct edge inset is creating a subclass of UI text field so what we won't do is clicking on view controller press command and on the keyboard selecting a cocoa touch class and what we can want to do here is now create maybe a login text field let's call it that way and this is going to be a subclass of UI text field so let's click Next and create that class and we can also remove that comment here with the draw rect function and to actually apply this border we need to override layout subviews so let's make sure to call super layout subviews and then we can simply take self because we are the login text field take our lair take the border color so let's apply the correct color here and I'm going to use white color with a part of white so let's I also got that value from Neenah so I'm using 231 from from the RGB scale divide that by 255 because we need to provide a decimal value for the percentage of white and we can get that by dividing through the maximum of the RGB scale so it ranges from 1 to 255 and I'm setting the alpha value to 1 let's build that seems it seems not to work because since we're using a layer here we need to convert that to a CG color but now we should get rid of this error and that works and what we also need to do is taking the layer again and changing the border width to 1 so I also got that information from Nina she told me that this border should have a thickness of 1 pixel so to get the edge inside right and also let's make one adjustment first to see these changes applied to interface builder what we can simply do is writing add IB design abble right above the class definition here and that makes that activates live coding our live preview far for interface builder and we can see all the changes we make in code here rendered live in interface builder but let's do the last two changes first of all let's override the text rect for balance function and all we need to do here is return bounds with an inset by 8 pixels 2 in vertical direction and 7 pixels in horizontal direction again these are values I received from Lena and then also let's do the same thing for the editing rect for balance and let's return bounced around the simply the text wrecked again here for the bounce that we receive here so again we override those two functions text rect to create an etch inset and to create that edge and said we take the balance that are given as parameter here and we apply an inset and with with eight pixels offset to the right and seven pixels offset to the top and we are using the same function here and call it in editing rec because as soon as you type into a text field you get again another rectangle and that we need to make apply these changes to so let's see how that effects our text field um and I'm selecting the text field now and I'm changing its custom class in D identity inspector to log in text field and as you can see it's updating and within a second or so we should see the changes but at the moment it looks that our text is pretty much centered which we don't want so we head back to the sizes bell or the attributes inspector here in our text field and what we should change is that the text is not vertically centered but put to the bottom and this means we now have applied our edge and said I think it was seven pixels or something like that and we can now bring up a label to our text field and insert user name here because this is what it should sound and then we change let's first of all change the color and need to open up that one here and this is C 9 c 9 c 9 so I'm copying copying the hexadecimal code again and apply the color right here so this was that and then let's change the font again to a Lavetta cow well let's reduce the file size of the text size a little set this to bold maybe I'm go down a little more and that's it now it can resize my label again maybe make it even a little smaller maybe 10 again your designer should actually tells you what to do here but I'm pretty much free so I'm just doing what seems right to me at the moment and I'm placing it somewhere here so this looks nicely aligned with Tim coke hero with the name that we're going to enter and this is actually all there is to the text field so now we can go ahead and copy the complete text field with the label copy and paste it and put it right below this one and now we simply change that to password and now we have to apply the constraints again so let's take four first of all the upper text field let's define a vertical spacing between the logo and the text field so I'm just ctrl-clicking vertical spacing and also a trailing to the blocking BG card so let's just make sure that we can select that trailing right here let's fix the height at 50 and we are still seeing some orange lines here because the auto layout engine things that we want the leading and training space to be fixed are to be pinned to the left and right side of our background card and what we can do to change that is simply opening up this a little more here click on the arrow and tell our constraint to update and fix the misplacement and by that our constraint now updated to this distance here now let's apply some constraints to the second text field here so I'm simply click and drag to the upper text fields tell it to have a vertical spacing I'm selecting shift again on my keyboard it should use the leading space from our text field right here and they should have equal widths and equal Heights I hit return and we're already done there is a slight miss placement here so I'm saying updating frames and we're done and now we only need to apply some constraints to our Abel's so I'm going back to my structure pressing control on the keyboard and click drag to the Tim Cook text field first of all to the upper one and what I want to do is adding a leading space or let's just use a horizontal spacing in a vertical spacing here and I'm hit return and then I see what we have what kind of problem we have with the misc placement here just a slight miss placement so I'm clicking on the exclamation here updated frames fix misplacement and then I'm just moving this around a little to be where I want it somewhere here and then what I do is do the same thing again and I update the constraints and we're good to go so we now should do the same thing for our password so let's use the second Tim Cook field horizontal and vertical spacing and it's somehow is not content with what we did so we fix miss placement and reoriented so that it fits nicely alright I'm alright with that and then I update the constraints and we're done and now let's just have a quick look on the other devices so we have the iPhone 5se we have the iPhone 6 plus and it'll looks great everywhere so let's now make one last change here to our password text field let's enable secure text entry so that you can see what you're actually typing in or that others can't see that and let's now add our button which is going to be just a standard button we're going to make it in the same width as our text fields also same height so let's make it height 50 in the size inspector and now we need to choose the correct color again which is 9 CC 1 d4 so I'm copying that from a color list I'm going to the background color I'm changing it applying the correct hexadecimal code and we're done with that now let's change the text color to white color I'm what what does it say and the I think it says register it is register yes okay so I'm typing in register and we're done with that I'm changing the fund to vet iike and I'm also making this bold and I think we could increase the size a little to that all right so we're already done with the button all that's left now is applying some constraints and this is pretty simple we simply a click drag to the password text field let's add a vertical spacing let's make it equal widths equal Heights and also select leading and press ENTER and we're done with the constraints and the last thing that we need to do is add the forgot password button below our field here so forgot your password question mark and position it somewhere here and apply some constraints so I'm going to press ctrl click drag to the login BG card select vertical spacing and then I'm also going to go back to my structure here and Center it vertically horizontally in my container and we're done and then there is a slight miss placement so I'm updating my frames and that's it okay so now that we have done that you may be wondering well it's not white so actually this should be white and underlined but how can we change that because there is no such option here for underlined in the fund inspector here and we can't really do something so what we need to do is creating an outlet for our password button here so let's just creating an outlet here using the the the assistant editor password button just calling a password button I connect that and then we need to create an attributed string for that so let's just do that in viewdidload right here you could also create a function for that if you have to setup multiple user interface components but we can do it pretty simple here and just in viewdidload and i'm simply creating a constant here which is called attributed string and this is an NS attributed string with a string and attributes and the string is going to be for god your password and then we can apply some attributes in this dictionary here and the first one we need to change actually is the NS for ground color attribute name and we just use UI color right here and the second attribute that we need need is the NS underline style attribute name which is going to be just one because we only wanted to be underlined once and then we can take our password button and then set attribute title which is a attributed string for the control state normal and that's it actually well before we run it let's make one last adjustment let's select our forgot your password button and let's change the text color also here and we need to adjust the font here as well so let's set it to Helvetica let's set it to bold and maybe let's run it in with that settings one more time and let's see how that works and we should get the simulator any second and here it is and as you can see this looks really great we have a real working text field we can enter text here with the correct edge inset we have our the password text field here we can click register or forgot your password so as you have seen it isn't too hard to translate a design into code and if you are interested in more of these techniques then stay definitely tuned for our course that is going to be released soon and also please tell us in the comments below what you'd like to see in such a course that is going to be all about designing applications from an developer point of view and also then translating those designs into code so thanks for watching I hope you enjoyed this little session and I'll see you next week you

Channel: Brian Advent

Views: 283,936

Keywords: Swift, Xcode (Software), OS X (Operating System), Core Data (Software), IOS (Software), Tutorial, programming, iphone, ipad, Macintosh (Computer), Apple Inc. (Organization), IOS 8, ios9, Parse, CloudKit

Id: DYhPufgcqF4

Length: 27min 5sec (1625 seconds)

Published: Fri Sep 09 2016