Zabawy z UI

Prace nad aplikacją konkursową pisaną z wykorzystaniem Xamarin.Froms trwają dalej… W związku z tym dziś opiszę jak zaimplementowałem CardView w Xamarin.Forms oraz jak zrobiłem launch screen w Androidzie.

CardView

cardview

CardView nie jest domyślną kontrolką, którą można wykorzystać w Xamarin.Forms (w Xamarin.Android ta kontrolka jest dostępna domyślnie). Aby ją wykorzystać w “formsach” potrzebujemy do tego stworzyć własną implementację. Jako, że jeszcze nie czuję się zbyt pewnie, aby tworzyć własne kontrolki poszukałem i znalazłem fajną implementację zrobioną przez ewangelistę Xamarin Jamesa Monetmagno. Kontrolka znajduje się w jednym z jego repozytoriów pod tym adresem

Jak ją wykorzystałem w projekcie

Aby wykorzystać tą “customową” w Xamarin.Forms musiałem stworzyć 2 klasy.

Renderer, dodajemy go w projekcie dla Androida:

Klasa widoku. Ją dodajemy już w projekcie wspólnym dla wszystkich platform tzn shared lub PCL w zależności, o tego co wykorzystałeś.

Na koniec wstawiamy ją w XAML-u prosto do ItemTemplate naszej ListView,  całość treści pojedynczego itemu z listy musi znajdować się w naszym CardView:

Launch screen

Lauuch screen lub jak ktoś woli splash screen nie jest domyślnie dostępny w Androidzie, w przeciwieństwie do IOS-a, gdzie wystarczy dodać odpowiednio nazwane assety. Nie znaczy to jednak, że nie można takiego efektu w prosty sposób osiągnąć. Cały trik polega na tym, aby najpierw ładować stronę z naszym obrazkiem tytułowym,  a następnie przenieść się do ekranu początkowego aplikacji.

Implementacja widoku

Najpierw dodajmy zwykłą stronę XAML-a, poniżej jej zawartość:

Oczywiście obrazek splash musi być dodany do folderu Resources, na każdą rozdzielczość, na jakiej się spodziewamy uruchamiać naszą aplikację. Ja poszedłem tutaj trochę na skróty i dodałem ten sam obrazek o rozdzielczości 2162 x 3840 do każdego x folderów rozdzielczości (drawable, drawable-hdpi – itd…) Obrazek powinien się dobrze wyskalować na każdym urządzeniu.

Code behind

Teraz w code behind strony launchera, a dokładniej w metodzie OnAppearing, wstawiamy poniższy kod:

Należy zwrócić uwagę:

  • na opóźnienie, tak aby obrazek launchera nie “mignął” zbyt szybko (w tym przypadku ustawiłem 3 sekundy),
  • podmianę MainPage w głównym wątku widoku,
  • ustawienie stacka nawigacyjnego na Twoją stronę, która ma się pokazać po stronie launchera. W moim przypadku kod wewnątrz to ustawienie stacka nawigacyjnego charakterystycznego dla biblioteki FreshMVVM. Ty gdybyś nie używał żadnej biblioteki ustawiłbyś domyślny NavigationPage na Twoją następną stronę, na przykład tak:

Pozostało nam jeszcze w konstruktorze klasy startowej aplikacji App odpowiednio pokierować przebiegiem uruchamiania się aplikacji, ponieważ tak jak wspomniałem wcześniej dla IOS-a nie potrzebujemy dodatkowych zabiegów, aby pokazać Launch screen. Do tego celu wykorzystałem statyczną klasę Device:

Efekt końcowy:

splash