Compartilhar via

Resumo do Capítulo 15. A interface interativa

  • Artigo

Observação

Este livro foi publicado na primavera de 2016, e não foi atualizado desde então. Há muito no livro que permanece valioso, mas parte do material está desatualizado, e alguns tópicos não estão mais totalmente corretos ou completos.

Este capítulo explora oito View derivadas que permitem a interação com o usuário.

Exibir a visão geral

Xamarin.Forms Contém 20 classes instanciáveis que derivam de View , mas não Layout. Seis delas foram abordadas nos capítulos anteriores:

Os oito modos de exibição neste capítulo permitem efetivamente que o usuário interaja com tipos de dados básicos do .NET:

Tipo de dados Exibições
Double Slider, Stepper
Boolean Switch
String Entry, Editor, SearchBar
DateTime DatePicker, TimePicker

Você pode pensar nesses modos de exibição como representações visuais interativas dos tipos de dados subjacentes. Esse conceito é mais explorado no próximo capítulo, capítulo 16. Vinculação de dados.

Os restantes seis pontos de vista são abordados nos seguintes capítulos:

Controle deslizante e stepper

Ambos Slider e Stepper permitem que o usuário escolha um valor numérico de um intervalo. O Slider é um intervalo contínuo, enquanto o Stepper envolve valores discretos.

Noções básicas do controle deslizante

O Slider é uma barra horizontal que representa um intervalo de valores de um mínimo à esquerda para um máximo à direita. Ele define três propriedades públicas:

  • Value do tipo double, valor padrão de 0
  • Minimum do tipo double, valor padrão de 0
  • Maximum do tipo double, valor padrão de 1

As propriedades vinculáveis que dão suporte a essas propriedades garantem que elas sejam consistentes:

  • Para todas as três propriedades, o coerceValue método especificado para a propriedade bindable garante que Value esteja entre Minimum e Maximum.
  • O validateValue método em MinimumProperty retorna false se Minimum está sendo definido como um valor maior ou igual a Maximum, e semelhante para MaximumProperty. Retornar false do validateValue método faz com que um ArgumentException seja levantado.

Slider dispara o ValueChanged evento com um ValueChangedEventArgs argumento quando a Value propriedade é alterada, programaticamente ou quando o usuário manipula o Slider.

O exemplo SliderDemo demonstra o uso simples do Slider.

Armadilhas comuns

Tanto no código quanto no XAML, as Minimum propriedades e Maximum são definidas na ordem especificada. Certifique-se de inicializar essas propriedades para que Maximum seja sempre maior que Minimum. Se não uma exceção será lançada.

Inicializar as Slider propriedades pode fazer com que a Value propriedade seja alterada e o ValueChanged evento seja acionado. Você deve garantir que o manipulador de eventos não acesse exibições que ainda não foram criadas durante a Slider inicialização da página.

O ValueChanged evento não é acionado durante Slider a inicialização, a menos que a Value propriedade seja alterada. Você pode chamar o ValueChanged manipulador diretamente do código.

Seleção de cores do controle deslizante

O programa RgbSliders contém três Slider elementos que permitem selecionar interativamente uma cor especificando seus valores RGB:

Captura de tela tripla dos controles deslizantes R G B

O exemplo TextFade usa dois Slider elementos para mover dois Label elementos em um AbsoluteLayout e desaparecer um no outro.

A diferença do Stepper

O Stepper define as mesmas propriedades e eventos que Slider mas a Maximum propriedade é inicializada como 100 e Stepper define uma quarta propriedade:

  • Increment do tipo double, inicializado como 1

Visualmente, o Stepper consiste em dois botões rotulados – e +. Prensagem – diminui Value até Increment um mínimo de Minimum. A pressão + aumenta ValueIncrement até um máximo de Maximum.

Isso é demonstrado pelo exemplo StepperDemo.

Alternar e caixa de seleção

O Switch permite que o usuário especifique um valor booleano.

Noções básicas sobre o switch

Visualmente, o Switch consiste em um botão que pode ser desligado e ligado. A classe define uma propriedade:

Switch define um evento:

O programa SwitchDemo demonstra o Switch.

Uma caixa de seleção tradicional

Alguns desenvolvedores podem preferir um mais tradicional CheckBox ao Switch. A Xamarin.Formsbiblioteca Book.Toolkit contém uma CheckBox classe que deriva de ContentView. CheckBox é implementado pelos arquivos CheckBox.xaml e CheckBox.xaml.cs . CheckBox Define três propriedades (Text, FontSizee IsChecked) e um CheckedChanged evento.

O exemplo CheckBoxDemo demonstra isso CheckBox.

Digitando texto

Xamarin.Forms define três modos de exibição que permitem ao usuário inserir e editar texto:

  • Entry para uma única linha de texto
  • Editor para várias linhas de texto
  • SearchBar para uma única linha de texto para fins de pesquisa.

Entry e Editor derivam de InputView, que deriva de View. SearchBar deriva diretamente de View.

Teclado e foco

Em telefones e tablets sem teclados físicos, os Entryelementos , Editore SearchBar fazem com que um teclado virtual apareça. A presença deste teclado na tela está relacionada ao foco de entrada. Um modo de exibição deve ter suas IsVisible propriedades e IsEnabled definidas para true obter o foco de entrada.

Dois métodos, uma propriedade somente leitura e dois eventos estão envolvidos com o foco de entrada. Todos eles são definidos por VisualElement:

  • O Focus método tenta definir o foco de entrada para um elemento e retorna true se bem-sucedido
  • O Unfocus método remove o foco de entrada de um elemento
  • A IsFocused propriedade somente leitura indica se o elemento tem foco de entrada
  • O Focused evento indica quando um elemento recebe o foco de entrada
  • O Unfocused evento indica quando um elemento perde o foco de entrada

Escolhendo o teclado

A InputView classe da qual Entry e Editor derive define apenas uma propriedade:

Isso indica o tipo de teclado que é exibido. Alguns teclados são otimizados para URIs ou números.

A Keyboard classe permite definir um teclado com um método estático Keyboard.Create com um argumento do tipo KeyboardFlags, uma enumeração com os seguintes sinalizadores de bits:

Ao usar a linha múltipla Editor quando um parágrafo ou mais de texto é esperado, chamar Keyboard.Create é uma boa abordagem para selecionar um teclado. Para a linha Entryúnica, as seguintes propriedades estáticas somente leitura de Keyboard são úteis:

O KeyboardTypeConverter permite especificar essas propriedades em XAML, conforme demonstrado pelo programa EntryKeyboards .

Propriedades e eventos de entrada

A linha Entry única define as seguintes propriedades:

O Entry também define dois eventos:

  • TextChanged com um TextChangedEventArgs objeto, acionado sempre que a Text propriedade for alterada
  • Completed, acionado quando o usuário termina e o teclado é descartado. O usuário indica a conclusão de uma maneira específica da plataforma

O exemplo QuadraticEquations demonstra esses dois eventos.

A diferença do editor

A multilinha Editor define as mesmas Text propriedades e Font como Entry , mas não as outras propriedades. Editor também define as mesmas duas propriedades que Entry.

O JustNotes é um programa de anotações de forma livre que salva e restaura o conteúdo do Editor.

O SearchBar não deriva de InputView, por isso não tem uma Keyboard propriedade. Mas tem todas as Textpropriedades que FontPlaceholderEntry define. Além disso, SearchBar define três propriedades adicionais:

O botão de cancelamento específico da plataforma apaga o texto. O SearchBar também tem um botão de pesquisa específico da plataforma. Pressionar qualquer um desses botões gera um dos dois eventos que SearchBar define:

O exemplo SearchBarDemo demonstra o SearchBar.

Seleção de data e hora

As DatePicker exibições e TimePicker implementam controles específicos da plataforma que permitem que o usuário especifique uma data ou hora.

O DatePicker

DatePicker define quatro propriedades:

  • MinimumDate do tipo DateTime, inicializado em 1º de janeiro de 1900
  • MaximumDate do tipo DateTime, inicializado em 31 de dezembro de 2100
  • Date do tipo DateTime, inicializado para DateTime.Today
  • Format do tipo string, a cadeia de formatação .NET inicializada como "d", o padrão de data curto, resultando em uma exibição de data como "20/07/1969" nos EUA.

Você pode definir as DateTime propriedades em XAML expressando as propriedades como elementos de propriedade e usando o formato de data curta invariante de cultura ("20/07/1969").

O exemplo DaysBetweenDates calcula o número de dias entre duas datas selecionadas pelo usuário.

O TimePicker (ou é um TimeSpanPicker?)

TimePicker define duas propriedades e nenhum evento:

  • Time é do tipo TimeSpan em vez DateTimede , indicando o tempo decorrido desde a meia-noite
  • Format do tipo string, a sequência de formatação .NET inicializada para "t", o padrão de tempo curto, resultando em uma exibição de tempo como "1:45 PM" nos EUA.

O programa SetTimer demonstra como usar o TimePicker para especificar uma hora para um temporizador. O programa só funciona se você mantê-lo em primeiro plano.

SetTimer também demonstra o DisplayAlert uso do método de para exibir uma caixa de Page alerta.