UITableView & UICollectionView ? Help needed

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.stack.imgur.com/ke6rt.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]
}


}

You should add codes that you have tried so that we can help. Can't post the entire solution. — prex, Feb 10 '19 at 10:48

score 0 · Answer 1 · answered Feb 10 '19 at 11:15

0

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.

answered Feb 10 '19 at 11:15

Ahmad F

30,560
17
97
143

I want to the buttons be added from the number of sets, and the button label from the number of reps. And not scrollable. – Mauro Garcia Feb 10 '19 at 11:34
@MauroGarcia so the answer didn't resolve your question... ? – Ahmad F Feb 10 '19 at 11:49
Not really, I already tried to add images and that. But I need to add buttons! – Mauro Garcia Feb 10 '19 at 12:16
@MauroGarcia regardless of what are you aiming to add as components (buttons or images), its about the *layout*. – Ahmad F Feb 10 '19 at 14:55
So how can I add automatically circles or buttons in UIStackView? I'm really lost here, sorry. I have been into a lot of tutorials, documentations and stuff with no luck. – Mauro Garcia Feb 10 '19 at 14:58
@MauroGarcia possibly a good place to start: https://stackoverflow.com/a/32675332/5501940 – Ahmad F Feb 10 '19 at 16:03

score 0 · Answer 2 · answered Feb 10 '19 at 17:20

0

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.

answered Feb 10 '19 at 17:20

Macistador

854
12
23

The idea is to automatically add buttons (as if it is "3" then it adds 3 buttons). – Mauro Garcia Feb 10 '19 at 18:40
Yes, just put a UIButton in a custom UICollectionViewCell (in InterfaceBuilder or by code) and configure the collection view to show how much cells you need – Macistador Feb 11 '19 at 16:24

Mauro Garcia · Answer 3 · 2019-02-13T18:51:03.727

0

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).

edited Feb 13 '19 at 18:51

answered Feb 13 '19 at 18:16

Mauro Garcia

11
1
5

answers need to be specific. Can you add more detail? – mfaani Feb 13 '19 at 18:20
that's why I didn't downvote. But delete the comment above, and edit your answer to include it – mfaani Feb 13 '19 at 18:42

UITableView & UICollectionView ? Help needed

3 Answers3