Swift 5 – How to Create UITableView with multiple sections in iOS

Swift 5 – How to Create UITableView with multiple sections in iOS


hello everyone I hope you guys are doing
well I’m Subham and you’re watching Let Create An App so in this video we are
going to talk about how we can create section in UI tableview
so basically sections creating section is very easy and this kind of
functionality is required in almost every application so let’s look into the
demo first and then we will see how we can create this kind of functionality so
this is the demo which we are going to create in this video so the things which
are coming in red other section and the things which are coming below the red
other rows in section so this is very easy functionality and it is at the
beginners level you can also customize this thing according to your own need
so let’s look how we can create this functionality so we are going to learn
this thing in this video and if you have any difficulty please let me know in the
comment section and if you like this video please don’t forget to hit the
like button and if you are new to this channel please don’t forget to hit the
subscribe button and press that bad I can to get the notifications of all my
other video so let’s start the video let create an app so open an Xcode click on
signal B application click on next and give the whatever name you want to give
I’m just giving section you cable you like this and just click on next and
create this project where you want to create
I’m just creating this project on my desktop so after creating of this
project you have to move on this storyboard so that we can create the
basic layout which we seen in the demo so now you have to take the table you so
simply drag and drop table you over here and we have to give a constraints like
from all the four sides it should be zero so that it can cover
the whole screen now we have to take one prototype cell so for this you have to
move over here and just increase when prototype cell over here so this is the
cell on which the name of the model of that company is shown like iPhone 6s
seven seven plus or something like that and whatever the session we we have to
create the section we are putting so we will see that thing in coding part now
we have to give that datasource and delegate to this table you we can also
give this thing some coding also and if you don’t know anything about table you
how we can pass the data how we can populate the table you then you can move
and watch out my complete series on table you
so the link of the series was mentioned in the description as well as on the I
button you guys go and check out that series now you have designed the basic
cell in which we can show the name of the phone so simply just just click on
this cell and we can take one label and drag and drop that label or we can also
use the predefined cells just like a basic cell in which we had single title
UI label in this cell now let’s move on the view controller and take the outlet
of this table you so simply you can move on the view controller like this and
just drag-and-drop or press control and look like this table view like this and
by doing this thing we will able to create the outlet of this table view now
we have to do some kind of a coding like populating the table view so for that we
have to just move on the story you have to move on the view controller now you
have to define one extension so that we can write all the code separately of
table you like we have to define the datasource and delegate delegate it
associative telling it like this and I guess it will automatically prompting me
to implement the protocol so like this and it is it will automatically
implement these things we need one more thing that is a number of sections so
simply like this and in this we have to pass the counts as well as cell so first
we have to create the data so for that we have to create on model over there
so simply that class mobile friend like this like this and you can define all
the other properties also just defining a brand name as well as all the relevant
mobiles which that brand offers us so simply I have already created that thing
so just copy this thing you guys can get this thing in this project and you can
download this project the link of the project is mentioned in the description
so in this mobile friend class I have defined two properties brand name as
well as model name so this is an area of string which will contain all the name
of the devices which that brand offers so now let’s create an object of this
mobile so we’re mobile brand is equals to it is
an array of mobile French like this now we have to add the element in this
mobile friend so simply you can use mobile friend dot append I have already
added these things so just copy this thing and paste over there so in this I
have added four friends Apple Samsung am I and why so I have added all these
things and some phones related to these companies so now our data is ready so
now let’s written the number of sections which we want so simply write number of
sections in this we have to simply return sorry
return mobile print counts but sounds like this so this will return the number
of sections so we are basically having a four sections Apple Samsung MI and we’re
not have to return the number of rows in sections so each section contains a
specific number row number of rows so for that we have to simply return mobile
friends and in this we have to get the section first so simply put an arrow but
this is square parenthesis and in this parenthesis we have to mention the
section so suppose if the section is 0 then it will return the number of
elements is like 1 2 3 and there are five six elements so for that we will
just put that dot and now you have to get this mobile model name and dot count
so this will return the number of rows in in that specific section and this is
an optional value so forth we have to user optional chaining or we can also
put an information operator and define that default value so if there is
nothing in this count value then it will automatically take 0 simply like this
now we have to define the cell so for that simply use let cell equals to u TQ
usable cell this one and in this we have to pass the identifier of the cell so we
didn’t pass any identifier to the cell so just pass our cell as an identifier
like this and just move on the view control
again and paste over here like this and in this index path here to simply pass
index path like this and now we have to get the title label of this cell title
label or take stable I guess text label dot text like this and in this here to
send the name of the mobile phone so simply we have to use mobile brand and
in this we have to use index path dot section so we have to first get the
section for which section we are showing the name and just steam dot and in this
we have to use this mobile model name and this is also an array so we have to
put in index path dot throw over here like this and I guess we have to put on
name also for sorry we we will get this thing we will get a string over here so
this will automatically set it on this text table so I guess this is an
optional value so we have to put an option like this now we have to return
this cell so simply written cell so by doing this thing we can get the name of
the mobile in that cell so we can test this thing so let’s run this thing and
tell that it is working fine or not so oh yeah we didn’t set the title label
for a section so we have to do that thing also this wait a minute let’s see
that how is it working this is not change any data okay so there is no data
showing that the data is showing but there is no section is created
definitely because there is no detail assigned to that the section so for that
we have to implement one more method that is title for hydron section title
for header in section this one and this will take as a string written as a
string so in this view return mobile friend and in this view section dot name
brand name so we have to use this thing and learn these things this thing again
to check that it is working fine or not then we will see how we can create a
custom section so by doing this thing we are able to get the Apple and all the
relevant phone of Apple in this section Samson in this section
mi in this section so we can create this thing according to your own need you can
add the data reduce the data according to your needs now if you want any custom
header just like you have to design something some food some phone design so
you can do two things just like you can create an XIV and you can note that XIV
as a section in this table you so for that you have to be have one method that
is new for head and section view for head and section so this one and in this
you can load that XIV and you can set the data according to your only by
getting the elements of that XIV as well as just like let’s let’s do that thing
so let you wipe you for simply we can use you equals to you why if you like
this and we have to define this thing CG effect over here so from X we need 0
from y 0 and it should be the width of our table new table you dot stream flow
to it and same as table you work same dot not height so we can define the
height it’s up to us like 40 pixels and we can give the background color to this
view background color is equal to dot fit like this and we can simply return
this view like this so now let’s run this thing in check that it is working
fine or not we are able to get this view on in a section then we will proceed
further so we successfully able to get this thing in a section but we are not
seeing that title definitely because this is a priority above this so it will
automatically take if this method is implemented then this will take and this
is not implemented so we can remove this thing or you can amend this thing also
now for showing and name on this title header we have to create on label in
this view so for that just create one label so let label is equals to UI label like this and we also need to define
that X for this label this one and from X it will always come from 15 pixels and
in Y we have to give us 0 like this and width will always remain same to this
view or they can also it’s totally up to us that how much width we want to define
so we have to – the width because we have starting this label from 15 so they
have to reduce the width by 15 so simply we have to say like view dot frame dot
to it like this – 15 and the height is same as the view and now we have to add
this label in this new so you dot add sub view and in this we have to add this
label like this and we have to return this view so this is completely fine now
we have to set the title in this label so label dot text is equals to and in
this we have to set the title no file brand and in this view section section
dot brand name like this so now let’s come and this thing and say that it is
working fine or not so by doing this thing we will able to successfully able
to see the brand name in this section like this and the label is not set
properly so we can do this thing like let’s create one method that is a height
for head and section we have to implement that thing also fight for that
inch section and in this we have to return 40 pixel is a height of that
header before maybe header height is something bigger not 40 so maybe this is
the reason so after providing a height yeah coding this is completely coming
fine and you can do all the other things we are coding
you can also create XIV and there are many other ways you can also create a
custom class which you can use over here and it will all the things you can do
over here so this is very simple thing to do and you can customize this thing
according to your own need so this is very basic example this is for today if
you liked this video please don’t forget to hit the like button and if you’re new
to the channel please don’t forget to hit the subscribe button and there’s the
bell icon to get the notifications of all my other videos and if you have any
query or solution please post that thing in the comment box made you in the next
video thank you

12 thoughts on “Swift 5 – How to Create UITableView with multiple sections in iOS

  1. Nice tutorial, it would have been gud if i found it earlier.

  2. Great work 👍

  3. Cool 👍

  4. Great work broo👌👌nicely explained👍👍

  5. viewForHeaderInSection has UIView and UILabel created every time it is called, will this a memory or resource leak? should ReusableHeaderFooterViewWithIdentifier be used instead?

  6. Nice videos man, next i'd like to see an "add to cart application" or something like that

  7. Nice video bro all topics are excellent… I would like to ask one thing that is…how to declare a variable and datatype of Null value in Model Class…let's take an example…

    "Itemdata":null,
       "MessageDetails":"Item Featched Successfully",
       "ErrorStatus":null,
       "Flag":true

    can you please help me out of this.

  8. Bro, urlsession frame work use chesi image upload in tableview from server . Video cheyyi bro

  9. video make on firebase plz in full detail

  10. رجاءا تعليم كيفية انشاء تطبيق كتاب فهرست واختيار صورة معينة من collictionView

  11. This is one of the best explanation i got. keep it up. thank you.

  12. Hi, could you show us how to do this with Realm?

Leave a Reply

Your email address will not be published. Required fields are marked *