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:
- A partir do botão Add com o tipo Show sem identifier.
- 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:
- Deixe a seção com apenas uma célula.
- Configure a célula com a propriedade Selection para None.
- 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
- Constraints:
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.