ios - 使用 UIViewCells 创建计时器

Question

我正在开发一个计时器应用程序。如此处所示 Timer App .此计时器应用程序适用于自定义 UIView Cell。一切正常，直到您创建的计时器(单元格)多于显示的计时器(单元格)。例如，假设我添加了 15 个计时器，其中 10 个显示(显示在屏幕上)，5 个不显示。如果我启动显示的其中一个计时器，然后向下滚动以显示其余计时器，您会看到其中一个已经在运行，而无需手动启动它。好像是复制的一样。我知道系统会重复使用这些单元格。我怎样才能避免这种情况？我怎样才能使计时器独立工作，而不管计时器有多少？

Error Screenshot

TimerTableViewCell: UITableViewCell,UITextFieldDelegate {

// MARK: - Properties
var time = 30
var displayTime = 30
var counterRun = NSTimer()
var startTime = NSTimeInterval()
var currentTime = NSTimeInterval()

@IBOutlet weak var timeLabel: UILabel!
@IBOutlet weak var startLabel: UIButton!
@IBOutlet weak var numberText: UITextField!
@IBOutlet weak var buttonImage: UIButton!

// MARK: - Defaults
override func awakeFromNib() {
    super.awakeFromNib()
    /// Initialization code
    numberText.delegate = self

}
override func setSelected(selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    /// Configure the view for the selected state
}

// MARK: Delegate Function

func textFieldShouldReturn(textField: UITextField) -> Bool {
    /// Hide the keyboard
    numberText.resignFirstResponder()
    return true
}


// MARK: Actions

@IBAction func startButton(sender: UIButton) {
    /// Makes time run
    if displayTime == 0 {
        time = 30
        displayTime = 30
        timeLabel.text = "\(displayTime)"
        counterRun = NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: "timeRunner", userInfo: nil, repeats: true)
        startTime = NSDate.timeIntervalSinceReferenceDate()
        startLabel.selected = true
        startLabel.setImage(UIImage(named: "Stop"), forState: .Selected)
    }
    else if startLabel.selected == true {
        startLabel.selected = false
        startLabel.setImage(UIImage(named: "Start"), forState: .Normal)
        counterRun.invalidate()
        time = displayTime
    }
    else {
        startLabel.selected = true
        startLabel.setImage(UIImage(named: "Stop"), forState: .Selected)
        counterRun = NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: "timeRunner", userInfo: nil, repeats: true)
        startTime = NSDate.timeIntervalSinceReferenceDate()
    }
}

func timeRunner(){
    currentTime = NSDate.timeIntervalSinceReferenceDate()

    let elapsedTime: NSTimeInterval = currentTime - startTime
    ///calculate the minutes in elapsed time.
    let minutes = UInt8(elapsedTime / 1)
    let minutesInt = Int(minutes)
    displayTime = time - minutesInt
    timeLabel.text = "\(displayTime)"

    timeStopper()
}

func timeStopper(){
    if displayTime <= 0 {
        startLabel.selected = false
        startLabel.setImage(UIImage(named: "Start"), forState: .Normal)
        counterRun.invalidate()
    }
}

@IBAction func refreshButton(sender: UIButton) {
    startLabel.selected = false
    startLabel.setImage(UIImage(named: "Start"), forState: .Normal)
    time = 30
    displayTime = 30
    timeLabel.text = "\(displayTime)"
    counterRun.invalidate()
}

@IBAction func changePhoto(sender: UIButton) {
    let duckPhoto = UIImage(named: "Duck")
    let swanPhoto = UIImage(named: "Swan")

    /// Changes the photo of the cell.
    if buttonImage.selected == false {
        buttonImage.selected = true
        buttonImage.setImage(swanPhoto, forState: .Selected)
    }
    else if buttonImage.selected == true {
        buttonImage.selected = false
        buttonImage.setImage(duckPhoto, forState: .Normal)
    }
}

这是 UITableViewController

class TimerTableViewController: UITableViewController {


// MARK: - Properties

var timers = [Time]()

override func viewDidLoad() {
    super.viewDidLoad()

    /// Uncomment the following line to preserve selection between presentations
    /// self.clearsSelectionOnViewWillAppear = false

    /// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
     self.navigationItem.leftBarButtonItem = self.editButtonItem()
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    /// Dispose of any resources that can be recreated.
}

// MARK: - Table view data source


override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return 1
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return timers.count
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let identifier = "TimerCell"
    let cell = tableView.dequeueReusableCellWithIdentifier(identifier, forIndexPath: indexPath) as! TimerTableViewCell

    let time = timers[indexPath.row]

    cell.timeLabel.text = "\(time.time)"
    cell.buttonImage.setImage(time.photo, forState: .Normal)
    return cell
}



/// Override to support conditional editing of the table view.
override func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) -> Bool {
    /// Return false if you do not want the specified item to be editable.
    return true
}



/// Override to support editing the table view.
override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
    if editingStyle == .Delete {
        /// Delete the row from the data source
        timers.removeAtIndex(indexPath.row)

        tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: .Fade)
    } else if editingStyle == .Insert {
        /// Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
    }    
}

/// Override to support rearranging the table view.
override func tableView(tableView: UITableView, moveRowAtIndexPath fromIndexPath: NSIndexPath, toIndexPath: NSIndexPath) {

}

/// Override to support conditional rearranging of the table view.
override func tableView(tableView: UITableView, canMoveRowAtIndexPath indexPath: NSIndexPath) -> Bool {
    /// Return false if you do not want the item to be re-orderable.
    return true
}


// MARK: Actions

@IBAction func addButton(sender: UIBarButtonItem) {

    let photo = UIImage(named: "Duck")
    let time = Time(time: 30, photo: photo!)

    let newIndexPath = NSIndexPath(forRow: timers.count, inSection: 0)
    timers.append(time)
    tableView.insertRowsAtIndexPaths([newIndexPath], withRowAnimation: .Bottom)

}

以及制作定时器对象的类

class Time {
let time: Int
let photo: UIImage

init(time: Int, photo: UIImage){
    self.time = time
    self.photo = photo
}

谢谢

Answer 1

不要像我最初回答的那样覆盖表格 View 单元格的重用行为，最好使用它。原因是这是您需要在应用程序中经常使用的东西，并且它也符合 iOS 中主要使用的 MVC 范例。

表格单元格只是一个 View ，因此独立于您在 MVC 范例中的模型。

出于效率原因，您的 View (表格 View 单元格)被重用，这对每个人都有好处。

您将计时器放在一个数组中，它代表您的模型。您正在使用 cellForRowAtIndexPath: 从您的 Controller 中的模型更新 View ，这很棒，但有一点除外。

您犯的错误是您将模型数据存储在 TableView 单元格 View TimerTableViewCell 中，而应该仅限于在模型中呈现数据。通过在您的 View 中存储模型数据，您会遇到在重用 View 时模型数据不正确的问题。

NSTimer 需要从您的单元格 View 移动到您的 Time 类，以便它独立于您的 View 。当您创建新的 Time 对象时，它将成为一个实例成员。您的 Time 对象数组将在您创建新计时器时保存独立运行的计时器。

一旦计时器与 View 分离，当通过dequeueReusableCellWithIdentifier 回收 View 时，您将不会遇到模型数据混淆的问题。

可重用单元格的挑战将是确保单元格在每次重用时都显示正确的模型数据。在新单元格完全呈现之前，单元格可能暂时可见，您可能需要暂时隐藏新单元格，直到数据完全更新。

这可能不是您一直在寻找的快速解决方案，但它将极大地帮助您实现 MVC。