CODEWITHSUNDEEP
iosswiftxcodeuitableviewuicollectionview
Camile
Camile

Reputation: 175

Make tableview with multiple columns

I am trying to create something like this, where each row represent a working set, and contains the weight and number of reps, and the user can add a new row by pressing a button. But I haven't figured out how to do this in tableView. This is somehow I want it to look like:

enter image description here

Any tips/ideas?

Upvotes: 4

Views: 7496

Answers (1)

Julian Silvestri
Julian Silvestri

Reputation: 2037

There are multiple ways of doing this. Here is how I would do it. With respect to saving me much time I am going to skip a bunch of steps and ASSUME you know how to do each certain steps of setup.

Step 1: Establish a new ViewController with a connected cocoa touch class file. NOTE: you can use a TableView Controller if you wish Step 2: Drag in a tableView into your new view Controller and size it accordingly (also add basic constraints) enter image description here

Step 3: Add a new uiView into your viewController and name it header and place it at the top of the page. NOTE: There are other ways of making a header such as inside the tableview itself. However I just prefer to do it this way.

enter image description here

Step 4: Connect your table view and header as outlets to the code. Step 5: Create a new custom cell class within your new cocoa touch swift file. Make sure to set the delegate and datasource as like so:

import UIKit

class myCustomCell: UITableViewCell {

}


class test: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var headerVIew: UIView!
    @IBOutlet weak var myTableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.myTableView.delegate = self
        self.myTableView.dataSource = self
        // Do any additional setup after loading the view.
    }


    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destination.
        // Pass the selected object to the new view controller.
    }
    */

}

NOTE: You can also CTRL Drag from your tableView to your VIEWCONTROLLER to connect the dataSource and delegate manually.

Step 6: Create your header view by adding in labels and sizing them accordingly. I kinda rushed as you can see and they are not perfectly aligned.

enter image description here

Step7 : Add a single prototype cell to your table view using the attribute inspector. Size the cell as big or small as you want. And add 5 labels to the cell and match it to the size of the header you already created. NOTE: You will need to do some customization to the labels, like providing a border or adding in other images to create the BOX Style you want. enter image description here

Note that my labels are not perfectly aligned and are not sized perfectly. Just wanted to save some time.

Step 8: THis is tricky! You need to select your UITableViewCell in your heirarchy and inside the identity inspector, set its custom class to whatever you named it in your file. In my case it is 'myCustomCell' Once this is done you are now able to connect them by CTRL dragging each object into the custom class TableViewCell as described in step 5. It should look something like this, 

import UIKit

class myCustomCell: UITableViewCell {

    @IBOutlet weak var label1: UILabel!
    @IBOutlet weak var label2: UILabel!
    @IBOutlet weak var label3: UILabel!
    @IBOutlet weak var label4: UILabel!
    @IBOutlet weak var label5: UILabel!

}


class test: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var headerVIew: UIView!
    @IBOutlet weak var myTableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.myTableView.delegate = self
        self.myTableView.dataSource = self
        // Do any additional setup after loading the view.
    }

Finally you need to add the protocol functions in. 

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    //set up here
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    //set up here
}

That should be all you need to start creating this custom spreadsheet like view. Most of the look and feel will come with more designing and proper setup with your labels and or UIimages. Not rushed like i did it .

Hope this helps

Upvotes: 3

Related Questions