Merhaba, iOS – Hızlı Başlangıç

Uyarı

iOS Tasarım Aracı, Mac için Visual Studio 2019 sürüm 16.8 ve Visual Studio 2019 sürüm 8.8'de kullanım dışı bırakıldı ve Visual Studio 2019 sürüm 16.9 ve Mac için Visual Studio sürüm 8.9'da kaldırıldı. iOS kullanıcı arabirimleri oluşturmanın önerilen yolu doğrudan Xcode'un Interface Builder'ını çalıştıran bir Mac'tedir. Daha fazla bilgi için bkz . Xcode ile kullanıcı arabirimleri tasarlama.

Bu kılavuzda, kullanıcı tarafından girilen alfasayısal telefon numarasını sayısal bir telefon numarasına çeviren ve ardından bu numarayı çağıran bir uygulamanın nasıl oluşturulacağı açıklanır. Son uygulama şöyle görünür:

The Hello.iOS Quickstart app

Gereksinimler

Xamarin ile iOS geliştirme için şunlar gerekir:

Xamarin.iOS aşağıdaki kurulumla çalışır:

  • Yukarıdaki belirtimlere uyan en son Mac için Visual Studio sürümü.

Xamarin.iOS Mac Yükleme kılavuzu adım adım yükleme yönergeleri için kullanılabilir

Xamarin.iOS aşağıdaki kurulumla çalışır:

  • Windows 10'da Visual Studio 2019 veya Visual Studio 2017 Community, Professional veya Enterprise'ın en son sürümü, yukarıdaki belirtimlere uyan bir Mac derleme konağıyla eşleştirilmiştir.

Xamarin.iOS Windows Yükleme kılavuzu, adım adım yükleme yönergeleri için kullanılabilir.

Başlamadan önce Xamarin Uygulama Simgeleri kümesini indirin.

Mac için Visual Studio İzlenecek Yol

Bu kılavuzda, alfasayısal telefon numarasını sayısal telefon numarasına çeviren Telefon word adlı bir uygulamanın nasıl oluşturulacağı açıklanır.

  1. Uygulamalar klasöründen veya Spotlight'tan Mac için Visual Studio başlatın:

    The Launch screen

    Başlat Ekranında Yeni Proje... öğesine tıklayarak yeni bir Xamarin.iOS çözümü oluşturun:

    iOS solution

  2. Yeni Çözüm iletişim kutusunda iOS > Uygulaması > Tek Görünüm Uygulaması şablonunu seçerek C# öğesinin seçili olduğundan emin olun. İleri'ye tıklayın:

    Choose Single View Application

  3. Uygulamayı yapılandırın. Adı Phoneword_iOSverin ve diğer her şeyi varsayılan olarak bırakın. İleri'ye tıklayın:

    Enter the app name

  4. Proje ve Çözüm Adını olduğu gibi bırakın. Projenin konumunu burada seçin veya varsayılan olarak tutun:

    Choose the location of the project

  5. Çözümü oluşturmak için Oluştur'a tıklayın.

  6. Main.storyboard dosyasını Çözüm Bölmesi'nde çift tıklayarak açın. Visual Studio iOS Tasarım Aracı kullanarak dosyayı açtığınızdan emin olun (görsel taslak öğesine sağ tıklayın ve iOS Tasarım Aracı ile > Aç'ı seçin). Bu, kullanıcı arabirimi oluşturmak için görsel olarak bir yol sağlar:

    The iOS Designer

    Boyut sınıflarının varsayılan olarak etkinleştirildiğini unutmayın. Bunlar hakkında daha fazla bilgi edinmek için Birleşik Görsel Taslaklar kılavuzuna bakın.

  7. Araç Kutusu Bölmesi'nde, arama çubuğuna "label" yazın ve tasarım yüzeyine (ortadaki alan) bir Etiket sürükleyin:

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

    Not

    İstediğiniz zaman Görünüm >Tuş Takımı'na giderek Özellikler Bölmesi'ni veya Araç Kutusunu açabilirsiniz.

  8. Sürükleme Denetimlerinin tutamaçlarını (denetimin etrafındaki daireler) alın ve etiketi genişletin:

    Make the label wider

  9. Tasarım yüzeyinde Etiket seçili durumdayken, Özellik Bölmesi'ni kullanarak Etiketin Text özelliğini "Telefon word girin:" olarak değiştirin

    Set the label to Enter a Phoneword

  10. Araç Kutusu'nda "metin alanı" için arama yapın ve Araç Kutusu'ndan bir Metin Alanı'nıtasarım yüzeyine sürükleyin ve Etiketin altına yerleştirin. Metin Alanı, Etiket ile aynı genişlikte olana kadar genişliği ayarlayın:

    Make the Text Field the same width as the Label

  11. Tasarım yüzeyinde Metin Alanı seçili durumdayken, Özellikler Bölmesi'nin Kimlik bölümündeki Metin Alanının Ad özelliğini olarak PhoneNumberTextdeğiştirin ve Text özelliğini "1-855-XAMARIN" olarak değiştirin:

    Change the Title property to 1-855-XAMARIN

  12. Araç Kutusu'ndan bir Düğmeyitasarım yüzeyine sürükleyin ve Metin Alanı'nın altına yerleştirin. Düğmenin Metin Alanı ve Etiket kadar geniş olması için genişliği ayarlayın:

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

  13. Tasarım yüzeyinde Düğme seçili durumdayken, Özellikler Bölmesi'ninKimlik bölümündeki Name özelliğini olarak TranslateButtondeğiştirin. Title özelliğini "Translate" olarak değiştirin:

    Change the Title property to Translate

  14. Yukarıdaki iki adımı yineleyin ve Araç Kutusu'ndan bir Düğmeyi tasarım yüzeyine sürükleyin ve ilk Düğme'nin altına yerleştirin. Düğmenin ilk Düğme kadar geniş olması için genişliği ayarlayın:

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

  15. Tasarım yüzeyinde ikinci Düğme seçili durumdayken, Özellikler Bölmesi'nin Kimlik bölümündeki Name özelliğini olarak CallButtondeğiştirin. Title özelliğini "Call" olarak değiştirin:

    Change the Title property to Call

    Dosya > Kaydetme'ye giderek veya ⌘ + s tuşlarına basarak değişiklikleri kaydedin.

  16. Telefon numaralarını alfasayısaldan sayısala çevirmek için uygulamaya bazı mantıklar eklenmesi gerekir. Çözüm Bölmesi'nde Telefon word_iOS Projeye sağ tıklayıp Yeni Dosya Ekle>... öğesini seçerek veya ⌘ + n tuşlarına basarak Projeye yeni bir dosya ekleyin:

    Add a new file to the Project

  17. Yeni Dosya iletişim kutusunda Genel > Boş Sınıf'ı seçin ve yeni dosyayı PhoneTranslatoradlandırın:

    Select Empty Class and name the new file PhoneTranslator

  18. Bu, bizim için yeni, boş bir C# sınıfı oluşturur. Tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Telefon Çeviri.cs dosyasını kaydedin ve kapatın.

  19. Kullanıcı arabirimini bağlayabilmek için kod ekleyin. Bunu yapmak için Çözüm Bölmesi'ndeki ViewController.cs çift tıklayarak açın:

    Add code to wire up the user interface

  20. kablolarını bağlayarak TranslateButtonbaşlayın. ViewController sınıfında yöntemini bulun ViewDidLoad ve çağrısının altına base.ViewDidLoad() aşağıdaki kodu ekleyin:

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

    Dosyanın ad alanının farklı olup olmadığını ekleyin using Phoneword_iOS; .

  21. adlı CallButtonikinci düğmeye basan kullanıcıya yanıt vermek için kod ekleyin. aşağıdaki kodu öğesinin kodunun TranslateButton altına yerleştirin ve dosyasının en üstüne ekleyin using Foundation; :

        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. Değişiklikleri kaydedin ve ardından Tümünü Derle'yi > seçerek veya ⌘ + B tuşlarına basarak uygulamayı derleyin. Uygulama derlenirse, IDE'nin en üstünde bir başarı iletisi görüntülenir:

    A success message will appear at the top of the IDE

    Hatalar varsa, önceki adımları izleyin ve uygulama başarıyla derleninceye kadar hataları düzeltin.

  23. Son olarak, uygulamayı iOS Simülatörü'nde test edin. IDE'nin sol üst kısmında, ilk açılan listeden Hata Ayıkla'yı seçin ve ikinci açılan listeden i Telefon XR iOS 12.0 (veya diğer kullanılabilir simülatör) ve Başlat'a (Oynat düğmesine benzeyen üçgen düğme) basın:

    Select a simulator and press start

    Not

    Şu anda, Apple'ın bir gereksinimi nedeniyle, cihaz veya simülatör için kod oluşturmak için bir geliştirme sertifikasına veya imzalama kimliğine sahip olmanız gerekebilir. Bunu ayarlamak için Cihaz Sağlama kılavuzundaki adımları izleyin.

  24. Bu, uygulamayı iOS Simülatörü içinde başlatır:

    The application running inside the iOS Simulator

    Telefon çağrıları iOS Simülatörü'nde desteklenmez; bunun yerine, arama yapmaya çalışırken bir uyarı iletişim kutusu görürsünüz:

    The alert dialog when trying to place a call

Visual Studio İzlenecek Yolu

Bu kılavuzda, alfasayısal telefon numarasını sayısal telefon numarasına çeviren Telefon word adlı bir uygulamanın nasıl oluşturulacağı açıklanır.

Not

Bu kılavuzda Bir Windows 10 Sanal Makinesinde Visual Studio Enterprise 2017 kullanılmaktadır. Yukarıdaki gereksinimleri karşılıyor olduğu sürece kurulumunuz bundan farklı olabilir, ancak bazı ekran görüntülerinin kurulumunuzdan farklı görünebileceğini unutmayın.

Not

Bu kılavuza devam etmeden önce, Mac'inize Visual Studio'dan zaten bağlanmış olmanız gerekir. Bunun nedeni Xamarin.iOS'un Apple'ın uygulama derleme ve başlatma araçlarına bağlı olmasıdır. Ayarlamak için Mac'e Eşleştirme kılavuzundaki adımları izleyin.

  1. Başlat menüsünden Visual Studio'yu başlatın:

    The Start screen

    Dosya > Yeni > Proje'yi seçerek yeni bir Xamarin.iOS çözümü oluşturun... > Visual C# > i Telefon & iPad > iOS Uygulaması (Xamarin):

    Select iOS App (Xamarin) project type

    Görüntülenen sonraki iletişim kutusunda, Tek Görünüm Uygulaması şablonunu seçin ve projeyi oluşturmak için Tamam'a basın:

    Select Single View project template

  2. Araç çubuğundaki Xamarin Mac Aracısı simgesinin yeşil olduğunu onaylayın.

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

    Değilse, mac derleme konağınızla bağlantı olmadığı anlamına gelir. Bağlanmak için yapılandırma kılavuzundaki adımları izleyin.

  3. iOS Tasarım Aracı Main.storyboard dosyasını Çözüm Gezgini çift tıklayarak açın:

    The iOS Designer

  4. Araç Kutusu sekmesini açın, arama çubuğuna "etiket" yazın ve tasarım yüzeyine (ortadaki alan) bir Etiket sürükleyin:

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

  5. Ardından, Sürükleme Denetimleri'nin tutamaçlarını alın ve etiketi genişletin:

    Make the label wider

  6. Tasarım yüzeyinde Etiket seçiliyken Özellikler Windows'unu kullanarak EtiketinText özelliğini "Telefon word girin:" olarak değiştirin

    Change the Text property of the Label to Enter a Phoneword

    Not

    İstediğiniz zaman Görünüm menüsüne giderek Özellikler veya Araç Kutusu'nuaçabilirsiniz.

  7. Araç Kutusu'nda "metin alanı" için arama yapın ve Araç Kutusu'ndan bir Metin Alanı'nıtasarım yüzeyine sürükleyin ve Etiketin altına yerleştirin. Metin Alanı, Etiket ile aynı genişlikte olana kadar genişliği ayarlayın:

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

  8. Tasarım yüzeyinde Metin Alanı seçili durumdayken, Özellikler'inPhoneNumberTextKimlik bölümündeki Metin Alanının Ad özelliğini olarak değiştirin ve Text özelliğini "1-855-XAMARIN" olarak değiştirin:

    Change the Text property to 1-855-XAMARIN

  9. Araç Kutusu'ndan bir Düğmeyitasarım yüzeyine sürükleyin ve Metin Alanı'nın altına yerleştirin. Düğmenin Metin Alanı ve Etiket kadar geniş olması için genişliği ayarlayın:

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

  10. Tasarım yüzeyinde Düğme seçili durumdayken, Özellikler'in Kimlik bölümündeki Name özelliğini olarak TranslateButtondeğiştirin. Title özelliğini "Translate" olarak değiştirin:

    Change the Title property to Translate

  11. Önceki iki adımı yineleyin ve Araç Kutusu'ndan bir Düğmeyi tasarım yüzeyine sürükleyin ve ilk Düğme'nin altına yerleştirin. Düğmenin ilk Düğme kadar geniş olması için genişliği ayarlayın:

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

  12. Tasarım yüzeyinde ikinci Düğme seçili durumdayken, Özellikler'inKimlik bölümündeki Name özelliğini olarak CallButtondeğiştirin. Title özelliğini "Call" olarak değiştirin:

    Change the Title property to Call

    Dosya > Tümünü Kaydet'e giderek veya Ctrl + s tuşlarına basarak değişiklikleri kaydedin.

  13. Telefon numaralarını alfasayısaldan sayısala çevirmek için bazı kodlar ekleyin. Bunu yapmak için, önce Çözüm Gezgini Telefon word Projesine sağ tıklayıp Yeni Öğe Ekle>... öğesini seçerek veya Ctrl + Shift + A tuşlarına basarak Project'e yeni bir dosya ekleyin:

    Add some code to translate phone numbers from alphanumeric to numeric

  14. Yeni Öğe Ekle iletişim kutusunda (projeye sağ tıklayın, Yeni Öğe Ekle...'yi > seçin), Apple > Sınıfı'nı seçin ve yeni dosyayı PhoneTranslatoradlandırın:

    Add a new class named PhoneTranslator

    Önemli

    Simgede C# bulunan 'sınıf' şablonunu seçtiğinizden emin olun. Aksi takdirde bu yeni sınıfa başvuramayabilirsiniz.

  15. Bu, yeni bir C# sınıfı oluşturur. Tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

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

    Telefon Çeviri.cs dosyasını kaydedin ve kapatın.

  16. Çözüm Gezgini ViewController.cs çift tıklayarak açın; böylece düğmelerle etkileşimleri işlemek için mantık eklenebilir:

    Logic added to handle interactions with the buttons

  17. kablolarını bağlayarak TranslateButtonbaşlayın. ViewController sınıfında yöntemini bulunViewDidLoad. çağrısının altına base.ViewDidLoad() aşağıdaki düğme kodunu ViewDidLoadekleyin:

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

    Dosyanın ad alanının farklı olup olmadığını ekleyin using Phoneword; .

  18. adlı CallButtonikinci düğmeye basan kullanıcıya yanıt vermek için kod ekleyin. aşağıdaki kodu öğesinin kodunun TranslateButton altına yerleştirin ve dosyasının en üstüne ekleyin using Foundation; :

    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. Değişiklikleri kaydedin ve derleme Çözümü Derle'yi > seçerek veya Ctrl + Shift + B tuşlarına basarak uygulamayı derleyin. Uygulama derlenirse, IDE'nin en altında bir başarı iletisi görüntülenir:

    A success message will appear at the bottom of the IDE

    Hatalar varsa, önceki adımları izleyin ve uygulama başarıyla derleninceye kadar hataları düzeltin.

  20. Son olarak, uygulamayı Uzak iOS Simülatörü'nde test edin. IDE araç çubuğunda, açılan menülerden Hata ayıkla ve i Telefon 8 Plus iOS x.x'i seçin ve Başlat'a (Oynat düğmesine benzeyen yeşil üçgen) basın:

    Press Start

  21. Bu, uygulamayı iOS Simülatörü içinde başlatır:

    The application running inside the iOS Simulator

    Telefon çağrıları iOS Simülatörü'nde desteklenmez; bunun yerine, arama yapmaya çalışırken bir uyarı iletişim kutusu görüntülenir:

    An alert dialog will display when trying to place a call

İlk Xamarin.iOS uygulamanızı tamamladığım için tebrikler!

Şimdi Hello, iOS Ayrıntılı Bakış'ta bu kılavuzda gösterilen araçları ve becerileri incelemenin zamanı geldi.