Continuando o desenvolvimento do aplicativo com NativeScript, vou adicionar alguns elementos e funcionalidades.
Se você não leu ainda o primeiro post, dá uma lida NativeScript: ToDo App – Estrutura base.
Eu deixei o botão de adicionar itens na ActionBar no formato de pop-up, do lado direito, no menu de três pontos na vertical. Mas essa é uma opção é ideal para quando se tem uma lista de botões. Também dá para deixar o botão direto na ActionBar, nesse caso é só remover o atributo android.position=”popup” da tag ActionItem.
Outra opção é usar um floating button, geralmente visto em aplicativos android com material design e na posição inferior direta. O Alexander Ziskind tem uma série de vídeos ensinando a criar um componente para esse tipo de botão. Também tem o plugin NativeScript-FloatingActionButton e é ele que vou usar.
Para instalar o plugin
|
1 |
tns plugin add nativescript-floatingactionbutton |
Para configurar é fácil, será necessário um imagem para o “+”, um estilo e o registro da tag do botão. Existe um site que gera imagens para aplicativos Android – também pode ser usado para iOS – chamado Android Asset Studio. As imagens devem ficar na pasta /app/App_Resources/[Android|iOS].
O estilo é para dar cor e tamanho do botão, que pode ficar no arquivo app.css ou em um css só para o componente que você quer usar:
|
1 2 3 4 5 6 7 8 |
.fab-button { height: 70; width: 70; margin: 15; background-color: #F57C00; horizontal-align: right; vertical-align: bottom; } |
O registro da tag do botão é feito antes do bootstrap do aplicativo, ou seja, no arquivo main.ts.
|
1 2 |
import { registerElement } from "nativescript-angular/element-registry"; registerElement("FAB", () => require("nativescript-floatingactionbutton").Fab); |
O primeiro parâmetro da função registerElement() é o nome da tag, nesse caso FAB, e pode ser trocado por outro nome.
No HTML do componente TodoListComponent, eu comentei a ActionItem e adicionei o botão no final chamando a mesma função addItem() da ActionItem. Uma dica é usar as tags condicionais de cada sistema operacional para mostrar a ActionItem só no iOS e o floating button só no Android.
|
1 2 3 4 5 6 7 8 9 |
<ActionBar title="ToDo List" class="action-bar"> <ios> <ActionItem (tap)="addItem()" text="Add" ios.systemIcon="4" ios.position="right" android.position="popup"></ActionItem> </ios> </ActionBar> <android> <FAB (tap)="addItem()" icon="res://add" rippleColor="#f1f1f1" class="fab-button"></FAB> </android> |
Para verificar e atualizar o status da tarefa eu uso o widget switch, que é como um checkbox do HTML. No StackLayout que fica dentro do template da ListView, eu adicionei um atributo orientation=”horizontal” e adicionei o switch dentro. A propriedade checked, do switch, é preenchida com o item.isDone e no evento tap chamo a função updateStatus() passando o id do ToDo.
|
1 2 3 4 |
<StackLayout orientation="horizontal" [nsRouterLink]="['/detail', item.id]"> <Switch [checked]="item.isDone" (tap)="updateStatus(item.id)"></Switch> <Label [text]="item.title" class="list-group-item todo-title"></Label> </StackLayout> |
Veja como está ficando:
O código dessa parte do aplicativo está no github.