Partilhar 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.Formscontém 20 classes instanciáveis que derivam, mas não Layout.View Seis deles foram abordados em capítulos anteriores:

As oito exibições 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 nessas exibições como representações visuais interativas dos tipos de dados subjacentes. Este conceito é explorado mais no próximo capítulo, Capítulo 16. Associação de dados.

Os seis pontos de vista restantes 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 a 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 associá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 associável garante que Value esteja entre Minimum e Maximum.
  • O validateValue método on MinimumProperty retorna false if 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 aciona 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 and 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.

A inicialização das 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 RGB

O exemplo TextFade usa dois Slider elementos para mover dois Label elementos através de um AbsoluteLayout e esmaecer 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 +. Pressionar – diminui Value em Increment até um mínimo de Minimum. Pressionar + aumenta Value até Increment um máximo de Maximum.

Isso é demonstrado pelo exemplo StepperDemo.

Interruptor e caixa de seleção

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

Noções básicas do switch

Visualmente, consiste Switch em uma alternância que pode ser desativada e ativada. A classe define uma propriedade:

Switch define um evento:

O programa SwitchDemo demonstra o Switch.

Uma CheckBox tradicional

Alguns desenvolvedores podem preferir um formato 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 derivar 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. Uma exibição deve ter suas IsVisible propriedades e IsEnabled definidas como true para 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 for 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 obtém 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 derivam define apenas uma propriedade:

Isso indica o tipo de teclado 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 multilinha 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, disparado sempre que a Text propriedade é alterada
  • Completed, disparado quando o usuário terminar e o teclado for descartado. O usuário indica a conclusão de 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.

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, portanto, não tem uma Keyboard propriedade. Mas ele tem todas as Textpropriedades , Font, e Placeholder que Entry 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 possui um botão de pesquisa específico da plataforma. Pressionar qualquer um desses botões gera um dos dois eventos que SearchBar definem:

O exemplo SearchBarDemo demonstra o SearchBar.

Seleção de data e hora

As DatePicker exibições and 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 caracteres de formatação do .NET inicializada como "d", o padrão de data abreviada, resultando em uma exibição de data como "20/07/1969" nos EUA.

Você pode definir as DateTime propriedades em XAML expressando-as como elementos de propriedade e usando o formato de data abreviada invariável 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 de DateTime, indicando o tempo decorrido desde a meia-noite
  • Format do tipo string, a cadeia de caracteres de formatação do .NET inicializada como "t", o padrão de tempo curto, resultando em uma exibição de hora como "13h45" nos EUA.

O programa SetTimer demonstra como usar o TimePicker para especificar um tempo para um temporizador. O programa só funciona se você o mantiver em primeiro plano.

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