Resumo do Capítulo 4. Rolagem da pilha

  • Artigo

Baixar exemplo Baixar o exemplo

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 concluídos.

Este capítulo é dedicado principalmente à introdução do conceito de layout, que é o termo geral para as classes e técnicas que Xamarin.Forms usa para organizar a exibição visual de várias exibições na página.

O layout envolve várias classes derivadas de Layout e Layout<T>. Este capítulo se concentra em StackLayout.

Observação

O FlexLayout introduzido no Xamarin.Forms 3.0 pode ser usado de maneiras semelhantes, StackLayout mas com mais flexibilidade.

Também são introduzidas neste capítulo as ScrollViewclasses , Framee BoxView .

Pilhas de exibições

StackLayout deriva de Layout<View> e herda uma Children propriedade do tipo IList<View>. Você adiciona vários itens de exibição a essa coleção e StackLayout os exibe em uma pilha horizontal ou vertical.

Defina a Orientation propriedade de StackLayout como um membro da StackOrientation enumeração ou VerticalHorizontal. O padrão é Vertical.

Defina a Spacing propriedade de StackLayout como um double valor para especificar um espaçamento entre os filhos. O valor padrão é 6.

No código, você pode adicionar itens à Children coleção de StackLayout em um for loop ou foreach , conforme demonstrado no exemplo ColorLoop , ou inicializar a Children coleção com uma lista das exibições individuais, conforme demonstrado em ColorList. Os filhos devem derivar, View mas podem incluir outros StackLayout objetos.

Rolagem de conteúdo

Se um StackLayout contiver muitos filhos para exibir em uma página, você poderá colocá-lo StackLayout em um ScrollView para permitir a rolagem.

Defina a Content propriedade de ScrollView como a exibição que você deseja rolar. Isso geralmente é um StackLayout, mas pode ser qualquer exibição.

Defina a Orientation propriedade de ScrollView como um membro da ScrollOrientation propriedade , Vertical, Horizontalou Both. O padrão é Vertical. Se o conteúdo de um ScrollView for um StackLayout, as duas orientações deverão ser consistentes.

O exemplo ReflectedColors demonstra o uso de ScrollView e StackLayout para exibir as cores disponíveis. O exemplo também demonstra como usar a reflexão do .NET para obter todas as propriedades e campos estáticos públicos da Color estrutura sem a necessidade de listá-los explicitamente.

A opção Expands

Quando um StackLayout empilha seus filhos, cada filho ocupa um slot específico dentro da altura total do StackLayout que depende do tamanho do filho e das configurações de suas HorizontalOptions propriedades e VerticalOptions . Essas propriedades são valores atribuídos do tipo LayoutOptions.

A LayoutOptions estrutura define duas propriedades:

Para sua conveniência, a LayoutOptions estrutura também define oito campos estáticos somente leitura do tipo LayoutOptions que abrangem todas as combinações das duas propriedades de instância:

A discussão a seguir envolve um StackLayout com uma orientação vertical padrão. A horizontal StackLayout é análoga.

Para um vertical StackLayout, a HorizontalOptions configuração determina como um filho é posicionado horizontalmente dentro da largura do StackLayout. Uma Alignment configuração de Start, Centerou End faz com que o filho seja horizontalmente irrestrito. O filho determina sua própria largura e é posicionado à esquerda, ao centro ou à direita do StackLayout. A Fill opção faz com que o filho seja restringido horizontalmente e preencha a largura do StackLayout.

Para um vertical StackLayout, cada filho é verticalmente não treinado e obtém um slot vertical dependendo da altura do filho, nesse caso, a VerticalOptions configuração é irrelevante.

Se a vertical StackLayout em si for irrestrita, ou seja, se sua VerticalOptions configuração for Start, Centerou End, a altura do StackLayout será a altura total de seus filhos.

No entanto, se a vertical StackLayout for restrita verticalmente, se sua VerticalOptions configuração for Fill, a altura do StackLayout será a altura de seu contêiner, que pode ser maior que a altura total de seus filhos. Se esse for o caso, e se pelo menos um filho tiver uma VerticalOptions configuração com um Expands sinalizador de true, o espaço extra no StackLayout será alocado igualmente entre todas as crianças com um Expands sinalizador de true. A altura total dos filhos será igual à altura do StackLayoute a Alignment parte da VerticalOptions configuração determina como o filho é posicionado verticalmente em seu slot.

Isso é demonstrado no exemplo VerticalOptionsDemo .

Frame e BoxView

Essas duas exibições retangulares geralmente são usadas para fins de apresentação.

O Frame modo de exibição exibe um quadro retangular em torno de outro modo de exibição, que pode ser um layout como StackLayout. Frame herda uma Content propriedade de ContentView que você define para a exibição a ser exibida dentro do Frame. O Frame é transparente por padrão. Defina as três propriedades a seguir para personalizar a aparência do quadro:

  • A OutlineColor propriedade para torná-la visível. É comum definir OutlineColorColor.Accent como quando você não conhece o esquema de cores subjacente.
  • A HasShadow propriedade pode ser definida como true para exibir uma sombra preta em dispositivos iOS.
  • Defina a Padding propriedade como um Thickness valor para deixar um espaço entre o quadro e o conteúdo do quadro. O valor padrão é 20 unidades em todos os lados.

O Frame tem valores padrão HorizontalOptions e VerticalOptions de LayoutOptions.Fill, o que significa que o Frame preencherá seu contêiner. Com outras configurações, o tamanho do Frame é baseado no tamanho de seu conteúdo.

O Frame é demonstrado no exemplo FramedText .

O BoxView exibe uma área retangular de cor especificada por sua Color propriedade.

Se o BoxView for restrito (suas HorizontalOptions propriedades e VerticalOptions tiverem suas configurações padrão de LayoutOptions.Fill), o BoxView preencherá o espaço disponível para ele. Se o BoxView for irrestrito (com HorizontalOptions e LayoutOptions configurações de Start, Centerou End), ele terá uma dimensão padrão de 40 unidades quadradas. Um BoxView pode ser restrito em uma dimensão e irrestrito na outra.

Muitas vezes, você definirá as WidthRequest propriedades e HeightRequest de BoxView para dar a ele um tamanho específico. Isso é ilustrado pelo exemplo SizedBoxView .

Você pode usar várias instâncias de StackLayout para combinar um BoxView e várias Label instâncias em um Frame para exibir uma cor específica e, em seguida, colocar cada uma dessas exibições em um StackLayoutScrollView para criar a lista atraente de cores mostrada no exemplo ColorBlocks :

Captura de tela tripla dos blocos de cores

Um ScrollView em um StackLayout?

Colocar um StackLayout em um ScrollView é comum, mas colocar um ScrollView em um StackLayout também às vezes é conveniente. Em teoria, isso não deve ser possível porque os filhos de um vertical StackLayout são verticalmente irrestritos. Mas um ScrollView deve ser restringido verticalmente. Ele deve receber uma altura específica para que possa determinar o tamanho de seu filho para rolagem.

O truque é dar ScrollView ao filho da StackLayoutVerticalOptions configuração de FillAndExpand. Isso é demonstrado no exemplo blackcat .

O exemplo do BlackCat também demonstra como definir e acessar recursos do programa inseridos na biblioteca compartilhada. Isso também pode ser obtido com SAPs (Projetos de Ativos Compartilhados), mas o processo é um pouco mais complicado, como demonstra o exemplo BlackCatSap .