您如何在快速ios中设计“周视图”？

Question

In the photo above the UI details a design with a 7-day collection view (a "week view") that auto-increments each cell to the next day when the day passes, this is because the 7 cells are static. Each day has a list of tasks associated with it, as seen above, each day the user must try and complete all the assigned tasks by their personal trainer.

I have listed a couple of design questions below on how to go about building an app like this:

How would I design the 7 collection cells to auto-update as a new day passes? How can I have each day hold their own unique list of tasks? I'll provide some data model code below and my ideas alongside the code.

Here is a struct for my tasks, I chose a struct because each day's tasks could be different, but if they happen to be similar or the same then copying the struct and modifying it from there would be more optimal I think. The tasks would be created by a personal trainer in another screen but I think this model is good enough. What do you guys think?

struct Task {
    var taskIcon: UIImage!
    var taskName: String!
    var taskDesc: String!
}

// Put the Task model in array to use in each day?
var tasks = [Task]()

For the "week view" how would I go about assigning a unique list of tasks for each day? When the personal trainer creates the task for the day, how does the collection view index hold a unique array of tasks? I'm not sure if this would be the most optimal way of doing this

I'm not necessarily looking for anyone to write out code (although that'd be great if you did) but rather just an overview explanation of how it should be done. Any advice is welcomed.

Answer 1

IF you are always going to have 7 cells across the top of the view, and only 7 cells, I honestly wouldn't use a UICollectionView . UICollectionView s really shine when you have lots of data/images that you need to be able to scroll through. Instead I would make those 'cells' normal UIView s(7) placed inside of a horizontal StackView.

You could then give those UIView's a target action for the tapped gesture, which updates and changes your DatSource used to fill in your UITableView at the bottom with the needed tasks.

As far as updating with the date, making a call to Date() will give the device's current dateTime stamp. You could use that Date object's `.addingTimeInterval()' to add 24,48, etc... hours for the following days.

EDIT:

Sure for an example, you mention you are going to have your tasks in an array, You could create a Dictionary to hold an array of task for each day, or a array of arrays: var taskDictionary : [String : [Task]]? or var taskArray : [[Task]]?

Set the tapGesture's selector to a function that will control pulling content from the Dictionary/Array:

func dayOfWeekTapped(_ sender: UIView) {
    myTableViewDataSource = taskDictionary[sender.tag]
    //myTableViewDataSource = taskArray[sender.tag]
    myTableView.reloadData()
}

I used tag property here for an example, but it would be better to create a UIView subclass, so that you could access the UIElements inside the view:

func dayOfWeekTapped(_ sender: CustomUIView) {
    myTableViewDataSource = taskDictionary[sender.dateLbl.text]
    //myTableViewDataSource = taskArray[(sender.dateLabel.text as! NSString).intValue]
    myTableView.reloadData()
}

I was thinking about this question and got curious, but the Custom UIView could look something like this(very quickly thrown together so it could be cleaned up a bit):

protocol DayViewTappedDelegate {
    func daySelected(_ selectedLabelText: String)
}

class DayView: UIView {
    @IBOutlet var dateLbl: UILabel!

    var tapGesture: UITapGestureRecognizer?
    var delegate: DayViewTappedDelegate?

    func setDelegateAndTap(_ delegate: DayViewTappedDelegate) {
        self.delegate = delegate
        self.tapGesture = UITapGestureRecognizer(target: self, action: #selector(self.dayViewTapped))
        tapGesture?.numberOfTapsRequired = 1

        self.addGestureRecognizer(tapGesture!)
    }

    @objc
    func dayViewTapped() {
        delegate!.daySelected(self.dateLbl.text!)
    }
}

VC:

class ViewController: UIViewController, DayViewTappedDelegate {
    @IBOutlet var dayBtns : [DayView]!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        for i in 0 ..< dayBtns.count {
            let date = Date().addingTimeInterval(TimeInterval(86400 * i))
            let dateFormatter = DateFormatter()
            dateFormatter.dateFormat = "dd"

            dayBtns[i].dateLbl.text = dateFormatter.string(from: date)
            dayBtns[i].dateLbl.textAlignment = .center
            dayBtns[i].setDelegateAndTap(self)
        }
    }

    func daySelected(_ selectedLabelText: String) {
        print(selectedLabelText)
    }
}