Xamarin.Forms Tutorial de Imagem
Antes de tentar realizar este tutorial, você deve ter concluído com sucesso:
- Crie seu primeiro Xamarin.Forms aplicativo de início rápido.
- Tutorial de StackLayout.
Neste tutorial, você aprenderá a:
- Crie um Xamarin.Forms
Imageem XAML. - Personalizar a aparência de
Image. - Exibir um arquivo de imagem local de cada projeto da plataforma.
Você usará o Visual Studio 2019 ou Visual Studio para Mac para criar um aplicativo simples que demonstra como exibir uma imagem e personalizar a aparência. Estas capturas de tela mostram o aplicativo final:
Você também usará o XAML Hot Reload para Xamarin.Forms ver as alterações da interface do usuário sem recriar seu aplicativo.
Criar uma imagem
Para concluir este tutorial, você precisará ter o Visual Studio 2019 (versão mais recente) com a carga de trabalho Desenvolvimento mobile com .NET instalada. Além disso, você precisará de um Mac emparelhado para compilar o aplicativo do tutorial no iOS. Para obter informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin. Para obter informações sobre como conectar o Visual Studio 2019 a um host de build Mac, confira Emparelhar com o Mac para desenvolvimento no Xamarin.iOS.
Inicie o Visual Studio e crie um novo aplicativo em branco Xamarin.Forms chamado ImageTutorial.
Importante
Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada ImageTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.
Para obter mais informações sobre a biblioteca do .NET Standard que é criada, consulte Anatomia Xamarin.Forms de um Xamarin.Forms aplicativo no Quickstart Deep Dive.
No Gerenciador de Soluções, no projeto ImageTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ImageTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" HeightRequest="300" /> </StackLayout> </ContentPage>Esse código define declarativamente a interface do usuário para a página, que é composta por um
Imageem umStackLayout. A propriedadeImage.Sourceespecifica a imagem a ser exibida por meio de um URI. A propriedadeImage.Sourceé do tipoImageSource, o que permite que as imagens sejam originadas de arquivos, URIs ou recursos. Para obter mais informações, consulte Exibindo imagens no guia Imagens em Xamarin.Forms .A propriedade
HeightRequestespecifica a altura deImageem unidades independentes do dispositivo.Observação
Não é necessário definir a propriedade
WidthRequestneste exemplo. Isso acontece porque, por padrão,Imagemantém a taxa de proporção da imagem.Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador remoto de iOS ou do Android Emulator escolhido:
Observação
A exibição
Imagearmazena automaticamente as imagens baixadas por 24 horas. Para obter mais informações, consulte Cache de imagem baixado no guia Imagens emXamarin.Forms.
Personalizar a aparência
Em MainPage.xaml, modifique a declaração
Imagepara personalizar sua aparência:<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" Aspect="Fill" HeightRequest="{OnPlatform iOS=300, Android=250}" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />Esse código define a propriedade
Aspect, que define o modo de escala da imagem, comoFill. O membroFillé definido na enumeraçãoAspecte alonga a imagem para preencher completamente a exibição, independentemente de se a imagem está distorcida. Para obter mais informações sobre dimensionamento de imagem, consulte Exibindo imagens no guia Imagens em Xamarin.Forms .A extensão de marcação
OnPlatformpermite que você personalize a aparência da interface do usuário por plataforma. Neste exemplo, a extensão de marcação é usada para definir as propriedadesHeightRequesteWidthRequestcomo 300 unidades independentes de dispositivo em iOS e 250 unidades independentes de dispositivo em Android. Para obter mais informações sobre a extensão de marcaçãoOnPlatform, confira extensão de marcação OnPlatform no guia Consumindo extensões de marcação XAML.Além disso, a propriedade
HorizontalOptionsespecifica que a imagem será centralizada horizontalmente.Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador remoto de iOS ou do Android Emulator de sua preferência:
Interrompa o aplicativo no Visual Studio.
Exibir uma imagem local
Os arquivos de imagem podem ser adicionados a projetos de plataforma e referenciados a partir de Xamarin.Forms código compartilhado. Esse método de distribuição de imagens é necessário quando as imagens são específicas da plataforma, como ao usar resoluções diferentes em diferentes plataformas ou designs ligeiramente diferentes.
Neste exercício, você modificará a solução ImageTutorial para exibir uma imagem local, em vez de uma imagem baixada de um URI. A imagem local é o logotipo do Xamarin, que deve ser baixado clicando no botão abaixo.
Importante
Para usar uma única imagem em todas as plataformas o mesmo nome de arquivo deve ser usado em todas as plataformas, e deve ser um nome de recurso válido do Android (ou seja, apenas letras minúsculas, números, sublinhado e ponto são permitidos).
Na Gerenciador de Soluções, no projeto ImageTutorial.iOS, expanda Catálogos de Ativos e clique duas vezes em Ativos para abri-lo. Em seguida, na guia Assets.xcassets, clique no botão Mais e selecione Adicionar Conjunto de Imagens:
Na guia Assets.xcassets, selecione o novo conjunto de imagens e o editor será exibido:
Arraste XamarinLogo.png de seu sistema de arquivos para a caixa 1x para a categoria Universal:
Na guia Assets.xcassets, clique com o botão direito do mouse no nome do conjunto de imagens e altere seu nome para XamarinLogo:
Salve e feche a guia Assets.xcassets.
No Gerenciador de Soluções, no projeto ImageTutorial.Android, expanda a pasta Recursos. Em seguida, arraste XamarinLogo.png de seu sistema de arquivos para a pasta desenhável:
Observação
O Visual Studio definirá automaticamente a ação de compilação para a imagem como AndroidResource.
No projeto ImageTutorial, na MainPage.xaml, modifique a declaração
Imagepara exibir o arquivo XamarinLogo local:<Image Source="XamarinLogo" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />Esse código define a propriedade
Sourcepara o arquivo local exibir. A propriedadeWidthRequesté definida como 300 unidades independentes de dispositivo em iOS e 250 unidades independentes de dispositivo em Android. Além disso, a propriedadeHorizontalOptionsespecifica que a imagem será centralizada horizontalmente.Observação
Para imagens PNG no iOS, a extensão .png pode ser omitida do nome de arquivo especificado na propriedade
Source. Para outros formatos de imagem, a extensão é necessária.Na barra de ferramentas do Visual Studio, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador de iOS ou do Android Emulator de sua preferência:
Interrompa o aplicativo no Visual Studio.
Para obter mais informações sobre imagens locais, consulte Imagens locais no guia Imagens emXamarin.Forms.
Parabéns!
Parabéns por concluir este tutorial, no qual você aprendeu a:
- Crie um Xamarin.Forms
Imageem XAML. - Personalizar a aparência de
Image. - Exibir um arquivo de imagem local de cada projeto da plataforma.
Próximas etapas
Para saber mais sobre os conceitos básicos da criação de aplicativos móveis com Xamarin.Formso , continue no tutorial Grade.
Links relacionados
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.