O Seletor ajuda os usuários a selecionar e definir dados específicos.
Seletor
Os seletores precisam ser usados para permitir que os usuários escolham entre um número finito de itens.
Por padrão, os itens são mostrados em loop infinitamente nas duas direções. Considere desativar esse comportamento se a ordem na lista for importante ou permitir que os usuários acessem o primeiro e o último elemento com a ação de deslizar rapidamente.
Anatomia
Anatomia
A. Coluna inativa
B. Disjuntor de dois pontos
C. Coluna do seletor
D. Conteúdo principal
E. Conteúdo médio
F. Conteúdo inferior
Larguras e alturas
O grupo de seletores preenche a altura e a largura disponíveis. Há quatro opções de layout para as colunas do seletor. Cada layout é centralizado e preenche a altura disponível. As larguras das colunas são definidas pela largura necessária para acomodar o número de dígitos necessários na fonte. O seletor de data é a exceção, ele preenche a tela horizontalmente e elimina a borda.
Por exemplo, números vão resolver a largura de '00' e depois definir a largura. Em campos de texto, como o do mês, será calculado como a largura de "MMM" (a letra mais larga do alfabeto latino). Portanto, a largura e a altura (que é a altura da linha do estilo usado) serão afetadas pela fonte utilizada.
Os itens do seletor variam de tamanho no ponto de interrupção.
Uso
Confira os seguintes exemplos de seletores de data e hora
Para conferir uma implementação predefinida do seletor de data e hora, confira a Biblioteca Horologist no GitHub (link em inglês).
Se você quiser criar uma experiência semelhante, em que os usuários escolham um valor de várias partes em vários seletores, use o componente integrado PickerGroup. Este objeto usa um objeto coordenador de foco para atribuir o foco ao elemento Picker correto.
Layouts adaptáveis
TimePicker 24h
TimePicker 12H
Seletor de data
Comportamento responsivo
Aumento do tamanho do texto
Depois de mais de 225 pontos de interrupção, o tamanho da fonte do elemento Picker muda. O texto superior e inferior da coluna de rolagem lenta se ajusta (A), assim como o texto do meio. Veja abaixo alguns exemplos:
Layout de duas colunas
Abaixo do ponto de interrupção de 225 dp
Fonte: Display 2
Ponto de interrupção acima de 225 dp
Fonte: Display 1
Layout de três colunas
Abaixo do ponto de interrupção de 225 dp
Fonte: Display 3
Acima do ponto de interrupção de 225 dp
Fonte: tela 2
Aumento do tamanho do gradiente
O gradiente na coluna Seletor é definido em altura pelo espaço disponível. Os gradientes superior e inferior são definidos em um terço (33%) da altura disponível. Isso significa que, em cada tamanho de tela disponível, o gradiente é dimensionado proporcionalmente. Assento independente do layout da coluna.
Abaixo do ponto de interrupção de 225 dp
Tamanho: 33% da altura da coluna
Acima do ponto de interrupção de 225 dp
Tamanho: 33% da altura da coluna
Aumento do espaçamento entre colunas
O espaçamento entre colunas é dimensionado após o ponto de interrupção de mais de 225, começando em 2 dp ou 4 dp e aumentando para 6 dp. Isso depende do layout que você selecionou: layouts com duas ou três colunas.
Layout de duas colunas
Abaixo do ponto de interrupção de 225 dp
Lacuna de colunas de 4 dp
Acima do ponto de interrupção de 225 dp
Lacuna de colunas de 6 dp
Layout de três colunas
Abaixo do ponto de interrupção de 225 dp
Lacuna de colunas de 2 dp
Acima do ponto de interrupção de 225 dp
Lacuna de colunas de 6 dp