Chat – Xamarin.Forms

Olá, neste post irei demonstrar como você pode construir um chat utilizando Xamarin.Forms.

 

Irei partir do princípio que você acabou de criar um projeto Xamarin.Forms do tipo Portable Class Library (PCL), caso possua alguma dúvida sobre isso, recomendo ler o post Criando um projeto Xamarin.Forms.

Estruturando o projeto

Para este projeto, utilize o padrão MVVM (Model View ViewModel), dessa forma crie uma estrutura de pastas no seu projeto portable, como a demonstrada a seguir.

pcl

Crie também uma pasta CustomCells, que servirá para adicionar algumas ViewCell’s.

ADICIONANDO O NUGET PACKAGE

Para auxiliar na utilização do padrão MVVM, adicione o nuget package MvvmHelpers.

Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.

manage

 

Digite “Refractored.MvvmHelpers” e selecione o plugin como demonstrado na imagem a seguir.

mvvmHelpers install

 

Selecione todos os projetos e clique no botão “Install”.

mvvmHelpers install

Models

Dentro da pasta Models crie uma classe chamada Message.

models

A classe Message terá todas as propriedades necessárias da mensagem, neste caso suas propriedades serão:

  • Text: O texto da mensagem.
  • MessageDateTime: A data da mensagem.
  • TimeDisplay: Receberá a data da mensagem formatada.
  • IsTextIn: Flag para indicar se a mensagem está sendo recebida (True) ou enviada (False).

Observe que a classe Message herda da classe ObservableObject que encontra-se no MvvmHelpers.

 

ViewModels

Dentro da pasta ViewModels crie uma classe chamada MainPageViewModel.

vm

A classe MainPageViewModel irá conter as seguintes propriedades.

  • ListMessages: Lista contendo todas as mensagens.
  • SendCommand: Comando que será executado quando o usuário clicar no botão enviar.
  • OutText: Texto digitado pelo usuário.

Observe que a classe MainPageViewModel herda de BaseViewModel que encontra-se no MvvmHelpers e as propriedades ListMessages e SendCommand estão sendo instanciadas no método construtor.

 

CustomCells

Dentro da pasta CustomCells, crie uma classe chamada SelectorDataTemplate e duas ViewCell, uma chamada de TextInViewCell e a outra TextOutViewCell.

custom

TextInViewCell

screenshot-1513343960365

A TextInViewCell servira para apresentar a mensagem que chega para o usuário. Ela terá um Frame contendo uma Label com o texto e uma Label para apresentar a Data da mensagem.

TextOutViewCell

screenshot-1513343960365

A TextOutViewCell servira para apresentar a mensagem que é enviada pelo usuário. Ela terá um Frame contendo uma Label com o texto e uma Label para apresentar a Data da mensagem.

 

 

SelectorDataTemplate

A classe SelectorDataTemplate servirá para identificar quando a mensagem está chegando ou sendo enviada, e no método OnSelectTemplate irá determinar qual ViewCell será usada.

Observe que a classe SelectorDataTemplate herda de DataTemplateSelector que encontra-se no Xamarin.Forms.

 

 

Views

Dentro da pasta Views crie uma ContentPage

views

 

Observação: Não se esqueça de alterar o arquivo App, para que a MainPage seja  instanciada corretamente.

app

 

MainPage Xaml

A MainPage deverá conter:

  • SelectorDataTemplate no ResourceDictionary.
  • ListView para apresentar as mensagens.
  • Entry para o usuário escrever um texto.
  • Button/Image para o usuário clicar quando quiser enviar.

 

MainPage Code-Behind

No método construtor instancie uma MainPageViewModel, atribua ao BindingContext e em seguida defina o Scroll para o final da lista no evento CollectionChanged, como demonstrado a seguir.

 

 

Resultado

ezgif.com-gif-maker (3)

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s