Search code examples
iosswifttableviewcell

Swift tableview Design


So i want to make some profile and in the profile theres a bunch of data obviously and i want to make like this, im still learning on swift so how do i make this? i know it using tableview but is that mean i need 2 cell instead of 1 or how? and how can i make this with storyboard.

enter image description here

i want to make the ui of the profile like this, so its like theres section for language and section for account and so on. thanks for any help i really appreciate that.


Solution

  • Maybe I can point you to the right direction:

    • In Storyboard, Add a UITableView inside your UIViewController
    • Make your ViewController class the dataSource and delegate of this UITableView
    • Then, inside your ViewController class, you can implement numberOfSection, numberOfRows(in section: Int) and cellForRowAtIndexPath
    • You can name your sections in the delegate method titleForSection(section: Int) or by providing your own UIView in headerViewForSection(section: Int)
    • In your image, I can see the sections being language, account and support.
    • For the design of the cells: You could do that directly in storyboard by adding one or more prototype cells to your UITableView. For the language section for example, you could add a single prototype cell which contains two buttons. One for the "English" selection and one for the "Bahasa" selection.
    • The top part of your image, containing the user profile image and "Invite your friends" could either be a larger UITableViewCell or more likely the headerView of the UITableView.

    The design of most cells can be accomplished using standard UITableViewCells. They have a textLabel, a detailLabeland an accessoryView. Iirc, you can even specify the color of the accessoryView to make it as green as in your example image.