Witaj, iOS — Szybki start

  • Artykuł

Ostrzeżenie

Projektant systemu iOS zostały wycofane w programie Visual Studio 2019 w wersji 16.8 i Visual Studio 2019 dla komputerów Mac w wersji 8.8 i usunięte w programie Visual Studio 2019 w wersji 16.9 i Visual Studio dla komputerów Mac w wersji 8.9. Zalecanym sposobem kompilowania interfejsów użytkownika systemu iOS jest bezpośrednie na komputerze Mac z uruchomionym narzędziem Xcode Interface Builder. Aby uzyskać więcej informacji, zobacz Projektowanie interfejsów użytkownika za pomocą programu Xcode.

W tym przewodniku opisano sposób tworzenia aplikacji, która tłumaczy alfanumeryczny numer telefonu wprowadzony przez użytkownika na numeryczny numer telefonu, a następnie wywołuje ten numer. Ostateczna aplikacja wygląda następująco:

The Hello.iOS Quickstart app

Wymagania

Programowanie dla systemu iOS przy użyciu platformy Xamarin wymaga:

  • Komputer Mac z systemem macOS High Sierra (10.13) lub nowszym.
  • Najnowsza wersja zestawu Xcode i zestawu SDK systemu iOS zainstalowana ze sklepu App Store .

Platforma Xamarin.iOS współdziała z następującą konfiguracją:

  • Najnowsza wersja Visual Studio dla komputerów Mac, która pasuje do powyższych specyfikacji.

Przewodnik instalacji platformy Xamarin.iOS dla komputerów Mac jest dostępny dla instrukcji instalacji krok po kroku

Platforma Xamarin.iOS współdziała z następującą konfiguracją:

  • Najnowsza wersja programu Visual Studio 2019 lub Visual Studio 2017 Community, Professional lub Enterprise w systemie Windows 10 w połączeniu z hostem kompilacji dla komputerów Mac, który pasuje do powyższych specyfikacji.

Przewodnik instalacji systemu Windows platformy Xamarin.iOS jest dostępny dla instrukcji instalacji krok po kroku.

Przed rozpoczęciem pobierz zestaw ikon aplikacji platformy Xamarin.

przewodnik Visual Studio dla komputerów Mac

W tym przewodniku opisano sposób tworzenia aplikacji o nazwie Telefon word, która tłumaczy alfanumeryczny numer telefonu na numeryczny numer telefonu.

  1. Uruchom Visual Studio dla komputerów Mac z folderu Aplikacje lub funkcji Spotlight:

    The Launch screen

    Na ekranie uruchamiania kliknij pozycję Nowy projekt... w celu utworzenia nowego rozwiązania platformy Xamarin.iOS:

    iOS solution

  2. W oknie dialogowym Nowe rozwiązanie wybierz szablon Aplikacja z jednym widokiem aplikacji > systemu iOS>, upewniając się, że wybrano język C#. Kliknij przycisk Dalej:

    Choose Single View Application

  3. Skonfiguruj aplikację. Nadaj jej nazwę Phoneword_iOSi pozostaw wszystko inne jako domyślne. Kliknij przycisk Dalej:

    Enter the app name

  4. Pozostaw wartość Project (Projekt) i Solution Name (Nazwa rozwiązania) w następujący sposób. Wybierz tutaj lokalizację projektu lub zachowaj ją jako domyślną:

    Choose the location of the project

  5. Kliknij przycisk Utwórz , aby utworzyć rozwiązanie.

  6. Otwórz plik Main.storyboard, klikając go dwukrotnie w okienku rozwiązania. Upewnij się, że plik został otwarty przy użyciu Projektant programu Visual Studio dla systemu iOS (kliknij prawym przyciskiem myszy scenorys i wybierz polecenie Otwórz za pomocą > Projektant systemu iOS). Zapewnia to sposób wizualnego tworzenia interfejsu użytkownika:

    The iOS Designer

    Należy pamiętać, że klasy rozmiarów są domyślnie włączone. Zapoznaj się z przewodnikiem Unified Storyboards , aby dowiedzieć się więcej o nich.

  7. W okienku przybornika wpisz "label" na pasku wyszukiwania i przeciągnij etykietęna powierzchnię projektową (obszar w środku):

    Drag a Label onto the design surface the area in the center

    Uwaga

    W dowolnym momencie możesz wyświetlić okienko właściwości lub przybornik, przechodząc do okienka widoków>.

  8. Pobierz uchwyty kontrolek przeciągania (okręgi wokół kontrolki) i ustaw etykietę na szerszą:

    Make the label wider

  9. Po wybraniu etykiety na powierzchni projektowej użyj okienka właściwości Właściwości, aby zmienić właściwość Text etykiety na "Wprowadź Telefon word:"

    Set the label to Enter a Phoneword

  10. Wyszukaj "pole tekstowe" w przyborniku i przeciągnij pole tekstowe z przybornika na powierzchnię projektową i umieść je pod etykietą. Dopasuj szerokość, aż pole tekstowe ma taką samą szerokość jak etykieta:

    Make the Text Field the same width as the Label

  11. Po wybraniu pola tekstowego na powierzchni projektowej zmień właściwość Nazwa pola tekstowego w sekcji Tożsamość okienka właściwości na PhoneNumberText, a następnie zmień właściwość Text na "1-855-XAMARIN":

    Change the Title property to 1-855-XAMARIN

  12. Przeciągnij przycisk z przybornika na powierzchnię projektową i umieść go pod polem tekstowym. Dopasuj szerokość, tak aby przycisk był tak szeroki, jak pole tekstowe i etykieta:

    Adjust the width so the Button is as wide as the Text Field and Label

  13. Po wybraniu przycisku na powierzchni projektowej zmień właściwość Name w sekcji Tożsamość okienka właściwości na TranslateButton. Zmień właściwość Title na "Translate":

    Change the Title property to Translate

  14. Powtórz dwa kroki powyżej i przeciągnij przycisk z przybornika na powierzchnię projektową i umieść go pod pierwszym przyciskiem. Dopasuj szerokość, tak aby przycisk był tak szeroki, jak pierwszy przycisk:

    Adjust the width so the Button is as wide as the first Button

  15. Po wybraniu drugiego przycisku na powierzchni projektowej zmień właściwość Name w sekcji Tożsamość okienka właściwości na CallButton. Zmień właściwość Title na "Call":

    Change the Title property to Call

    Zapisz zmiany, przechodząc do pozycji Zapisz plik > lub naciskając klawisze ⌘ + s.

  16. Niektóre logiki należy dodać do aplikacji, aby przetłumaczyć numery telefonów z alfanumeryczne na liczbowe. Dodaj nowy plik do projektu, klikając prawym przyciskiem myszy projekt Telefon word_iOS w okienku rozwiązania i wybierając polecenie Dodaj > nowy plik... lub naciskając klawisze ⌘ + n:

    Add a new file to the Project

  17. W oknie dialogowym Nowy plik wybierz pozycję Ogólne > Pusta klasa i nadaj nowej nazwie nowy plik PhoneTranslator:

    Select Empty Class and name the new file PhoneTranslator

  18. Spowoduje to utworzenie nowej, pustej klasy języka C#. Usuń cały kod szablonu i zastąp go następującym kodem:

    using System.Text;
using System;

namespace Phoneword_iOS
{
    public static class PhoneTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw)) {
                return "";
            } else {
                raw = raw.ToUpperInvariant();
            }

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c)) {
                    newNumber.Append(c);
                } else {
                    var result = TranslateToNumber(c);
                    if (result != null) {
                        newNumber.Append(result);
                    }
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }

        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }

        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c)) {
                return 2;
            } else if ("DEF".Contains(c)) {
                return 3;
            } else if ("GHI".Contains(c)) {
                return 4;
            } else if ("JKL".Contains(c)) {
                return 5;
            } else if ("MNO".Contains(c)) {
                return 6;
            } else if ("PQRS".Contains(c)) {
                return 7;
            } else if ("TUV".Contains(c)) {
                return 8;
            } else if ("WXYZ".Contains(c)) {
                return 9;
            }
            return null;
        }
    }
}

    Zapisz plik Telefon Translator.cs i zamknij go.

  19. Dodaj kod, aby połączyć interfejs użytkownika. Aby to zrobić, kliknij dwukrotnie ViewController.cs w okienku rozwiązania, aby go otworzyć:

    Add code to wire up the user interface

  20. Zacznij od podłączenia do .TranslateButton W klasie ViewController znajdź metodę ViewDidLoad i dodaj następujący kod pod wywołaniembase.ViewDidLoad():

    string translatedNumber = "";

TranslateButton.TouchUpInside += (object sender, EventArgs e) => {
    // Convert the phone number with text to a number
    // using PhoneTranslator.cs
    translatedNumber = PhoneTranslator.ToNumber(
        PhoneNumberText.Text);

    // Dismiss the keyboard if text field was tapped
    PhoneNumberText.ResignFirstResponder ();

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

    Dołącz using Phoneword_iOS; , jeśli przestrzeń nazw pliku jest inna.

  21. Dodaj kod, aby odpowiedzieć użytkownikowi na naciśnięcie drugiego przycisku o nazwie CallButton. Umieść następujący kod poniżej kodu pliku TranslateButton i dodaj using Foundation; go na początku pliku:

        CallButton.TouchUpInside += (object sender, EventArgs e) => {
        // Use URL handler with tel: prefix to invoke Apple's Phone app...
        var url = new NSUrl ("tel:" + translatedNumber);

        // ...otherwise show an alert dialog
        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);
        }
    };

  22. Zapisz zmiany, a następnie skompiluj aplikację, wybierając pozycję Skompiluj > wszystko lub naciskając klawisz ⌘ + B. Jeśli aplikacja zostanie skompilowana, w górnej części środowiska IDE pojawi się komunikat o powodzeniu:

    A success message will appear at the top of the IDE

    Jeśli występują błędy, wykonaj poprzednie kroki i popraw wszelkie błędy do momentu pomyślnego skompilowania aplikacji.

  23. Na koniec przetestuj aplikację w symulatorze systemu iOS. W lewym górnym rogu środowiska IDE wybierz pozycję Debuguj z pierwszej listy rozwijanej i Telefon XR dla systemu iOS 12.0 (lub innego dostępnego symulatora) z drugiej listy rozwijanej i naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk Odtwarzania):

    Select a simulator and press start

    Uwaga

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

  24. Spowoduje to uruchomienie aplikacji wewnątrz symulatora systemu iOS:

    The application running inside the iOS Simulator

    Telefon wywołania nie są obsługiwane w symulatorze systemu iOS. Podczas próby umieszczenia wywołania zostanie wyświetlone okno dialogowe alertu:

    The alert dialog when trying to place a call

Przewodnik po programie Visual Studio

W tym przewodniku opisano sposób tworzenia aplikacji o nazwie Telefon word, która tłumaczy alfanumeryczny numer telefonu na numeryczny numer telefonu.

Uwaga

W tym przewodniku jest używany program Visual Studio Enterprise 2017 na maszynie wirtualnej z systemem Windows 10. Konfiguracja może się różnić od tej konfiguracji, o ile spełnia powyższe wymagania, ale pamiętaj, że niektóre zrzuty ekranu mogą wyglądać inaczej niż konfiguracja.

Uwaga

Przed kontynuowaniem pracy z tym przewodnikiem musisz mieć już połączenie z komputerem Mac z poziomu programu Visual Studio. Dzieje się tak, ponieważ platforma Xamarin.iOS korzysta z narzędzi firmy Apple do kompilowania i uruchamiania aplikacji. Aby się skonfigurować, wykonaj kroki opisane w przewodniku Pair to Mac (Parowanie na komputery Mac ).

  1. Uruchom program Visual Studio z menu Start :

    The Start screen

    Utwórz nowe rozwiązanie Xamarin.iOS, wybierając pozycję Plik > nowy > projekt... > Visual C# > i Telefon iPad iOs > App (Xamarin):

    Select iOS App (Xamarin) project type

    W wyświetlonym następnym oknie dialogowym wybierz szablon Aplikacja z jednym widokiem i naciśnij przycisk OK , aby utworzyć projekt:

    Select Single View project template

  2. Upewnij się, że ikona agenta Xamarin Mac na pasku narzędzi jest zielona.

    Confirm that the Xamarin Mac Agent icon in the toolbar is green

    Jeśli tak nie jest, oznacza to, że nie ma połączenia z hostem kompilacji komputera Mac, wykonaj kroki opisane w przewodniku konfiguracji, aby nawiązać połączenie.

  3. Otwórz plik Main.storyboard w Projektant systemu iOS, klikając go dwukrotnie w Eksplorator rozwiązań:

    The iOS Designer

  4. Otwórz kartę Przybornik, wpisz "label" na pasku wyszukiwania i przeciągnij etykietę na powierzchnię projektową (obszar w środku):

    Drag a Label onto the design surface the area in the center

  5. Następnie pobierz uchwyty kontrolek przeciągania i ustaw etykietę na szerszą:

    Make the label wider

  6. Po wybraniu etykiety na powierzchni projektowej użyj okna Właściwości, aby zmienić właściwość Text etykiety na "Wprowadź Telefon word:"

    Change the Text property of the Label to Enter a Phoneword

    Uwaga

    W dowolnym momencie możesz wyświetlić właściwości lub przybornik , przechodząc do menu Widok .

  7. Wyszukaj "pole tekstowe" w przyborniku i przeciągnij pole tekstowe z przybornika na powierzchnię projektową i umieść je pod etykietą. Dopasuj szerokość, aż pole tekstowe ma taką samą szerokość jak etykieta:

    Adjust the width until the Text Field is the same width as the Label

  8. Po wybraniu pola tekstowego na powierzchni projektowej zmień właściwość Nazwa pola tekstowego w sekcji Tożsamość właściwości na PhoneNumberText, a następnie zmień właściwość Text na "1-855-XAMARIN":

    Change the Text property to 1-855-XAMARIN

  9. Przeciągnij przycisk z przybornika na powierzchnię projektową i umieść go pod polem tekstowym. Dopasuj szerokość, tak aby przycisk był tak szeroki, jak pole tekstowe i etykieta:

    Adjust the width so the Button is as wide as the Text Field and Label

  10. Po wybraniu przycisku na powierzchni projektowej zmień właściwość Name w sekcji Tożsamość właściwości na TranslateButton. Zmień właściwość Title na "Translate":

    Change the Title property to Translate

  11. Powtórz dwa poprzednie kroki i przeciągnij przycisk z przybornika na powierzchnię projektową i umieść go pod pierwszym przyciskiem. Dopasuj szerokość, tak aby przycisk był tak szeroki, jak pierwszy przycisk:

    Adjust the width so the Button is as wide as the first Button

  12. Po wybraniu drugiego przycisku na powierzchni projektowej zmień właściwość Name w sekcji Tożsamość właściwości na CallButton. Zmień właściwość Title na "Call":

    Change the Title property to Call

    Zapisz zmiany, przechodząc do pozycji Plik > Zapisz wszystko lub naciskając klawisze Ctrl + s.

  13. Dodaj kod, aby przetłumaczyć numery telefonów z alfanumeryczne na liczbowe. Aby to zrobić, najpierw dodaj nowy plik do projektu, klikając prawym przyciskiem myszy Telefon word Project w Eksplorator rozwiązań i wybierając polecenie Dodaj > nowy element... lub naciskając klawisze Ctrl + Shift + A:

    Add some code to translate phone numbers from alphanumeric to numeric

  14. W oknie dialogowym Dodawanie nowego elementu (kliknij prawym przyciskiem myszy projekt, wybierz polecenie Dodaj > nowy element...), wybierz pozycję Klasa Firmy Apple > i nadaj nowej nazwie nowy plik PhoneTranslator:

    Add a new class named PhoneTranslator

    Ważne

    Upewnij się, że wybrano szablon "klasa", który ma język C# w ikonie. W przeciwnym razie może nie być możliwe odwołanie do tej nowej klasy.

  15. Spowoduje to utworzenie nowej klasy języka C#. Usuń cały kod szablonu i zastąp go następującym kodem:

    using System.Text;
using System;

namespace Phoneword
{
    public static class PhoneTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw)) {
                return "";
            } else {
                raw = raw.ToUpperInvariant();
            }

            var newNumber = new StringBuilder();
            foreach (var c in raw)
            {
                if (" -0123456789".Contains(c)) {
                    newNumber.Append(c);
                } else {
                    var result = TranslateToNumber(c);
                    if (result != null) {
                        newNumber.Append(result);
                    }
                }
                // otherwise we've skipped a non-numeric char
            }
            return newNumber.ToString();
        }

        static bool Contains (this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }

        static int? TranslateToNumber(char c)
        {
            if ("ABC".Contains(c)) {
                return 2;
            } else if ("DEF".Contains(c)) {
                return 3;
            } else if ("GHI".Contains(c)) {
                return 4;
            } else if ("JKL".Contains(c)) {
                return 5;
            } else if ("MNO".Contains(c)) {
                return 6;
            } else if ("PQRS".Contains(c)) {
                return 7;
            } else if ("TUV".Contains(c)) {
                return 8;
            } else if ("WXYZ".Contains(c)) {
                return 9;
            }
            return null;
        }
    }
}

    Zapisz plik Telefon Translator.cs i zamknij go.

  16. Kliknij dwukrotnie ViewController.cs w Eksplorator rozwiązań, aby go otworzyć, aby można było dodać logikę do obsługi interakcji z przyciskami:

    Logic added to handle interactions with the buttons

  17. Zacznij od podłączenia do .TranslateButton W klasie ViewController znajdź metodę ViewDidLoad . Dodaj następujący kod przycisku w pliku ViewDidLoadpod wywołaniem base.ViewDidLoad() :

    string translatedNumber = "";

TranslateButton.TouchUpInside += (object sender, EventArgs e) => {

    // Convert the phone number with text to a number
    // using PhoneTranslator.cs
    translatedNumber = PhoneTranslator.ToNumber(PhoneNumberText.Text);

    // Dismiss the keyboard if text field was tapped
    PhoneNumberText.ResignFirstResponder ();

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

    Dołącz using Phoneword; , jeśli przestrzeń nazw pliku jest inna.

  18. Dodaj kod, aby odpowiedzieć użytkownikowi na naciśnięcie drugiego przycisku o nazwie CallButton. Umieść następujący kod poniżej kodu pliku TranslateButton i dodaj using Foundation; go na początku pliku:

    CallButton.TouchUpInside += (object sender, EventArgs e) => {
    var url = new NSUrl ("tel:" + translatedNumber);

        // Use URL handler with tel: prefix to invoke Apple's Phone app,
        // otherwise show an alert dialog

    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);
                }
};

  19. Zapisz zmiany, a następnie skompiluj aplikację, wybierając pozycję Kompiluj > rozwiązanie kompilacji lub naciskając klawisze Ctrl + Shift + B. Jeśli aplikacja zostanie skompilowana, w dolnej części środowiska IDE zostanie wyświetlony komunikat o powodzeniu:

    A success message will appear at the bottom of the IDE

    Jeśli występują błędy, wykonaj poprzednie kroki i popraw wszelkie błędy do momentu pomyślnego skompilowania aplikacji.

  20. Na koniec przetestuj aplikację w zdalnym symulatorze systemu iOS. Na pasku narzędzi IDE wybierz pozycję Debuguj i i Telefon 8 Plus iOS x.x z menu rozwijanych i naciśnij przycisk Start (zielony trójkąt przypominający przycisk Odtwarzania):

    Press Start

  21. Spowoduje to uruchomienie aplikacji wewnątrz symulatora systemu iOS:

    The application running inside the iOS Simulator

    Telefon wywołania nie są obsługiwane w symulatorze systemu iOS. Zamiast tego podczas próby umieszczenia wywołania zostanie wyświetlone okno dialogowe alertu:

    An alert dialog will display when trying to place a call

Gratulujemy ukończenia pierwszej aplikacji platformy Xamarin.iOS!

Teraz nadszedł czas, aby odciąć narzędzia i umiejętności pokazane w tym przewodniku w sekcji Hello, iOS Deep Dive.