Solucja Xamarin Native ze wsparciem MvvmCross

Z niniejszego artykułu dowiesz się, jak poprawnie utworzyć solucję Xamarin Native z pełną konfiguracją MvvmCross. Stworzymy razem trzy projekty: Core, Android oraz iOS. Dowiesz się co należy zrobić oraz co z czym połączyć, aby Twój projekt korzystał ze wszystkich funkcjonalności MvvmCross. 

Artykuł będzie się opierał na tym, co już napisałem w ramach kilkuczęściowej serii gdzie tworzymy aplikację Xamarin, ale postanowiłem, że zbiorę wiedzę tam zawartą tutaj, w ramach jednego wpisu.

Zacznijmy od Core

Przejdź do utworzenia nowej solucji. Jako szablon projektu wybierz .NET Standard Library. Warto stosować następującą konwencję przy tworzeniu projektów:

[nazwa projektu].[nazwa modułu]

Zgodnie z nią do wybranej nazwy projektu dodaj człon Core po kropce. Po utworzeniu projektu, za pomocą menedżera pakietów Nuget dodaj paczkę MvvmCross. Po jej instalacji, w głównej gałęzi projektu dodaj klasę App. To tutaj będziesz definiować niezależne od platformy zależności dla kontenera IoC – MvvmCross dostarcza swój zupełnie wystarczający dla większości aplikacji kontener. Umieść w niej następujący kod:

C#

Metoda RegisterAppStart odpowiada za ustawienia startowego widoku w aplikacji. Metoda ta przyjmuje typ generyczny, który powinien być modelem widoku. Jeszcze go nie mamy, zatem utwórz folder ViewModels i dodaj w nim poniższy kod. Zwróć uwagę na dziedziczenie po MvxViewModel. Jest to typ frameworka MvvmCross, o czym świadczy przedrostek Mvx. Po dodaniu modelu widoku dodaj brakujący using w klasie App.

C#

Projekt Android

Teraz zajmiemy się Androidem. Dodaj solucję z szablonu Blank Android App. Zgodnie z konwencją dodaj człon Android po nazwie projektu.. Zainstaluj paczki  MvvmCross oraz MvvmCross.Droid.Support.V7.AppCompat. Po ich instalacji dodaj klasę Setup do głównej gałęzi projektu. oraz referencję do projektu Core. Będzie nam potrzebna do konfiguracji MvvmCross i skorzystania głównej zalety Xamarina czyli wspólnego kodu. Umieść następujący kod w klasie Setup pamiętając o dodaniu brakujących usingów.

C#

Dodaj lub zaktualizuj aktywność dla SplashScreen. Zwróć uwagę, że w atrybucie Activity, znajduje się właściwość MainLauncher ustawiona na true. Jest to ważne, aby ustawić poprawnie aktywność początkową.

C#

Teraz musimy zaktualizować aktywność główną, aby korzystała z modelu widoku, dzięki czemu zostanie odpowiednio obsłużona przez MvvmCross. Zwróć uwagę na dziedziczenie z klasy MvxAppCompatActivity. Jako swój generyczny parametr przyjmuje nasz wcześniej utworzony model widoku. Natomiast do layoutu aktywności dodaj skonfigurowaną wedle uznania etykietę tekstową. Nadaj jej identyfikator. Sprawdzimy, czy nasz model widoku działa poprawnie, sprawdzimy to za pomocą data bindingu.

C#

Jeżeli po drodze o czymś nie zapomniałeś, powinno być wszystko w porządku. Projekt Android jest gotowy. Możesz teraz przetestować aplikację.

Teraz iOS

Utwórz kolejny projekt. Tym razem wybierz szablon Single View App iOS. Pamiętaj o końcowym członie iOS. Dalej będzie to samo, co robiliśmy przy konfiguracji Androida. Zainstaluj pakiet MvvmCross, dodaj referencję do projektu Core oraz dodaj klasę SetupJej definicja znajduje się poniżej.

Dodatkowo wprowadź zmiany w istniejącej klasie AppDelegate. Ważne jest dziedziczenie po MvxApplicationDelegate, które zastępuje domyślne dziedziczenie. Pamiętaj o wywołaniu bazowej metody FinishedLaunching, to bardzo ważne bez tego aplikacja nie zadziała poprawnie. 

C#

Kolejny krok będzie taki sam jak w przypadku Androida. Sprawdzimy działanie naszego połączenia z modelem widoku. Jeżeli korzystasz ze storyboardów skorzystaj z poniższej definicji widoku, jeżeli z plików xib – przejdź dalej. Pamiętaj o dodanie outletu do etykiety tekstowej. 

C#

Jeżeli utworzyłeś widok za pomocą pliku xib, skorzystaj z następującej definicji:

C#

Różnica jest w rodzaju zastosowanego konstruktora oraz dodatkowego atrybutu w przypadku storyboarda. Dla poprawności działania aplikacji usuń z pliku Info.plist wartość dla Main Interface. Zdarzają się problemy z poprawną inicjalizacją MvvmCross dla iOS kiedy ta wartość jest podana.

To już wszystko

Udało się nam odpowiednio przygotować solucję do wykorzystania w aplikacji Xamarin. Jeżeli coś jest nie jasne skontaktuj się ze mną poprzez maila lub napisz komentarz pod postem.

Dzięki!

Projekt na GitHub:
https://github.com/krzbbaranowski/MvvmCrossXamarinSolution

Mam coś dla Ciebie

Zapisz się do mojego newslettera, a ja prześlę Ci zbiór kilkunastu praktycznych wskazówek dla programisty aplikacji mobilnych.

Menu