Prática 1: Melhorando o Formulário de Atividades

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

Exercício 1: Criando o Novo Formulário

1.1. No arquivo Main.Storyboard excluir o View Controller ActivityFormViewController

1.2. No arquivo Main.Storyboard crie um novo Table View Controller

Crie um novo Table View Controller próximo ao que foi excluído anteriormente.

1.3. Re-crie os Segues para o View Controller de Formulário

Re-crie os segues conforme a instrução abaixo:

  1. A partir do botão Add com o tipo Show sem identifier.
  2. A partir da célula de protótipo com o tipo Show com o identifier EditActivity.

1.4. Configure o View Controller de Formulário

Selecionar o View Controller e configurar as propriedades:

  • Content: Static Cells
  • Style: Grouped

1.5. Configure as Seções do View Controller de Formulário

Configure as seções de acordo com os passos:

  1. Deixe a seção com apenas uma célula.
  2. Configure a célula com a propriedade Selection para None.
  3. Replique para 5 seções.

1.6. Configure a seção de Nome

Configure a primeira seção do Table View:

  • Modifique o título da seção para Nome.
  • Insira um UITextField centralizado verticalmente e com espaçamento de 15 pontos nas * extremidades esquerda e direta, com as seguintes propriedades:
    • Placeholder: Digite o nome da atividade
    • Border Style: Sem bordas

1.7. Configure a seção de Descrição

Configure a segunda seção do Table View:

  • Modifique o título da seção para Descrição.
  • Aumente a altura da célula para 120 pontos.
  • Desenhe um UITextView ocupando o espaço da célula.
  • Configure as constraints com um *espaçamento entre as laterais de 15 pontos e espaçamento entre o topo e a parte inferior de 0 pontos*.
  • Configure as propriedades do TextView:
    • Text: Vazio
    • Background: Clear Color

1.8. Configure a seção de Repetições

Configure a terceira seção do Table View:

  • Inclua 4 linhas.
  • Modifique o título da seção para Repetições.
  • Modifique o rodapé da seção para As atividades que medem repetições, contam a quantidade de vezes que você toca a tela do celular durante uma sessão. É ideal para atividades como prática de repetições de mantras ou contagens manuais diversas.
  • Na primeira célula crie um UILabel com as propriedades:
    • Text: Medir Repetições
    • Font: System 16.0
    • Constraints:
      • Align Center Y to: Superview
      • Leading Space to: Superview - 15
  • Na segunda célula crie um UILabel com as mesmas propriedades acima apenas mudando o texto para Quantidade de Repetições
  • Na quarta célula crie um UILabel com as mesmas propriedades acima apenas mudando o texto para Vibração ao Toque
  • Na segunda célula crie um UILabel com as propriedades:
    • Text: 100
    • Font: System 16.0
    • Color: #8E8E93
    • Constraints:
      • Align Center Y to: Superview
      • Trailing Space to: Superview - 15
  • Crie um UISlider na terceira tomando todo o seu espaço e com as propriedades:
    • Value Minimum: 1
    • Value Maximum: 1000
    • Current: 100
    • Constraints:
      • Align Center Y to: Superview
      • Trailing Space to: Superview - 15
      • Leading Space to: Superview - 15
  • Crie dois objetos UISwitch na primeira e na quarta células com as propriedades:
    • Constraints:
      • Align Center Y to: Superview
      • Trailing Space to: Superview - 15

1.9. Configure a seção de Limite de Tempo

Replicar a seção anterior e ajustar os componentes:

  • Excluir a quarta célula.
  • Título da seção: Limite de Tempo
  • Rodapé da seção: Utiliza um cronometro para medir o tempo de uma atividade. Pode ser usado em conjunto com a medição de repetições, de forma que uma atividade é concluída quando se atinge o limite de repetições ou o limite de tempo.
  • Texto do UILabel da primeira célula: Medir Tempo
  • Texto do UILabel da segunda célula: Limite de Tempo
  • Texto do UILabel de detalhes da segunda célula: 30 min.
  • Propriedades do UISlider da terceira célula:
    • Value Minimum: 1
    • Value Maximum: 7200
    • Current: 1800

1.10. Configure a seção de Histórico

Configure a célula da seção de histórico modificando as seguintes propriedades:

  • Style: Basic
  • Selection: Default
  • Accessory: Disclosure Indicator
  • Texto do Label: Nenhuma sessão existente

1.11. Configure a seção de Excluir Atividade

Desenhe um UILabel centralizado na célula dessa seção e modifique suas propriedades:

  • Text: Excluir Atividade
  • Color: #E5332A
  • Constraints:
    • Align Center X to: Superview
    • Align Center Y to: Superview

Modifique a propriedade Selection da célula para Default.

Exercício 2: Atualizando a Implementação do ActivityFormViewController

2.1. Atualizando o código do ActivityFormViewController

Abra o arquivo ActivityFormViewController.swift. Declare a classe como herdeira de UITableViewController.

class ActivityFormViewController: UIViewController {
class ActivityFormViewController: UITableViewController {

Modifique a propriedade Class no Identity Inspector. Exclua os Outlets que não serão usados:

//
// MARK: - Outlets

@IBOutlet weak var nameTextField: UITextField!
@IBOutlet weak var descriptionTextField: UITextField!
@IBOutlet weak var repetitionsTextField: UITextField!
@IBOutlet weak var timeTextField: UITextField!
@IBOutlet weak var historyTextView: UITextView!

2.2. Criando os novos Outlets

Crie os outlets para os novos componentes:

//
// MARK: - Outlets

@IBOutlet weak var nameTextField: UITextField!
@IBOutlet weak var descriptionTextView: UITextView!
@IBOutlet weak var repetitionsSwitch: UISwitch!
@IBOutlet weak var repetitionsLabel: UILabel!
@IBOutlet weak var repetitionsSlider: UISlider!
@IBOutlet weak var vibrateSwitch: UISwitch!
@IBOutlet weak var timeLimitSwitch: UISwitch!
@IBOutlet weak var timeLimitLabel: UILabel!
@IBOutlet weak var timeLimitSlider: UISlider!

2.3. Corrija o código do método viewDidLoad

Atualize a implementação desse código conforme o snippet abaixo:

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    if let a = self.activity {
        self.title = "Editar Atividade"
        self.nameTextField.text = a.name
        self.descriptionTextView.text = a.details
        self.repetitionsSwitch.on = (a.repetitions!.integerValue > 0)
        self.repetitionsSlider.value = a.repetitions!.floatValue
        self.repetitionsLabel.text = a.repetitions!.stringValue
        self.timeLimitSwitch.on = (a.timeLimit!.integerValue > 0)
        self.timeLimitSlider.value = a.timeLimit!.floatValue
        self.timeLimitLabel.text = self.getTimeDescription(a.timeLimit!.integerValue)
    } else {
        self.title = "Nova Atividade"
    }
}

2.4. Inclua os métodos auxiliares

Inclua os métodos abaixo na função de métodos auxiliares:

func getTimeComponents(seconds: Int) -> (Int, Int) {
    var (hours, minutes): (Int, Int)

    hours = Int(seconds) / 60 / 60
    minutes = Int(seconds) / 60 - (hours * 60)

    return (hours, minutes)
}

func getTimeDescription(seconds: Int) -> String {
    let (h, m) = getTimeComponents(seconds)
    if h > 0 {
        return "\(h) h, \(m) min."
    } else {
        return "\(m) min."
    }
}

2.5. Corrija o método setActivityData:

Corrija o método setActivityData: conforme o snippet abaixo:

func setActivityData(activity: Activity) {
    activity.name = self.nameTextField.text
    activity.details = self.descriptionTextView.text
    activity.enableVibration = self.vibrateSwitch.on
    activity.repetitions = self.repetitionsSwitch.on ? Int(self.repetitionsSlider.value) : 0
    activity.timeLimit = self.timeLimitSwitch.on ? Int(self.timeLimitSlider.value) : 0
}
```s

#### 2.6. Inclua os Action Methods dos Sliders
Inclua os **Action Methods** dos **UISliders** conforme o código abaixo:

```swift
@IBAction func repetitionsValueChanged(sender: UISlider) {
    self.repetitionsLabel.text = "\(Int(sender.value))"
}

@IBAction func timeLimitValueChanged(sender: UISlider) {
    self.timeLimitLabel.text = self.getTimeDescription(Int(sender.value))
}

2.7. Criar o botão Done

Crie o botão Done na barra de navegação no lado direito e associe ao Action Method doneTapped:.

2.8. Implemente a funcionalidade de exclusão de Atividades

Inclua o código abaixo para implementar a função de excluir atividades:

//
// MARK: - UITableViewDelegate

override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    let indexPathT = (indexPath.section, indexPath.row)
    switch indexPathT {
    case (5, 0):
        let alert = UIAlertController(title: nil, message: nil, preferredStyle: .ActionSheet)
        alert.addAction(UIAlertAction(title: "Apagar Atividade", style: .Destructive) {
            (action) in
            TraqtDataContext.sharedInstance.activities.delete(self.activity!.activityId!)
            self.navigationController?.popViewControllerAnimated(true)
            })
        alert.addAction(UIAlertAction(title: "Cancelar", style: .Cancel, handler: nil))

        self.tableView.deselectRowAtIndexPath(indexPath, animated: true)
        self.presentViewController(alert, animated: true, completion: nil)
    default:
        break
    }
}

2.9. Esconda o Teclado quando o Usuário rolar o Table View

Inclua o seguinte código no View Controller:

//
// MARK: - UIScrollViewDelegate

override func scrollViewWillBeginDragging(scrollView: UIScrollView) {
    self.view.endEditing(true)
}

2.10. Associe o View Controller a Classe

No arquivo Main.Storyboard associe o Table View Controller criado a classe ActivityFormViewController.swift que acabamos de ajustar, re-criando seus outlets.