Floating Action Button w Xamarin.Forms

Dziś opiszę jak zaadoptowałem Floating Action Button w konkursowej aplikacji.

Na początek

Implementację zapożyczyłem z przykładowej aplikacji Acquaint dostępnej na stronie platformy Xamarin. Na tej stronie znajdziesz kilka aplikacji, niektóre z nich są naprawdę dobre i można się z nich sporo nauczyć. Sam Floating Action Button (FAB) jest domyślnie stworzony dla Xamarin.Android tzn, że nie jest przeznaczony dla Xamarin.Forms. Udało mi się jednak podpatrzyć jak go zaimplementowali  we wcześniej wspomnianej aplikacji, która jest właśnie aplikacją Xamarin.Forms. Należy jeszcze wspomnieć o tym, że FAB będzie działał nam tylko w projekcie na Androida i będziemy musieli używać  <OnPlatform.Android> za każdym razem kiedy będziemy go wywoływać.

Implementacja

  • Na początek instalacja paczki nuget, tylko do porjektu Androida:
  • Następnie w projekcie Androida musimy dodać klasę “custom renderera”, poniżej jej implementacja:
  • W projekcie PCL naszej aplikacji trzeba dodać klasę, która wyświetli nasz FAB, klasę tę poniżej wykorzystamy do wstawienia w XAML-u naszego widoku.
  • Teraz wstawimy go do widoku XAML-u, tak jak pisałem wcześniej tam gdzie używamy FAB musimy umieścić w nawiasach   <OnPlatform.Android> ponieważ nie zadziała nam na innych platformach.

    Nie zapomnij o dodaniu referencji do klasy widoku.
  • Pozostała obsługa click eventu lub lepiej komendy gdy używasz wzorca MVVM. Niestety zaprezentowana implementacja FAB-a nie posiada obsługi komend. W związku z czym musiałem złamać na chwilę ;) zasadę separacji widoku od view modelu i wywołać zdarzenie z code behind. Jako, że używam w tym projekcie FreshMVVM musiałem wykorzystać  FreshPageModelResolver  aby nie popsuć stosu nawigacji. Ponieważ FreshMvvM wykorzystuje nawigację view model first.

     

Efekt końcowy…

fab_button