Witaj, iOS — szczegółowe omówienie

Przewodnik Szybki start przedstawiał kompilowanie i uruchamianie podstawowej aplikacji platformy Xamarin.iOS. Teraz nadszedł czas, aby lepiej zrozumieć, jak działają aplikacje systemu iOS, dzięki czemu można tworzyć bardziej zaawansowane programy. W tym przewodniku przedstawiono kroki opisane w przewodniku Hello, iOS, aby umożliwić zrozumienie podstawowych pojęć związanych z tworzeniem aplikacji systemu iOS.

Ten przewodnik pomaga rozwinąć umiejętności i wiedzę wymaganą do utworzenia jednoekranowej aplikacji systemu iOS. Po wykonaniu tej pracy należy poznać różne części aplikacji platformy Xamarin.iOS i sposób ich dopasowania.

Wprowadzenie do Visual Studio dla komputerów Mac

Visual Studio dla komputerów Mac to bezpłatne środowisko IDE typu open source, które łączy funkcje z programów Visual Studio i Xcode. Oferuje on w pełni zintegrowanego projektanta wizualnego, edytor tekstów wraz z narzędziami refaktoryzacji, przeglądarką zestawów, integracją kodu źródłowego i nie tylko. W tym przewodniku przedstawiono kilka podstawowych funkcji Visual Studio dla komputerów Mac, ale jeśli dopiero zaczynasz Visual Studio dla komputerów Mac, zapoznaj się z dokumentacją Visual Studio dla komputerów Mac.

Visual Studio dla komputerów Mac jest zgodna z praktyką programu Visual Studio organizowania kodu w rozwiązania i projekty. Rozwiązanie to kontener, który może przechowywać co najmniej jeden projekt. Projekt może być aplikacją (taką jak iOS lub Android), biblioteką pomocniczą, aplikacją testową i nie tylko. W aplikacji Telefon word nowy projekt i Telefon został dodany przy użyciu szablonu Aplikacji z jednym widokiem. Początkowe rozwiązanie wyglądało następująco:

Wprowadzenie do programu Visual Studio

Program Visual Studio to zaawansowane środowisko IDE firmy Microsoft. Oferuje on w pełni zintegrowanego projektanta wizualnego, edytor tekstów wraz z narzędziami refaktoryzacji, przeglądarką zestawów, integracją kodu źródłowego i nie tylko. W tym przewodniku przedstawiono niektóre podstawowe funkcje programu Visual Studio z narzędziami Xamarin Tools for Visual Studio.

Program Visual Studio organizuje kod w rozwiązania i projekty. Rozwiązanie to kontener, który może przechowywać co najmniej jeden projekt. Projekt może być aplikacją (taką jak iOS lub Android), biblioteką pomocniczą, aplikacją testową i nie tylko. W aplikacji Telefon word nowy projekt i Telefon został dodany przy użyciu szablonu Aplikacji z jednym widokiem. Początkowe rozwiązanie wyglądało następująco:

Anatomia aplikacji platformy Xamarin.iOS

Po lewej stronie znajduje się okienko rozwiązania, które zawiera strukturę katalogu i wszystkie pliki skojarzone z rozwiązaniem:

Po prawej stronie znajduje się okienko rozwiązania, które zawiera strukturę katalogu i wszystkie pliki skojarzone z rozwiązaniem:

W przewodniku Hello, iOS utworzono rozwiązanie o nazwie Telefon word i umieszczono w nim projekt systemu iOS — Telefon word_iOS — wewnątrz. Elementy wewnątrz projektu obejmują:

• Odwołania — zawiera zestawy wymagane do skompilowania i uruchomienia aplikacji. Rozwiń katalog, aby wyświetlić odwołania do zestawów platformy .NET, takich jak System, System.Core i System.Xml, a także odwołanie do zestawu Xamarin.iOS.
• Pakiety — katalog packages zawiera gotowe pakiety NuGet.
• Zasoby — folder resources przechowuje inne nośniki.
• Main.cs — zawiera główny punkt wejścia aplikacji. Aby uruchomić aplikację, nazwa głównej klasy aplikacji , AppDelegatejest przekazywana w pliku .
• AppDelegate.cs — ten plik zawiera główną klasę aplikacji i jest odpowiedzialny za tworzenie okna, tworzenie interfejsu użytkownika i nasłuchiwanie zdarzeń z systemu operacyjnego.
• Main.storyboard — Scenorys zawiera wizualny projekt interfejsu użytkownika aplikacji. Pliki scenorysu są otwierane w edytorze graficznym o nazwie Projektant systemu iOS.
• ViewController.cs — kontroler widoku obsługuje ekran (Widok), który użytkownik widzi i dotyka. Kontroler widoku jest odpowiedzialny za obsługę interakcji między użytkownikiem a widokiem.
• ViewController.designer.cs — designer.cs jest to automatycznie wygenerowany plik, który służy jako klej między kontrolkami w widoku i ich reprezentacjami kodu na kontrolerze widoku. Ponieważ jest to wewnętrzny plik kanalizacji, środowisko IDE zastąpi wszelkie zmiany ręczne i przez większość czasu ten plik można zignorować.
• Info.plist — w pliku Info.plist są ustawiane właściwości aplikacji, takie jak nazwa aplikacji, ikony, uruchamianie obrazów i inne. Jest to zaawansowany plik i dokładne wprowadzenie do niego jest dostępne w przewodniku Praca z listami właściwości.
• Entitlements.plist — lista właściwości uprawnień umożliwia określenie możliwości aplikacji (nazywanych również technologiami sklepu App Store), takich jak iCloud, PassKit i inne. Więcej informacji na temat pliku Entitlements.plist można znaleźć w przewodniku Praca z listami właściwości. Ogólne wprowadzenie do uprawnień można znaleźć w przewodniku Dotyczącym aprowizacji urządzeń.

Podstawy architektury i aplikacji

Zanim aplikacja systemu iOS będzie mogła załadować interfejs użytkownika, muszą istnieć dwie elementy. Najpierw aplikacja musi zdefiniować punkt wejścia — pierwszy kod uruchamiany po załadowaniu procesu aplikacji do pamięci. Po drugie, musi zdefiniować klasę do obsługi zdarzeń w całej aplikacji i interakcji z systemem operacyjnym.

W tej sekcji przedstawiono relacje przedstawione na poniższym diagramie:

Metoda main

Głównym punktem wejścia aplikacji systemu iOS jest Application klasa . Klasa jest zdefiniowana Application w pliku Main.cs i zawiera metodę statyczną Main . Tworzy nowe wystąpienie aplikacji platformy Xamarin.iOS i przekazuje nazwę klasy Delegat aplikacji, która będzie obsługiwać zdarzenia systemu operacyjnego. Poniższy kod szablonu dla metody statycznej Main wygląda następująco:

using System;
using UIKit;

namespace Phoneword_iOS
{
    public class Application
    {
        static void Main (string[] args)
        {
            UIApplication.Main (args, null, "AppDelegate");
        }
    }
}

Delegat aplikacji

W systemie iOS klasa Application Delegate obsługuje zdarzenia systemowe. Ta klasa znajduje się wewnątrz AppDelegate.cs. Klasa AppDelegate zarządza oknem aplikacji. Okno to pojedyncze wystąpienie UIWindow klasy, która służy jako kontener interfejsu użytkownika. Domyślnie aplikacja pobiera tylko jedno okno, na które można załadować jego zawartość, a okno jest dołączone do ekranu (pojedyncze UIScreen wystąpienie), który zapewnia prostokąt ograniczenia pasujący do wymiarów ekranu urządzenia fizycznego.

Aplikacja AppDelegate jest również odpowiedzialna za subskrybowanie aktualizacji systemowych dotyczących ważnych zdarzeń aplikacji, takich jak po zakończeniu uruchamiania aplikacji lub gdy pamięć jest niska.

Poniżej przedstawiono kod szablonu aplikacji AppDelegate:

using System;
using Foundation;
using UIKit;

namespace Phoneword_iOS
{

    [Register ("AppDelegate")]
    public partial class AppDelegate : UIApplicationDelegate
    {
        public override UIWindow Window {
            get;
            set;
        }

        ...
    }
}

Gdy aplikacja zdefiniowała okno, może rozpocząć ładowanie interfejsu użytkownika. W następnej sekcji przedstawiono tworzenie interfejsu użytkownika.

Interfejs użytkownika

Interfejs użytkownika aplikacji systemu iOS jest jak witryna sklepu — aplikacja zazwyczaj otrzymuje jedno okno, ale może wypełnić okno dowolną liczbą obiektów, a obiekty i ustalenia można zmienić w zależności od tego, co aplikacja chce wyświetlić. Obiekty w tym scenariuszu — elementy widoczne przez użytkownika — są nazywane widokami. Aby utworzyć pojedynczy ekran w aplikacji, widoki są ułożone na siebie nawzajem w hierarchii widoków zawartości, a hierarchia jest zarządzana przez jeden kontroler widoku. Aplikacje z wieloma ekranami mają wiele hierarchii widoków zawartości, z których każdy ma własny kontroler widoku, a aplikacja umieszcza widoki w oknie, aby utworzyć inną hierarchię widoku zawartości na podstawie ekranu, na podstawie którego znajduje się użytkownik.

Aby uzyskać więcej informacji na temat tworzenia interfejsu użytkownika przy użyciu scenorysów, zobacz sekcję Projektowanie za pomocą scenorysów w temacie Xcode Overview (Omówienie środowiska Xcode) w bibliotece deweloperów systemu iOS firmy Apple.

Na poniższym diagramie przedstawiono relacje między oknami, widokami, widokami podrzędnymi i kontrolerem widoku, które umożliwiają przełączenie interfejsu użytkownika na ekran urządzenia:

W następnej sekcji omówiono sposób pracy z widokami w kodzie i dowiedz się, jak programować interakcje użytkowników przy użyciu kontrolerów widoku i cyklu życia widoku.

Wyświetlanie kontrolerów i cyklu życia widoku

Każda hierarchia widoku zawartości ma odpowiedni kontroler widoku umożliwiający interakcję użytkownika. Rolą kontrolera widoku jest zarządzanie widokami w hierarchii widoków zawartości. Kontroler widoku nie jest częścią hierarchii widoku zawartości i nie jest elementem w interfejsie. Zamiast tego udostępnia kod, który umożliwia interakcję użytkownika z obiektami na ekranie.

Wyświetlanie kontrolerów i scenorysów

Kontroler widoku jest reprezentowany w scenie jako pasek u dołu sceny. Wybranie kontrolera widoku powoduje wyświetlenie jego właściwości w okienku właściwości:

Niestandardowa klasa kontrolera widoku dla hierarchii widoku zawartości reprezentowanej przez tę scenę można ustawić, edytując właściwość Class w sekcji Tożsamość okienka właściwości. Na przykład nasza aplikacja Telefon word ustawia ViewController jako kontroler widoku pierwszego ekranu, jak pokazano na poniższym zrzucie ekranu:

Kontroler widoku jest reprezentowany w scenie jako pasek u dołu sceny. Wybranie kontrolera widoku powoduje wyświetlenie jego właściwości w okienku Właściwości:

Niestandardowa klasa kontrolera widoku dla hierarchii widoku zawartości reprezentowanej przez tę scenę można ustawić, edytując właściwość Class w sekcji Tożsamość okienka Właściwości. Na przykład nasza aplikacja Telefon word ustawia ViewController jako kontroler widoku pierwszego ekranu, jak pokazano na poniższym zrzucie ekranu:

Spowoduje to połączenie reprezentacji scenorysu kontrolera widoku z klasą ViewController C#. ViewController.cs Otwórz plik i zwróć uwagę, że kontroler widoku jest podklasą UIViewController, jak pokazano w poniższym kodzie:

public partial class ViewController : UIViewController
{
    public ViewController (IntPtr handle) : base (handle)
    {

    }
}

Teraz ViewController steruje interakcjami hierarchii widoku zawartości skojarzonej z tym kontrolerem widoku w scenorysie. Następnie dowiesz się więcej o roli kontrolera widoku w zarządzaniu widokami, wprowadzając proces nazywany cyklem życia widoku.

Uwaga

W przypadku ekranów tylko wizualizacji, które nie wymagają interakcji użytkownika, właściwość Klasa może pozostać pusta w okienku właściwości. Spowoduje to ustawienie klasy zapasowej kontrolera widoku jako domyślnej implementacji UIViewControllerelementu , która jest odpowiednia, jeśli nie planujesz dodawania kodu niestandardowego.

Wyświetlanie cyklu życia

Kontroler widoku jest odpowiedzialny za ładowanie i zwalnianie hierarchii widoku zawartości z okna. Gdy coś ważnego dzieje się z widokiem w hierarchii widoku zawartości, system operacyjny powiadamia kontroler widoku za pomocą zdarzeń w cyklu życia widoku. Przesłaniając metody w cyklu życia widoku, można wchodzić w interakcje z obiektami na ekranie i tworzyć dynamiczny, dynamiczny, dynamiczny interfejs użytkownika.

Są to podstawowe metody cyklu życia i ich funkcja:

• ViewDidLoad — wywoływany po raz pierwszy kontroler widoku ładuje hierarchię widoku zawartości do pamięci. Jest to dobre miejsce do wstępnej konfiguracji, ponieważ jest to, gdy widoky podrzędne po raz pierwszy staną się dostępne w kodzie.
• ViewWillAppear — wywoływany za każdym razem, gdy widok kontrolera widoku ma zostać dodany do hierarchii widoku zawartości i pojawi się na ekranie.
• ViewWillDisappear — wywoływany za każdym razem, gdy widok kontrolera widoku ma zostać usunięty z hierarchii widoku zawartości i zniknąć z ekranu. To zdarzenie cyklu życia jest używane do czyszczenia i zapisywania stanu.
• ViewDidAppear i ViewDidDisappear — wywoływane, gdy widok zostanie dodany lub usunięty z hierarchii widoku zawartości.

Po dodaniu kodu niestandardowego do dowolnego etapu cyklu życia implementacja podstawowa tej metody cyklu życia musi zostać zastąpiona. Można to osiągnąć, wykorzystując istniejącą metodę cyklu życia, która ma już dołączony kod, i rozszerzając go przy użyciu dodatkowego kodu. Implementacja podstawowa jest wywoływana z wewnątrz metody, aby upewnić się, że oryginalny kod jest uruchamiany przed nowym kodem. Przykład tej funkcji przedstawiono w następnej sekcji.

Aby uzyskać więcej informacji na temat pracy z kontrolerami widoków, zapoznaj się z przewodnikiem programowania kontrolera widoku firmy Apple dla systemu iOS i dokumentacją UIViewController.

Reagowanie na interakcję użytkownika

Najważniejszą rolą kontrolera widoku jest reagowanie na interakcję użytkownika, taką jak naciśnięcia przycisków, nawigacja i nie tylko. Najprostszym sposobem obsługi interakcji użytkownika jest połączenie kontrolki w celu nasłuchiwania danych wejściowych użytkownika i dołączania programu obsługi zdarzeń w celu reagowania na dane wejściowe. Na przykład przycisk może być podłączony do odpowiedzi na zdarzenie dotykowe, jak pokazano w aplikacji Telefon word.

Przyjrzyjmy się, jak to działa. W projekcie Phoneword_iOS został dodany przycisk do TranslateButton hierarchii widoków zawartości:

Po utworzeniu punktu odniesienia przy użyciu narzędzia Xcode Interface Builder usługa Xcode Sync automatycznie mapuje ją na kontrolkę w ViewController.designer.cs, udostępniając TranslateButton ją wewnątrz ViewController klasy. Kontrolki po raz pierwszy staną się dostępne na ViewDidLoad etapie cyklu życia Widoku, więc ta metoda cyklu życia jest używana do reagowania na dotyk użytkownika:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // wire up TranslateButton here
}

Aplikacja Telefon word używa zdarzenia dotykowego wywoływanego TouchUpInside w celu nasłuchiwania dotyku użytkownika. TouchUpInside nasłuchuje zdarzenia touch up (palec podnoszenia z ekranu), który następuje za dotknięciem w dół (palcem dotykając ekranu) wewnątrz granic kontrolki. Przeciwieństwem TouchUpInsideTouchDown jest zdarzenie, które jest uruchamiane, gdy użytkownik naciska w dół kontrolki. Zdarzenie TouchDown przechwytuje dużo szumu i nie daje użytkownikowi możliwości anulowania dotyku, przesuwając palcem z kontrolki. TouchUpInside to najbardziej typowy sposób reagowania na naciśnięcie przycisku i utworzenie środowiska oczekiwanego przez użytkownika po naciśnięciu przycisku. Więcej informacji na ten temat można znaleźć w wytycznych dotyczących interfejsu człowieka systemu iOS firmy Apple.

Aplikacja obsłużyła TouchUpInside zdarzenie za pomocą lambda, ale można było również użyć delegata lub nazwanego programu obsługi zdarzeń. Ostatni kod przycisku przypominał następujące elementy:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();
    string translatedNumber = "";

    TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
      translatedNumber = Core.PhonewordTranslator.ToNumber(PhoneNumberText.Text);
      PhoneNumberText.ResignFirstResponder ();

      if (translatedNumber == "") {
        CallButton.SetTitle ("Call", UIControlState.Normal);
        CallButton.Enabled = false;
      } else {
        CallButton.SetTitle ("Call " + translatedNumber, UIControlState.Normal);
        CallButton.Enabled = true;
      }
  };
}

Dodatkowe pojęcia wprowadzone w Telefon word

Aplikacja Telefon word wprowadziła kilka pojęć, które nie zostały omówione w tym przewodniku. Te pojęcia obejmują:

• Zmień tekst przycisku — aplikacja Telefon word wykazała, jak zmienić tekst przycisku, wywołując SetTitleprzycisk i przekazując nowy tekst oraz stan kontroli przycisku. Na przykład poniższy kod zmienia tekst CallButton na "Call":

  CallButton.SetTitle ("Call", UIControlState.Normal);
  

• Włączanie i wyłączanie przycisków — przyciski mogą być w Enabled stanie lub Disabled . Wyłączony przycisk nie będzie odpowiadać na dane wejściowe użytkownika. Na przykład następujący kod wyłącza element CallButton:

  CallButton.Enabled = false;
  

  Aby uzyskać więcej informacji na temat przycisków, zapoznaj się z przewodnikiem Przyciski.

• Odrzuć klawiaturę — gdy użytkownik naciągnie pole tekstowe, system iOS wyświetli klawiaturę, aby zezwolić użytkownikowi na wprowadzanie danych wejściowych. Niestety nie ma wbudowanych funkcji odrzucania klawiatury. Następujący kod jest dodawany do TranslateButton elementu , aby odrzucić klawiaturę, gdy użytkownik naciśnie TranslateButtonelement :

  PhoneNumberText.ResignFirstResponder ();
  

  Aby zapoznać się z innym przykładem odrzucania klawiatury, zapoznaj się z przepisem Odrzucanie klawiatury .

• Umieść Telefon wywołanie przy użyciu adresu URL — w aplikacji Telefon word schemat adresu URL firmy Apple jest używany do uruchamiania aplikacji dla telefonu systemowego. Niestandardowy schemat adresu URL składa się z prefiksu "tel:" i przetłumaczonego numeru telefonu, jak pokazano w poniższym kodzie:

  var url = new NSUrl ("tel:" + translatedNumber);
  if (!UIApplication.SharedApplication.OpenUrl (url))
  {
      // show alert Controller
  }
  

• Pokaż alert — gdy użytkownik próbuje umieścić połączenie telefoniczne na urządzeniu, które nie obsługuje połączeń — na przykład symulator lub iPod Touch — zostanie wyświetlone okno dialogowe alertu, aby poinformować użytkownika, że nie można umieścić połączenia telefonicznego. Poniższy kod tworzy i wypełnia kontroler alertów:

  if (!UIApplication.SharedApplication.OpenUrl (url)) {
                  var alert = UIAlertController.Create ("Not supported", "Scheme 'tel:' is not supported on this device", UIAlertControllerStyle.Alert);
                  alert.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
                  PresentViewController (alert, true, null);
              }
  

  Aby uzyskać więcej informacji na temat widoków alertów systemu iOS, zapoznaj się z przepisem kontrolera alertów.

Testowanie, wdrażanie i kończenie obsługi

Obie Visual Studio dla komputerów Mac i Visual Studio oferują wiele opcji testowania i wdrażania aplikacji. W tej sekcji opisano opcje debugowania, przedstawiono testowanie aplikacji na urządzeniu oraz wprowadzono narzędzia do tworzenia niestandardowych ikon aplikacji i uruchamiania obrazów.

Narzędzia do debugowania

Czasami problemy z kodem aplikacji są trudne do zdiagnozowania. Aby ułatwić diagnozowanie złożonych problemów z kodem, możesz ustawić punkt przerwania, przejść przez kod lub informacje wyjściowe do okna dziennika.

Wdrażanie na urządzeniu

Symulator systemu iOS to szybki sposób testowania aplikacji. Symulator ma wiele przydatnych optymalizacji do testowania, w tym makiety lokalizacji, symulowania ruchu i nie tylko. Jednak użytkownicy nie będą korzystać z ostatecznej aplikacji w symulatorze. Wszystkie aplikacje powinny być testowane na rzeczywistych urządzeniach wcześnie i często.

Aprowizacja urządzenia wymaga konta dewelopera firmy Apple. Przewodnik aprowizacji urządzeń zawiera szczegółowe instrukcje dotyczące przygotowania urządzenia do programowania.

Uwaga

Obecnie ze względu na wymaganie od firmy Apple konieczne jest posiadanie certyfikatu programistycznego lub tożsamości podpisywania w celu skompilowania kodu dla urządzenia fizycznego lub symulatora. Wykonaj kroki opisane w przewodniku Dotyczącym aprowizacji urządzeń, aby to skonfigurować.

Po aprowizowaniu urządzenia można go wdrożyć, podłączając go, zmieniając element docelowy na pasku narzędzi kompilacji na urządzenie z systemem iOS, a następnie naciskając przycisk Start ( Odtwórz), jak pokazano na poniższym zrzucie ekranu:

Aplikacja zostanie wdrożona na urządzeniu z systemem iOS:

Generowanie ikon niestandardowych i uruchamianie obrazów

Nie każdy ma projektanta dostępnego do tworzenia ikon niestandardowych i uruchamiania obrazów, które aplikacja musi wyróżniać. Poniżej przedstawiono kilka alternatywnych metod generowania niestandardowej grafiki aplikacji:

• Pixelmator — wszechstronna aplikacja do edycji obrazów dla komputerów Mac, która kosztuje około 30 USD.
• Fiverr — wybierz spośród różnych projektantów, aby utworzyć zestaw ikon dla Ciebie, począwszy od $5. Można trafić lub przegapić, ale dobry zasób, jeśli potrzebujesz ikon zaprojektowanych na bieżąco

• Visual Studio — możesz użyć go do utworzenia prostego zestawu ikon dla aplikacji bezpośrednio w środowisku IDE.
• Fiverr — wybierz spośród różnych projektantów, aby utworzyć zestaw ikon dla Ciebie, począwszy od $5. Można trafić lub przegapić, ale dobry zasób, jeśli potrzebujesz ikon zaprojektowanych na bieżąco

Aby uzyskać więcej informacji o ikonach i wymaganiach dotyczących uruchamiania obrazów, zapoznaj się z przewodnikiem Praca z obrazami.

Podsumowanie

Gratulacje! Teraz masz solidną wiedzę na temat składników aplikacji platformy Xamarin.iOS, a także narzędzi używanych do ich tworzenia. W następnym samouczku z serii Wprowadzenie rozszerzysz naszą aplikację tak, aby obsługiwała wiele ekranów. W ten sposób zaimplementujesz kontroler nawigacji, dowiesz się więcej o segues scenorysach i przedstawisz wzorzec model, widok, kontroler (MVC), rozszerzając aplikację w celu obsługi wielu ekranów.

Pokrewne łącza

• Wskazówki dotyczące interfejsu człowieka dla systemu iOS
• Portal aprowizowania dla systemu iOS