UITableView & UICollectionView ? Help needed - ios

Question

all. I can't figure out this one.
I'm working on an app that needs to have this view as a TableView (representing excercises, with the excercise name as header) and inside each cell I need to see and be able to touch these rounded buttons (representing sets as number of buttons and reps as number inside the buttons).
I've been able to put images and that in CollectionView but no clue for buttons. Here is a sketch I've made.
https://i.imgur.com/ZjHDM4d.png
My tableViewController
import Foundation
import UIKit
class WorkoutViewController: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = #colorLiteral(red: 0.2156862745, green: 0.368627451, blue: 0.5921568627, alpha: 1)
}
var workouts: [Workout1] = Workout1.fetchWorkout1()
override func numberOfSections(in tableView: UITableView) -> Int {
return workouts.count
}
override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return "ExcerciseName"
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return workouts.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "workoutCell", for: indexPath)
let workout = workouts[indexPath.row]
cell.textLabel?.text = workout.excerciseName
cell.textLabel?.textColor = UIColor.white
return cell
}
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let workout = workouts[indexPath.row]
tableView.deselectRow(at: indexPath, animated: true)
print("Do \(workout.sets) sets of \(workout.reps) reps of \(workout.excerciseName)")
}
override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
cell.backgroundColor = UIColor.clear
}
}
The source of the data
struct Workout1 {
let excerciseName: String
let sets: Int
let reps: Int
static func fetchWorkout1() -> [Workout1] {
let w1 = Workout1(excerciseName: "Bench Press", sets: 3, reps: 8)
let w2 = Workout1(excerciseName: "Push Press", sets: 3, reps: 8)
let w3 = Workout1(excerciseName: "Squat", sets: 3, reps: 8)
let w4 = Workout1(excerciseName: "Deadlift", sets: 3, reps: 8)
let w5 = Workout1(excerciseName: "Bicep Curl", sets: 3, reps: 8)
let w6 = Workout1(excerciseName: "Tricep Pushdown", sets: 3, reps: 8)
return [w1,w2,w3,w4,w5,w6]
}
}

Answer 1

Theoretically, based on your image, if the circles in each row do not need to be in a scroll view (there is no space to display all circles), then using UIStackView would be a good choice because stack views handle the spacing and the distribution for the circles.
On the other hand, if the view container has to be scrollable, using a collection view might covers your need.
ios 8 Swift - TableView with embedded CollectionView.
Multiple Collection View in UITableView.

Answer 2

You need to use a UIButton which allows you to set images and titles for each state (normal, selection, highlighted, disabled). You can do your circle buttons with that very easily.
Here you have a tutorial on how to do it:
UIButton tutorial
and the apple reference:
UIButton Apple doc
Note that you don't need an image for drawing a circle button, for a simple one you can add a border to your button and set its layer's cornerRadius property to be a circle.
For your layout, your can do it with a UICollectionView by setting correctly the size of the header (supplementary view) and cells.

Answer 3

Solved! used a CollectionView and added some buttons.
I created a new ViewController with a TableView and TableViewCell, and then a CollectionView with the CollectionViewCell. Inside that I added what I wanted. I created the array for the text and the the array for the images I was going to use. The the usual stuff regarding setting up each cell and each tableview (tableView and collectionView). For knowing which item the user tap I used the function didSelectItemAt and for the action I used a segue (because I wanted to send the user to another view).