Wprowadzenie do programowania aplikacji mobilnych

Transkrypt

1 Wprowadzenie do programowania aplikacji mobilnych Katedra Inżynierii Wiedzy

2 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.

3 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)

4 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.

5 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.

6 Rysunek: Tworzenie prostego interfejsu z dodaniem StackLayout Dodatkowa opcja zmiany koloru tła. Przydatne, kiedy dzielimy ekran na mniejsze komponenty.

7 Rysunek: Tworzenie prostego interfejsu z dodaniem StackLayout Opcje wyśrodkowania zawartości StackLayout środek ekranu. Jak wygląd aplikacji zmienia opcja Fill (zamiast Center)?

8 Rysunek: Budowa dynamicznego interfejsu z poziomu kodu

9 Rysunek: Alternatywny layout Grid Jak zbudować dynamiczny interfejs z zastosowaniem Grid z poziomu kodu?

10 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.

11 Rysunek: Obsługa Slidera z formatowaniem tekstu

12 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).

13 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.

14 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.

15 Rysunek: Interfejs 1

16 Rysunek: Interfejs 2

17 Rysunek: Powiązanie kontrolek z kodem (podobnie, jak w Android)

18 Rysunek: Kompilowanie kodu XAML w runtime możemy wyłapać błędy przy kompilacji, a nie po odpaleniu apki

19 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.