Prática 2: Melhorando o Histórico de Atividades

Assista e acompanhe a prática em sala dos exercícios "Melhorando o Histórico de Atividades". Execute as instruções conforme a apresentação.

Exercício 1: Criando a tela de Histórico

1.1. Desenhar um Table View Controller para Histórico

Desenhar um Table View Controller para Histórico próximo ao View Controller de Formulário de Atividade.

1.2. Criar um Segue para o View Controller de Histórico

Criar um Segue do tipo Show para o View Controller de Histórico a partir da célula de histórico de atividades do formulário.

1.3. Alterar o Título do View Controller para Histórico

Exercício 2: Criando uma Célula Personalizada

2.1. Adicionar a Pasta de Icones no Catálogo de Imagens

Baixe os ícones que serão utilizados nessa tela a partir deste link. Copie-os para dentro da subpasta Icons no catálogo de imagens do projeto (Image Catalog).

2.2. Configurar a Prototype Cell

Configurar a prototype Cell para 64 pontos de altura. Configurar o identifier da célula para SessionCell.

2.3. Incluir os Labels no Prototype Cell

Desenhar 3 UILabel's na tela com as seguintes Propriedades:

• Label "Data" - Origin: (32, 7)
• Label "Tempo" - Origin: (32, 36)
• Label "Repetições" - Origin: (152, 36)

2.4. Incluir 4 Image Views

Desenhar 4 UIImageView's na tela com as seguintes Propriedades:

• Data:
  • Image: Icon_Date
  • Frame: (8, 8, 16, 16)
• Tempo:
  • Image: Icon_ElapsedTime
  • Frame: (8, 39, 16, 16)
• Repetições:
  • Image: Icon_Repetitions
  • Frame: (128, 39, 16, 16)
• Resultado:
  • Image: Icon_SessionOutcome_0
  • Frame: (560, 16, 32, 32)

2.5. Incluir as Constraints do Auto-Layout

Usando o menu Resolve Auto Layout Constraints selecionar a opção Add Missing Constraints na seção All Views in Table View Controller.

Exercício 3: Criando uma classe para a Célula Personalizada

3.1. Criar a Classe HistoryTableViewCell

Criar a nova classe no grupo Views, usando o template Cocoa Touch Class que herda de UITableViewCell

2. Atualizar o Código da Classe

Substituir a implementação padrão pelo código abaixo:

class HistoryTableViewCell: UITableViewCell {

    //
    // MARK: - Outlets


    //
    // MARK: - Properties

}

3.3. Modificar o Custom Class da célula para HistoryTableViewCell

3.4. Criar Outlets para os Componentes da Tela

Criar os Outlets conforme o código abaixo:

@IBOutlet weak var dateLabel: UILabel!
@IBOutlet weak var elapsedTimeLabel: UILabel!
@IBOutlet weak var repetitionsLabel: UILabel!
@IBOutlet weak var repetitionsIcon: UIImageView!
@IBOutlet weak var sessionOutcomeIcon: UIImageView!

3.5. Inclua a Propriedade session

Inclua o seguinte código na seção Properties:

var session: Session? {
    didSet {
        if let s = self.session {
            let dateFormatter = NSDateFormatter()
            dateFormatter.dateStyle = NSDateFormatterStyle.LongStyle
            dateFormatter.timeStyle = NSDateFormatterStyle.MediumStyle

            self.sessionOutcomeIcon.image = UIImage(named: "Icon_SessionOutcome_\(s.sessionOutcome)")
            self.dateLabel.text = dateFormatter.stringFromDate(s.startTime!)
            self.elapsedTimeLabel.text = NSTimeInterval(s.elapsedTime!.floatValue).getFormattedInterval(miliseconds: false)

            if s.activity!.repetitions!.integerValue > 0 {
                self.repetitionsIcon.hidden = false
                self.repetitionsLabel.hidden = false
                self.repetitionsLabel.text = "\(s.totalRepetitions!)"
            } else {
                self.repetitionsIcon.hidden = true
                self.repetitionsLabel.hidden = true
            }
        }
    }
}

Exercício 4: Configurando o Table View

4.1. Criar a Classe SessionHistoryTableViewController

Criar a classe com o nome SessionHistoryTableViewController, herdando de SwiftyIOTableViewController.

4.2. Ajustar a propriedade Class do View Controller de Histórico para a nova Classe

4.3. Incluir a Propriedade activity

Inclua a propriedade activity usando o código abaixo:

//
// MARK: - Properties

var activity: Activity!

4.4. Atualizar o método viewDidLoad

Atualizar o método viewDidLoad conforme o código abaixo:

override func viewDidLoad() {
    super.viewDidLoad()

    let predicate = NSPredicate(format: "%K == %@", "activity.activityId", self.activity.activityId!)
    self.fetchedResultsController = TraqtDataContext.sharedInstance.sessions.getFetchedResultsController(predicate, sectionNameKeyPath: nil, cacheName: nil, sortDescriptors: NSSortDescriptor(key: "startTime", ascending: false))
}

4.5. Incluir os métodos necessários do UITableViewDelegate

Incluir os métodos conforme o código abaixo:

//
// MARK: - UITableViewDataSource/UITableViewDelegate

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("SessionCell", forIndexPath: indexPath) as! HistoryTableViewCell
    let session = self.fetchedResultsController!.objectAtIndexPath(indexPath) as! Session

    cell.session = session
    return cell
}

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return 64.0
}

4.6. Atualizar o método prepareForSegue:identifier: em ActivityFormViewController

Atualizar o método usando o código abaixo:

//
// MARK: - Navigation

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    if let destVC = segue.destinationViewController as? SessionHistoryTableViewController {
        destVC.activity = self.activity
    }
}

4.7. Adicione um Outlet para o Label da Celula de Histórico em ActivityFormViewController

Adicione o Label conforme o código abaixo:

@IBOutlet weak var historyLabel: UILabel!

4.8. Atualizar o Código do Método viewDidLoad em ActivityFormViewController

Atualizar o código do método conforme a listagem abaixo:

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    if let a = self.activity {
        // Código anterior...
        // ...

        // Quantidade de sessões dessa atividade
        if let sessions = a.sessions?.count {
            if sessions > 0 {
                self.historyLabel.text = "\(sessions) " + ((sessions == 1) ? "Sessão" : "Sessões")
            }
        }
    } else {
        self.title = "Nova Atividade"
    }
}