Xamarin.Forms – przykładowa aplikacja mobilna

 In Technicznie

Etap 1 – instalacja i założenie projektu

Tworzenie każdej aplikacji Xamarin, w tym naszej przykładowej aplikacji mobilnej, należy zacząć od zainstalowania Xamarina na każdym potrzebnym komputerze. Pod adresem http://xamarin.com/download znajduje się oprogramowanie instalujące wszystkie wymagane rzeczy, takie jak Xamarin, Xamarin Studio, integrację z Visual Studio kończąc na SDK platform mobilnych. Chcąc programować na 3 największe platformy Android, iOS i Windows Phone konieczne są co najmniej dwa komputery, jeden z Windowsem 8 lub 10 który umożliwia obsługę Androida i Windows Phone, oraz drugi Mac firmy Apple który umożliwia obsługę Androida i iOS. Ponieważ potrzeba będzie często przełączać się pomiędzy dwoma różnymi komputerami, nieodzownym elementem jest program typu GIT.

Z poziomu Visual Studio należy przejść do zakładania nowego projektu poprzez wybranie menu File->New->Project, z zainstalowanych szablonów wybrać język C#, następnie Mobile Apps oraz Blank App(Xamarin.Forms Portable), uzupełnić nazwę i ścieżkę projektu.

Img1

Została stworzona solucja z 4 projektami, pierwsza z kodem wspólnym, oraz kolejne dla każdej z platform. Wybór aktualnej platformy odbywa się poprzez kliknięcie prawym przyciskiem na projekcie specyficznej platformy w oknie Solution Explorer i wybranie Set as StartUp Project. W części wspólnej należy stworzyć 4 foldery Model, Service, View i ViewModel. Tak przygotowany projekt można traktować jako bazę dla każdej aplikacji Xamarin.Forms.

Img2

Etap 2 – pierwsza strona

W celu stworzenia pierwszej strony należy kliknąć prawym na folder View, wybrać Add->NewItem, następnie Forms Xaml Page i podać nazwę MainPage.cs

W pliku MainPage.xaml należy uzupełnić kod pierwszej strony.

Kod pliku MainPage.xaml.cs

Kod pliku App.cs

Tak zaprogramowany projekt można już uruchomić na dowolnej z platform, na fizycznym smartfonie lub emulatorze.

Etap 3 – MVVM

Aplikacje Xamarin.Forms zoptymalizowane są pod wzorzec projektowania MVVM tzn. Model-View-ViewModel. Oznacza to że każdy Page reprezentujący View powiązany jest z odpowiadającym mu ViewModel. ViewModel zawiera wiele pól i poleceń, pod które bindują się kontrolki z View, które obserwują je i reagują na ich zmiany. Cały mechanizm oparty jest na interfejsie INotifyPropertyChanged, dlatego implementację MVVM najlepiej zacząć od stworzenia pliku BaseViewModel, który będzie podstawą dla każdego pliku ViewModel.

Należy teraz stworzyć nowy plik MainViewModel, pod który zbinduje się MainPage.

Kod pliku MainPage.xaml.cs

Kod pliku MainPage.xaml

Można teraz przetestować obecne działanie aplikacji.

Etap 4 – więcej niż jedna strona

Kolejnym krokiem będzie dodanie kolejnej strony oraz nawigacji pomiędzy stronami aplikacji. W tym celu należy dodać nową Forms Xaml Page o nazwie SecondPage.cs

Nowa klasa SecondViewModel

Kod pliku SecondPage.xaml.cs

Fragment pliku MainViewModel.cs

Można teraz przetestować obecne działanie aplikacji.

Etap 5 – odwołania do natywności

Ostatnim krokiem jest przykład usługi która potrzebuje odwołania do specyficznych cech każdej z platform, tzw. natywności. W tym celu należy utworzyć w folderze Service interfejs ILangService

Dodatkowo należy stworzyć implementację tego interfejsu w każdym projekcie specyficznym dla platform. Kod pliku LangService dla Androida

Kod pliku LangService dla iOS

Kod pliku LangService dla Windows Phone

Fragment pliku SecondViewModel.cs

Można teraz przetestować obecne działanie aplikacji.

Img3

Podsumowanie

Gotowy projekt przykładowej aplikacji dostępny jest pod adresem https://github.com/Ermlab/xamarin-demo-page

Img4

Recommended Posts