Building iOS 10 Apps, No Prior Experience Required ( Chapter 7 ) | Samarth Paboowal | Skillshare

Building iOS 10 Apps, No Prior Experience Required ( Chapter 7 )

Samarth Paboowal, iOS Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (28m)
    • 1. Autolayout and Constraints in iOS 10

    • 2. Table Views in iOS 10 - Part I

    • 3. Table Views in iOS 10 - Part II

    • 4. Table Views in iOS 10 - Part III


About This Class

Welcome to the world's most comprehensive course on iOS development.

Here are some of the things you'll be able to do after taking this course:

  • Submit apps to the app store
  • Understand programming &¬†basic algorithms
  • Work fluently with Swift 3 &¬†iOS 10
  • Apply to jr iOS development jobs
  • Work as an iOS contractor

If you are absolutely new to programming you should start at the beginning of the course and go to the end.

What are the requirements?

  • Must have a computer with OSX or macOS on it

What am I going to get from this course?

  • Build iOS 10 & Swift 3 apps
  • Apply to jr. iOS development jobs
  • Work as an iOS contractor
  • Submit iOS apps to the Apple App Store

What is the target audience?

  • If you are an absolute beginner to coding take this course
  • If you are an absolute beginner to iOS or mobile development then take this course


1. Autolayout and Constraints in iOS 10: Hello and welcome back on. In this video, we will learn about an important feature in Iris, which is called or to lay out. So let's create a new project on Let's name this ordeal out. So just have a new project. Ah, alert, Select iPhone success. So basically, now we will see why do we need to learn or too loud? So this is over you, controller. And in this I am using an iPhone success. So basically alleged selector text field and drag it in the sink It I would like to make it bigger still here on still here. Let's make it somewhat smaller and explicit in the center. So basically, this is ours. Text for you. So let's write some placeholder text. So we would like my name is summit. So basically, you can see that this is our text feel. So now we will see why we need to learn or to live. So you know that I'm building this in a knife on success So late stews iPhone as he So you can see that as I have selected iPhone s e. The text feel is going out of the view Controller, This is because the size off six says an s e are different and no select a smaller rifle, which is iPhone four days. You can see that now that X feel has gone towards bottom and also out of the view controller. So basically, let's try this again. Knife on seven. You can see that it is not in the sender. So basically what we're know, what we're noticing is that the sizes remaining same whether we are opening our happened iPhone for five or any other. So basically, we need we need to use or to lay out two or two medical it in the side off our views so that it is fitting perfectly in each and every iPhone as villas. IPad So basically let he was orderly out on the stakes. Feel so does just will look good in all different iPhones. So basically, what I'm going to do is I'm going to click this and you can see there. There are four different icons here, so these are used for or to lay out so are delivered. Uses an important feature which is called constraints. So we will use can constraints in our view. Controller toe tell that very one. Do see our text Real indifferent devises. So basically what I want to do is like a I've warned this Texasville to between D pixels from the left boundary as vestment of pixels on the light boundary. So what I can do is I can click this text field and you can see their data third option which is called pin. I can click this and you can see there therefore icons these air for four different boundaries. So I want 20 from the left side. So I will Julius to 20. And when different, the right side and I will choose 20 and then update frames. I will do items off new consents and Acto consents so you can see their district feel has moved upward. This did This is because I have only said the consent from the left side and from the right side. Now we have to say it concerns from the topside as villas from the bottom side. So basically what we can do is let's say I wanted X field Toby 100 pixels from the top so I can again use the pin menu and here I can do 100. Andi I can't do seem matter which is item off new constraints and add one constrains. So basically, you can see that the text field is no at its place. It is 100 pixels from the top when d from the left and to individual right, we don't have to calculate our second change from the bottom because the size of their text feel is actually the height of the text feel is fixed, so it will automatically Calgary the concern from the bottom. So this is how I would text really is looking in the iPhone success. So let's try this in the iPhone seven, and you can see that it is looking nice. It is 100 from the top and 22 indifferent boards sites. Let's look dozen iPhone S E. And also here you can see that it is 100 from the top and 2020 from board sites. Let's see this in more smaller iPhone, which is a 3.5 inch. You can see that now. The text field is looking very good in this iPhone. Also, it is 100 from the top and 2020 from the left. So this is the basic use off orderly out in Iris. So every single lab that you created requires orderly out because we want our app to run in all the devices that are running currently in the market. So let's add some more text fields and see how we can use orderly out. So let's select one more text field. Alex, please sit here and knowledge take Britain and place it here. So what I want to do is I want this text field Toby two indifferent the left between different the right. So I will do it like this 20 from the left on doing differently. Right on. Items on you can change and actor constraints No, I want to send their said the top constraint. So now you can. Now we know that this is the top. So we will gala cleared distance from this. Where is this text field? Okay, here it is. Okay, so let's see. I want a 30 from the top. So let's juicy 30 and item with new constraints and when they're seen. So basically it is four different adopt, but we want 30 from this. So let's delete disconcert ain't and moved this text field here down and No, I will. Jews 30 from up and I had one considered. So now you can see that if we click this, you can see that a district different left to indifferent, right? And 30 from above. If you want to check what is the size you can just hold option or old like this and you can drag it off. You can see dead. This is start. This is tarty. This is 36 because 16 is the margin and this is tardy six. So you you so you can see that we have used constraints on border text will Now we will lose constraint on our button. So what we'll do is we will do the same material will do 44 on the left border, 40 from the ride border and see 40 from the top border. Let's item off. New contains and active states. You can see that our button is also using auto layout. It is 40 from left top in right. So now let's review this in different iPhones. So let's close this window on disorders will. Now I will you dis iPhone in iPhone seven. Conceive it. It is looking nice and iPhone success and now an iPhone S e. It is looking nice. And now an iPhone for this. So basically, you can see that the U. S. Is looking nice in all different iPhones. And you can also said the U A. Similarly, for different ipads, which is iPad, Prue. I pulled air and all the new I person it will becoming in the market. So basically, this is was the use off Italy out and constraints in iris application development? In the next video, we will learn about a very important feature which is called table use in my Recep. If you want to learn about it, please don't forget to watch the next video. 2. Table Views in iOS 10 - Part I: Welcome back, everyone. And in this video we will learn about table views and Iowa stand. So let's start by creating an ex scored project. Single your application and elects name this devil use create next and now to create so it will create a project for our Selves. Let's select iPhone success, Onda. So I mean dot storyboard. So basically, first we need to learn What is the table you in IOS. So let's open up and similar to roll. And I was device if you have have England and if you go to sightings, you can see that here are many different options So basically did. Basically, this is a table of you. This is the first straw. This is the second row, tired row and so on. So basically we are going to create a table you injured. We will show items one by one so as you can If you are using an iPhone, you know that day values are very important and most of the apps you stable use. So let's start learning how we can create our own able view in Iris. So this is our view controller. So the first thing is, we need active are table view. So like search here table you you can see that we have got table view So let's drag this year. So basically I want a table, you toe grab the whole screen. So now I will use auto load which we have learned in the last video. So basically I will pin my table you to the four boundaries by 00 and now I will do items off new concedes and add for consigns It is left 20 So basically what it will do, I will remove constraints So margin And now we will do 2020 00 Let's do item off new contention eight for constraints No, I have to remove the organ Sein's So what? I lose lecturing with day will you and started again. So let's this is their table of you. No, I will do zero from all side. I didn't from you consensus ad for concedes, so you can see that our table use taking up the full screen. So inside a tape inside table you we need different rules. So in IOS each row is called on cell So what? You can see that here is a table you sell. So basically we need to drag our table yourself. So let's drop it here. You can see that this is our own for cell in a table use. So this was all the work that we have to do in our store On our storyboard. Best of the work is done and scored so you can see that here is ah, cell. So let's give this and identify where you remember that we have also used identified while we were transferring data from one you going to let toe another So in table use we also need to create an identify. So let's created identify which is called said So now we will create a connection off table you an hour file So I will just click on table You and Grant told drag on Let's name just stay with you and close this You know you can dullard or swift file first removed accord which we do not need Okay, that's closes down and we need to inherit from two different classes which is off your table. You So the 1st 1 is you lay you I table you delegate and the 2nd 1 is you ate table view data source. So basically, these are two different protocols which we have to conform for using table use. So, in our day, in our table use, we will use board delegate and data source. So what it will do is stable. You dot delegate equal to self table you dot data source equal to self. So basically what these statements means that the delegate off table you is this own file. So basically that basically delegate means that how different cells will appear in our iris up and data source means the data Vitry which will show in our stables. So we are declaring it to self, which means that we will board define ourselves in this class only. And also we will provide their data from this league until only So now you can see that indeed it is in that highlighting a error. So let's see, What is this? So you can see that type you comptroller does not conform to portable d y table you dear source. This is because there are three different methods which are composer to implement when we're using tape using table view. So when we will implement those stream methods this a river automatically Go away. So first I will tell you the name of the three different functions. The 1st 1 is number off sections in a table. You. So let's start by typing number off. You can see that this is the matter. Number of sections in a table of you. We will write Gordon dysfunction later. Let's see. The second murder mattered which is number off rose in a section. This is my third and now they're toward mattered. And the most important matter the cellphone Ruit index spot So you can see dead. This is the mattered and quick ender so you can see that the other has automatically gone because we have used all the three different functions that are compulsory to use. When we are implementing table use, it will go dysfunction later. First lets go back to me nor storyboard. We have a file for a table you but we need are different file for each cell. So what we're going to do is create a new file Cooper touch class And instead of you a view controller ve vill inherit from you. Wait, they will you sell and large name just filed Table yourself it next and in Crete Our file. You can see that this is our second file. Nah, Venuto tell ourselves Let this is the class which is connected to ourselves. So just click ourselves on in the third option, you can select the class that we have just created, which is table yourself. So now if you go back to our view controller No, we will write shampooed for the table use. I think this video is become much longer. So I will tell you about they will use in the next video. Thank you for watching. 3. Table Views in iOS 10 - Part II: Welcome back, Everyone on in the last video we left here selects began it from this tree functions. So basically the first function is it wants to know how many sections you want in our daily table. You so basically in a single table you there is only one section so we really don one Because we want only a single section. This is about the first function. Now the second function is how many rules or cells you want in our table. You. So let's say we want 10 cells so we can do is return then. So this is all about the second function? No, the welcomes in the tired function which is the main function for our table view. So in dysfunction what we're going to do is we are going to create a cell. So we will do is if let sell it will do table you dot Dick, You re usable sailboat. Identify where you know that we have Trajan identified in our storyboard which for cell and foreign exports will be in export. I will explain this what we're doing in a bit and inside this work we're going to is we are just going to get it done, I said. And if by some mistake this field so we can use else on in the else we can return the day will you said. And here we forward to do. One thing is that we have to cast into our table yourself which we divisional file. We have created like this. So basically this is ah, how we could reuse the matter itself forward and export. So now let's understand this mattered. So basically, we're creating a cell and we're using a matador ridicule reusable cell. The first argument is identified. The identified is the same which were freed in the main door. Story would file and for index spot so basically, index part will keep track off how many different cells are there and on which cell we are currently working. So suppose that there are 10 different cells, so index part will be start from zero and it will go tell em and we're casting the says our table you sell, which we have just created. And in the end, we are returning the cell that we have created on in the else. If this fails, then we will just returned an empty cell. So this was the part about writing the three important functions for the U A. Table you data source. Now let's see whether our app is running correctly or not. So I will play our app and let's wait to Let's finish building. Oh, you can see that this is our table view And it is suing different Rose that we have using our app so you can see Degn. Olive Ah, they will use empty. Now what we'll do is we will fill in some data so that it will look nice. So what it will do is, let's say we will create a level in our shell. So this is ourselves. Let's say you want to display names, so we will use Lib label and store it inside. Our said like concerned this to 20 form left, right top and bottom items off Nuwan scenes, eight foot in scenes and let's make our celeb it bigger. That's a Make it to a little 90 alerts ally in this in the middle and increased of one change to be 20. Okay, so in our religion, we will create an connection for this level and our file so I will go to manual table, you stable view then I also like the file which is stable yourself Now I will create a connection for this by control dragging It's named is my labors X Close this on and go back to our fight interview Quint with So what are you going to do is we're going to create an area up here. Let's stay variable and it is names and I will store different names. So let's take five different names. So you're using six different names. So now, instead, off 10 we only use we only need six rows. So what we can do is we can return names, Dr Count. So it will. It will return the number off elements in an area. So basically this is six. So we will have six different rose. So, in dysfunction, what we can do is we can do shell dot my label dot text required to names on. We will pass in expert don't true. So let's check this weather talking directly or not. And then I will explain it to you. So you're going to see that in our day. Will you dear? Six different rules 1st 2nd 3rd 4th and 15 60. I think we should create someone name so that you can easily see our table. You walking correctly. So what I'm going to do is I'm going to stop this video and then I will come off too many different names and I will show you in the next video. And I will also explain about what do we have done in this video inside the court. See you in the next video. 4. Table Views in iOS 10 - Part III: Hello and welcome back on. You can see that I have created 56 more names and we're going to make a change that you will decrease the side of the cell slightly since it off a d. Let's make this 70. Okay, so now let's run this up and see how it is looking. So here's our app. You can see that it is now looking more clean and nice. This is the table you and it contains list off all different names. You can customize the stable. You were using our immediate if you want and a button here if you want. So basically, how you can do they do. This is this is your cell and you can bragged whatever you want in here. Supposing I want the second level. I can just drop it here like this and toward I can just drop it like this. So basically, you can do this according to their need. I have just one with you, a single label. You can also drop an image or a button or text feel inside a table yourself. So let's go back to our filing. Let's understand what we have done on this line. So basically, this is a cell and were created on my level. You can see that here. This is a level here. This is video created in ourselves and we are assigning it toward text, which basically means we are setting it some text. So yeah, our Eric or names, which contains all different names. So as I have already told you, that index part keeps track off all the different cells. So basically it will start from zero. True. So in the initial, it will be names and zero. So it will use this name summer. And after that, it will be one, and it will use shoe bomb and so on. So basically, index spot works in an index and it will implement automatically and use all the names in your areas. So, basically, this is how we create our table view in the US. So the most important thing you need to know if unit toe remember about table uses The first thing is, you have to use you a table, you del delegate, and your day will your dessert data source. And after that, these are the three different functions which are mandatory to implement the 1st 1 is number off sections. 2nd 1 is number off rose and they're told one is self for weight and expert. So basically, you can implement these three functions and then you a table. You will work properly and correctly for you. Thank you for watching this video.