swift - Complex Dynamic Collection Of UILabels Two Columns and Multiple Rows iOS -


i've been struggling thinking how setup kind of layout in tableviewcell. see photo:

more info:

  1. data dynamic. there might other days , each days might consists of multiple set of time.
  2. auto-layout needed of course dynamic/responsive height of cell.

what did:

  1. i did try doing using ib.
  2. i tried programmatically.
  3. both in ib , programmatically, used uistackview. kinda hard set up.
  4. i'm thinking set using uiviews containers, uistackview less complex.

i'm setting row row. first line time vertically, , view or stackview of paired horizontally day. after that, same other days.

enter image description here

for formality of question, here part of code in cell setting layout, suggest not taking effort read it, believe know doing, , think need approach guys.

var job: job! {     didset {          _ = self.subviews.map {             if $0 uistackview {                 $0.removefromsuperview()             }         }          gplog(classsender: self, log: "🎉setting stackview jobshift")          // add main vertical stackview          let stackview_vertical = uistackview(frame: .zero)         stackview_vertical.translatesautoresizingmaskintoconstraints = false         stackview_vertical.alignment = .fill         stackview_vertical.distribution = .fillproportionally         stackview_vertical.axis = .vertical         stackview_vertical.spacing = 16.0         self.addsubview(stackview_vertical)          // add constraints          stackview_vertical.topanchor.constraint(equalto: self.topanchor, constant: 15.0).isactive = true         stackview_vertical.bottomanchor.constraint(equalto: self.bottomanchor, constant: -15.0).isactive = true         stackview_vertical.leadinganchor.constraint(equalto: self.leadinganchor, constant: 15.0).isactive = true         stackview_vertical.trailinganchor.constraint(equalto: self.trailinganchor, constant: -15.0).isactive = true          if let dummyjson = self.readjson() {             if let shiftsjsonarray = dummyjson.array {                 shiftjson in shiftsjsonarray {                      let newshift = dummydatashift(json: shiftjson)                      if let day = newshift.day,                         let schedules = newshift.schedule {                         let generatedstackview = self.generatedayschedulestackview(day: day, schedules: schedules)                         stackview_vertical.addarrangedsubview(generatedstackview)                     }                 }             }         }     } }  // mark: - functions  // generate full schedule stack view. func generatedayschedulestackview(day: string, schedules: [dummydataschedule]) -> uistackview {      // label day (e.g. monday)     let newlabel_day = self.shiftlabel     newlabel_day.translatesautoresizingmaskintoconstraints = false     newlabel_day.text = day     newlabel_day.backgroundcolor = .red     newlabel_day.heightanchor.constraint(equaltoconstant: 30.0).isactive = true      // prepare vertical schedule stackview     let stackview_schedule = uistackview(frame: .zero)     stackview_schedule.alignment = .fill     stackview_schedule.distribution = .fillequally     stackview_schedule.axis = .vertical      // add schedules stackview vertically     schedule in schedules {         let newlabel_time = self.shiftlabel         newlabel_time.text = "\(schedule.timein!) - \(schedule.timeout!)"         newlabel_time.backgroundcolor = self.getrandomcolor()         newlabel_time.translatesautoresizingmaskintoconstraints = false         newlabel_time.heightanchor.constraint(equaltoconstant: 30.0).isactive = true          stackview_schedule.addarrangedsubview(newlabel_time)     }      // prepare horizontal dayschedulestackview     let stackview_dayschedule = uistackview(frame: .zero)     stackview_dayschedule.alignment = .fill     stackview_dayschedule.distribution = .fillproportionally     stackview_dayschedule.axis = .horizontal      // add arranged subviews     stackview_dayschedule.addarrangedsubview(newlabel_day)     stackview_dayschedule.addarrangedsubview(stackview_dayschedule)       return stackview_dayschedule } 

problem is: lots of warnings broken constraints, know how set , fix constraints. when fix it, nothing displaying. feel i'm wasting time pushing , trying hard continue approach. thought me lot if ask suggestions?

there multiple ways of solving problem. try give 1 approach it.

1) use tableview, each section cell containing "day of week" label plus vertical stackview time labels (use equal spacing).

2) if set constraints properly, can return uitableviewautomaticdimension on sizeforrow: delegate.

override func tableview(_ tableview: uitableview, heightforrowat      indexpath: indexpath) -> cgfloat {     return uitableviewautomaticdimension } 

then, on cellforrowat method, can append labels vertical stack view times. height of each cell correct come constraints.


Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -