Rolando conteúdo

Tenha em mente que um programa Xamarin.Forms tem acesso às bibliotecas de classe básica .NET e pode usar a reflexão .NET para obter informações sobre todas as classes e estruturas definidas em uma montagem, tais como Xamarin.Forms.Core. Isto sugere que a obtenção dos campos estáticos e propriedades da estrutura de cores pode ser automatizado.

A maioria das reflexões .NETcomeça com um objeto Type. Você pode obter um objeto Type para qualquer classe ou estrutura usando o operador typeof em C#. Por exemplo, a expressão typeof (Color) retorna um objeto Type para a estrutura Color.

Na versão .NET disponível no PCL, um método de extensão para a classe Type, denominado GetTypeInfo, retorna um objeto TypeInfo a partir do qual as informações adicionais podem ser obtidas. Mas que não é necessário neste programa. Em vez disso, outros métodos de extensão são definidos para a classe Type, nomeados GetRuntimeFields e GetRuntimeProperties, que retornam os campos e propriedades do tipo. Estes são na forma de coleções dos objetos FieldInfo e PropertyInfo. Destes, os nomes, bem como os valores das propriedades podem ser obtidas.

Isso é demonstrado pelo programa ReflectedColors. O arquivo ReflectedColorsPage.cs requer o using para System.Reflection.

Em duas declarações foreach separadas, a classe ReflectedColorsPage percorre todos os campos e as propriedades da estrutura Color. Para todos os membros estáticos públicos que retornam valores de Color, os dois loops chamam o método CreateColorLabel para criar uma Label com o valor da cor e nome e em seguida, adiciona ao StackLayout.

Ao incluir todos os campos estáticos públicos e propriedades, o programa lista Color.Transparent, Color.Default, e Color.Accent juntamente com os 17 campos estáticos exibidos no programa anterior.

Perto do fim do construtor, o StackLayout está definido para a propriedade Content do

ScrollView, o qual é então ajustado para a propriedade Content da página.

Ao usar o código para adicionar os herdeiros a um StackLayout, é geralmente uma boa idéia que o StackLayout esteja desconectado da página que eventualmente irá exibi-lo. Cada novo filho adicionado ao StackLayout faz com que o tamanho da StackLayout mude, e se o StackLayout estiver ligado a página, muito do layout vai para algo que não é realmente necessário.

O método CreateColorLabel na classe tenta fazer com que cada cor seja visível, definindo um fundo contrastante. O método calcula um valor de luminância com base na média ponderada normal dos componentes vermelho, verde e azul e, em seguida, seleciona um fundo branco ou preto.

Esta técnica não vai funcionar para Transparent, de modo que o item não pode ser exibido em tudo, e o método trata Color.Default como um caso especial e mostra que a cor (seja ela qual for) contra um fundo Color.Default.

Aqui estão os resultados, que ainda estão muito longe de ser esteticamente satisfatórios:

Mas você pode rolar a tela porque o StackLayout é herdeiro de um ScrollView. Você deve se lembrar que a classe Layout<T> define a propriedade Children que StackLayout herda. A classe genérica Layout<T> é derivada da classe não genérica Layout, e ScrollView também deriva da classe não genérica Layout. Teoricamente, ScrollView é um tipo de objeto Layout – mesmo que tenha apenas um filho.

Como você pode ver na captura de tela, a cor de fundo da Label extende-se a toda a largura do StackLayout, o que significa que cada Label é tao larga quanto o StackLayout.

Vamos experimentar um pouco para obter uma melhor compreensão da disposição do Xamarin.Forms. Para estas experiências, você pode querer temporariamente dar a StackLayout e o ScrollView cores de fundo distintas.

Objetos de layout usualmente tem fundo transparente por padrão. Embora ocupem uma area sobre a tela, não são visiveis diretamente. Dar cores temporarias a objetos de layout é uma ótima maneira de ver exatamente onde eles estão na tela. É uma boa técnica de depuração para layouts complexos.

Você vai descobrir que um StackLayout azul aparece para fora no espaço entre a Label view individual – este é um resultado padrão da propriedade Spacing do StackLayout – e também através da Label para Color.Default, que tem um fundo transparente.

Tente definir a propriedade HorizontalOptions de todas as Label view para LayoutOptions.Start:

Agora, o fundo azul do StackLayout é ainda mais proeminente porque todas as Label views ocupam apenas a quantidade de espaço horizontal que o texto requer, e todos eles são empurrados para o lado esquerdo. Porque cada Label view tem uma largura diferente, esta visualização parece ainda mais feia do que a primeira versão.

Agora remova as definições de HorizontalOptions na Label, e em vez disso defina um HorizontalOptions no StackLayout:

Agora, o StackLayout se tornou tão larga quanto a Label mais larga. O StackLayout abraça as labels dentro do ScrollView – a esquerda no iPhone e Android, e no centro (curiosamente) no Windows Phone – com fundo vermelho do ScrollView agora visualizado claramente.

Quando você começa a construir uma árvore de objetos visuais, esses objetos adquirem uma relação de pai-filho. Um objeto pai é muitas vezes referido como o recipiente do seu filho ou filhos porque a localização e tamanho da criança está contida dentro de seu pai.

Por padrão, HorizontalOptions e VerticalOptions são definidos como LayoutOptions.Fill, que significa que os tipos de visualização filho tentam preencher o recipiente pai. (Pelo menos com os recipientes encontrados até agora. Como você verá, as outras classes de layout têm um comportamento um pouco diferente.) Mesmo uma Label preenche seu recipiente pai por padrão, embora sem uma cor de fundo, a Label parece ocupar apenas a quantidade de espaço que requer.

Definindo uma propriedade view HorizontalOptions ou VerticalOptions para LayoutOptions.Start, Center ou End efetivamente força a visualização a encolher – horizontal, vertical ou ambos – para um único tamanho que a visualização requer.

Um StackLayout tem este mesmo efeito em tamanho vertical de seu filho: cada filho em um StackLayout ocupa apenas a altura que exige. Definindo a propriedade VerticalOptions no filho de um StackLayout para Start, Center, ou End não tem efeito! No entanto, uma view filho ainda se expande para preencher a largura do StackLayout, exceto quando o filho recebe uma propriedade HorizontalOptions diferente de LayoutOptions.Fill.

Se um StackLayout está definido para a propriedade Content de um ContentPage, você pode definir HorizontalOptions ou VerticalOptions no StackLayout. Essa propriedade tem dois efeitos: primeiro, eles encolhem a largura ou altura (ou ambos) do StackLayout para o tamanho dos seus filhos, e segundo, eles governam onde o StackLayout está posicionado em relação à página.

Se um StackLayout está numa ScrollView, o ScrollView faz com que o StackLayout seja apenas tão alto quanto a soma das alturas dos seus filhos. Isto é como o ScrollView pode determinar como rolar verticalmente um StackLayout. Você pode continuar a definir HorizontalOptions no StackLayout para controlar a largura e a colocação horizontal.

No entanto, o que você não quer fazer é definir VerticalOptions no ScrollView para LayoutOptions.Start, Center ou End. O ScrollView deve ser capaz de deslocar o seu conteúdo filho, e a única maneira de fazer isso é forçando seu filho (geralmente um StackLayout) a assumir uma altura que reflete apenas o que o filho precisa e, em seguida, usar a altura deste filho e sua própria altura para calcular o quanto rolar esse conteúdo.

Se você define VerticalOptions no ScrollView para LayoutOptions.Start, Center ou End, você está efetivamente dizendo ao ScrollView para ser tão alto quanto precisa ser. Mas o que é isso? Porque ScrollView pode rolar o seu conteúdo, ele não precisa ter qualquer altura particular, então ele vai encolher para nada.

Embora colocar um StackLayout em um ScrollView é normal, colocar um ScrollView em um StackLayout é perigoso. O StackLayout forçará o ScrollView ter uma altura de apenas o que requer, e que a altura necessária é praticamente zero.

No entanto, existe um modo para colocar um ScrollView num StackLayout com sucesso, e que será demonstrada em breve.

A discussão anterior aplica-se a um StackLayout orientado verticalmente e ScrollView. StackLayout possui uma propriedade chamada Orientation que você pode definir para um membro de StackOrientation - Vertical (o padrão) ou horizontal. Da mesma forma, ScrollView tem uma propriedade ScrollOrientation que você define para um membro de ScrollOrientation. Tente esta:

Agora os Labels views são empilhados horizontalmente, e o ScrollView preenche a página na vertical, mas permite deslizamento horizontal do StackLayout, que verticalmente preenche o ScrollView.

Parece muito estranho com as opções de layout verticais padrão, mas aqueles poderiam ser fixados para torná-la um pouco melhor.