Wprowadzenie do programowania aplikacji mobilnych Katedra Inżynierii Wiedzy
Plan zajęć 1 XAML; 2 podstawowe kontrolki; 3 obsługa zdarzenia; 4 budowa prostego interfejsu z poziomu XAML i z poziomu kodu; 5 Stack layout; 6 Grid layout; 7 Bonus 1: FindViewById (Android); 8 Bonus 2: kompilacja XAML w runtime a compile time.
Aktywność W prezentacji celowo umieściłem drobny błąd. Żeby go wyłapać należy pokopać nieco w opisie XAML, a także dowiedzieć się, co oznacza x w kodzie XAML. Pierwsza osoba, która znajdzie ten błąd otrzyma punkty za aktywność (+10 % oceny)
Rysunek: Tworzenie prostego interfejsu w pliku XAML bez użycia żadnego layout u Tak przygotowany kod nie zadziała, ponieważ wszystkie komponenty muszą należeć do jakiegoś layout u.
Rysunek: Tworzenie prostego interfejsu z dodaniem StackLayout Dodatkowo, w niektórych systemach (ios) konieczne jest odsunięcie tekstu od górnej części ekranu. W tym celu używamy Padding.
Rysunek: Tworzenie prostego interfejsu z dodaniem StackLayout Dodatkowa opcja zmiany koloru tła. Przydatne, kiedy dzielimy ekran na mniejsze komponenty.
Rysunek: Tworzenie prostego interfejsu z dodaniem StackLayout Opcje wyśrodkowania zawartości StackLayout środek ekranu. Jak wygląd aplikacji zmienia opcja Fill (zamiast Center)?
Rysunek: Budowa dynamicznego interfejsu z poziomu kodu
Rysunek: Alternatywny layout Grid Jak zbudować dynamiczny interfejs z zastosowaniem Grid z poziomu kodu?
Rysunek: Prosty interfejs z opcjami wyśrodkowania przypisanymi do Layout, a nie do komponentu Dodajemy atrybut ValueChanged który powiązany będzie z odpowiednią metodą w Code-Behind.
Rysunek: Obsługa Slidera z formatowaniem tekstu
Zadanie 1 Zbuduj interfejs przedstawiony na rysunku. Ustaw następujące elementy: kolor tła i przycisków powinien zostać ustawiony na niebieski; wielkość czcionki: 30, czcionka pogrubiona, tekst wyśrodkowany (tekst nagłówka); wielkość czcionki dla drugiej etykiety: 20; HorizontalOptions dla layoutu ustawiony jest na domyślny (Fill).
Zadanie 2 Padding ustawiony na 20 punktów; źródło obrazka dowolny plik z http; kontrolka BoxView może być stosowana jako linia pozioma wystarczy atrybut HeightRequest ustawić na 1.
Zadanie 3 Zapoznać się z grą Eoroid. Zadaniem gracza jest zgaszenie wszystkich elementów na planszy. Naciśnięcie dowolnego pola powoduje zmianę stanu przycisku i wszystkich przycisków sąsiadujących na przeciwny.
Rysunek: Interfejs 1
Rysunek: Interfejs 2
Rysunek: Powiązanie kontrolek z kodem (podobnie, jak w Android)
Rysunek: Kompilowanie kodu XAML w runtime możemy wyłapać błędy przy kompilacji, a nie po odpaleniu apki
Problemy z Intellisense w XAML zamknięcie wszystkich kart i VS, a następnie uruchomienie pliku XAML tak, jak poniżej; uruchomienie pliku XAML przy pomocy Source Code (Text) Editor; uruchomienie pliku XAML przy pomocy Source Code (Text) Editor with Encoding; odinstalowanie ReSharper i zainstalowanie rozszerzenia Enable XAML Language for Xamarin.Forms; odinstalowanie rozszerzenia Enable XAML Language for Xamarin.Forms.