Merhaba, Android: Hızlı Başlangıç

  • Makale

Bu iki bölümden oluşan kılavuzda Visual Studio ile ilk Xamarin.Android uygulamanızı oluşturacak ve Xamarin ile Android uygulama geliştirmenin temellerini anlayacaksınız.

Download Sample Örneği indirme

Alfasayısal telefon numarasını (kullanıcı tarafından girilen) sayısal bir telefon numarasına çeviren ve sayısal telefon numarasını kullanıcıya görüntüleyen bir uygulama oluşturacaksınız. Son uygulama şöyle görünür:

Screenshot of phone number translation app when it is complete.

Windows gereksinimleri

Bu kılavuzu takip etmek için aşağıdakilere ihtiyacınız olacaktır:

  • Windows 10.

  • Visual Studio 2019 veya Visual Studio 2017 (sürüm 15.8 veya üzeri): Community, Professional veya Enterprise.

macOS gereksinimleri

Bu kılavuzu takip etmek için aşağıdakilere ihtiyacınız olacaktır:

  • Mac için Visual Studio'nin en son sürümü.

  • macOS High Sierra (10.13) veya üzerini çalıştıran bir Mac.

Bu kılavuzda, Xamarin.Android'in en son sürümünün seçtiğiniz platformda yüklü ve çalışır durumda olduğu varsayılır. Xamarin.Android yükleme kılavuzu için Xamarin.Android Yükleme kılavuzlarına bakın.

Öykünücüleri yapılandırma

Android öykünücüsü kullanıyorsanız, öykünücüyü donanım hızlandırma kullanacak şekilde yapılandırmanızı öneririz. Öykünücü Performansı için Donanım Hızlandırma'da donanım hızlandırmayı yapılandırma yönergeleri sağlanır.

Proje oluşturma

Visual Studio’yu çalıştırın. Yeni proje oluşturmak için Yeni > Proje Dosyala'ya > tıklayın.

Yeni Proje iletişim kutusunda Android Uygulama şablonuna tıklayın. Yeni projeyi Phoneword adlandırın ve Tamam'a tıklayın:

New project is Phoneword

Yeni Android Uygulaması iletişim kutusunda Boş Uygulama'ya ve ardından Tamam'a tıklayarak yeni projeyi oluşturun:

Select the Blank App template

Düzen oluşturma

İpucu

Visual Studio'nun daha yeni sürümleri, Android Tasarım Aracı içinde .xml dosyaları açmayı destekler.

Android Tasarım Aracı hem .axml hem de .xml dosyaları desteklenir.

Yeni proje oluşturulduktan sonra Kaynaklar klasörünü ve ardından Çözüm Gezgini düzen klasörünü genişletin. android Tasarım Aracı açmak için activity_main.axml'ye çift tıklayın. Bu, uygulamanın ekranının düzen dosyasıdır:

Open activity axml file

İpucu

Visual Studio'nun daha yeni sürümleri biraz farklı bir uygulama şablonu içeriyor.

  1. düzen activity_main.axml yerine content_main.axml içindedir.
  2. Varsayılan düzen bir RelativeLayoutolacaktır. Bu sayfadaki diğer adımların çalışması için etiketi olarak değiştirmeniz <RelativeLayout> ve açılış etiketine <LinearLayout>LinearLayout başka bir öznitelik android:orientation="vertical" eklemeniz gerekir.

Araç Kutusu'ndan (soldaki alan) arama alanına girin text ve tasarım yüzeyine (ortadaki alan) bir Metin (Büyük) pencere öğesi sürükleyin:

Add large text widget

Tasarım yüzeyinde Metin (Büyük) denetimi seçili durumdayken, Özellikler bölmesini kullanarak Metin (Büyük) pencere öğesinin Enter a Phoneword:özelliğini olarak değiştirinText:

Set large text properties

Düz Metin pencere öğesini Araç Kutusu'ndantasarım yüzeyine sürükleyin ve Metin (Büyük) pencere öğesinin altına yerleştirin. Fare işaretçisini düzende pencere öğesini kabul edebilen bir yere taşımadığınız sürece pencere öğesinin yerleşimi gerçekleşmez. Aşağıdaki ekran görüntülerinde, fare işaretçisi öncekinin TextView hemen altına taşınana kadar (solda gösterildiği gibi) pencere öğesi yerleştirilemez (sağda gösterildiği gibi):

Mouse indicates where widget can be placed

Düz Metin (pencere EditText öğesi) doğru yerleştirildiğinde, aşağıdaki ekran görüntüsünde gösterildiği gibi görünür:

Add plain text widget

Tasarım yüzeyinde Düz Metin pencere öğesi seçili durumdayken, Düz Metin pencere @+id/PhoneNumberText öğesinin özelliğini olarak değiştirmek Id ve özelliğini olarak değiştirmek Text için 1-855-XAMARINÖzellikler bölmesini kullanın:

Set plain text properties

Araç Kutusu'ndan bir Düğmeyi tasarım yüzeyine sürükleyin ve Düz Metin pencere öğesinin altına yerleştirin:

Drag translate button to the design

Tasarım yüzeyinde Düğme seçili durumdayken, özellikler bölmesini kullanarak özelliğini Translate olarak ve Id özelliğini @+id/TranslateButtonolarak değiştirinText:

Set translate button properties

TextView'ıAraç Kutusu'ndan tasarım yüzeyine sürükleyin ve Düğme pencere öğesinin altına yerleştirin. Text TextView özelliğini boş bir dize olarak değiştirin ve özelliğini olarak @+id/TranslatedPhonewordayarlayınId:

Set the properties on the text view.

CTRL+S tuşlarına basarak çalışmanızı kaydedin.

Kod yazma

Sonraki adım, telefon numaralarını alfasayısaldan sayısala çevirmek için bazı kodlar eklemektir. Çözüm Gezgini bölmesindeki Telefon word projesine sağ tıklayıp aşağıda gösterildiği gibi Yeni Öğe Ekle>... öğesini seçerek projeye yeni bir dosya ekleyin:

Add new item

Yeni Öğe Ekle iletişim kutusunda Visual C# > Kod > Kodu Dosyası'nı seçin ve yeni kod dosyasını Telefon Çeviri.cs adlandırın:

Add PhoneTranslator.cs

Bu, yeni bir boş C# sınıfı oluşturur. Bu dosyaya aşağıdaki kodu ekleyin:

using System.Text;
using System;
namespace Core
{
    public static class PhonewordTranslator
    {
        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;
        }
    }
}

Dosya > Kaydet'e tıklayarak (veya CTRL+S tuşlarına basarak) değişiklikleri Telefon Çeviri.cs dosyasına kaydedin ve dosyayı kapatın.

Kullanıcı arabirimini bağla

Sonraki adım, sınıfa kod yedekleme ekleyerek kullanıcı arabirimini bağlamaya yönelik kod MainActivity eklemektir. Çevir düğmesini bağlayarak başlayın. MainActivity sınıfında yöntemini bulunOnCreate. Sonraki adım, ve SetContentView(Resource.Layout.activity_main) çağrılarının altına base.OnCreate(savedInstanceState) içine düğme kodunu OnCreateeklemektir. İlk olarak, şablon kodunu yönteminin OnCreate aşağıdakine benzemesi için değiştirin:

using Android.App;
using Android.OS;
using Android.Support.V7.App;
using Android.Runtime;
using Android.Widget;

namespace Phoneword
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);

            // New code will go here
        }
    }
}

Android Tasarım Aracı aracılığıyla düzen dosyasında oluşturulan denetimlere başvuru alın. çağrısından SetContentViewsonra yönteminin OnCreate içine aşağıdaki kodu ekleyin:

// Get our UI controls from the loaded layout
EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);
TextView translatedPhoneWord = FindViewById<TextView>(Resource.Id.TranslatedPhoneword);
Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);

Çevir düğmesinin kullanıcı basmalarına yanıt veren kod ekleyin. Yöntemine OnCreate aşağıdaki kodu ekleyin (önceki adımda eklenen satırlar sonrasında):

// Add code to translate number
translateButton.Click += (sender, e) =>
{
    // Translate user's alphanumeric phone number to numeric
    string translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);
    if (string.IsNullOrWhiteSpace(translatedNumber))
    {
        translatedPhoneWord.Text = string.Empty;
    }
    else
    {
        translatedPhoneWord.Text = translatedNumber;
    }
};

Dosya Tümünü Kaydet'i seçerek (veya CTRL-SHIFT-S tuşlarına basarak) çalışmanızı kaydedin ve Çözümü Yeniden Derle'yi > seçerek (veya CTRL-SHIFT-B tuşlarına basarak) uygulamayı derleyin.>

Hatalar varsa, önceki adımları izleyin ve uygulama başarıyla derleninceye kadar hataları düzeltin. Gibi bir derleme hatası alırsanız, Kaynak geçerli bağlamda yok, MainActivity.cs ad alanı adının proje adıyla (Phoneword) eşleşip çözümü tamamen yeniden derlediğini doğrulayın. Hala derleme hataları alırsanız en son Visual Studio güncelleştirmelerini yüklediğinizi doğrulayın.

Uygulama adını ayarlama

Artık çalışan bir uygulamanız olmalıdır; uygulamanın adını ayarlamanın zamanı geldi. Values klasörünü (Kaynaklar klasörünün içinde) genişletin ve strings.xml dosyasını açın. Uygulama adı dizesini Phone Word burada gösterildiği gibi olarak değiştirin:

<resources>
    <string name="app_name">Phone Word</string>
    <string name="action_settings">Settings</string>
</resources>

Uygulamayı çalıştırma

Uygulamayı bir Android cihazda veya öykünücüde çalıştırarak test edin. 1-855-XAMARIN'i bir telefon numarasına çevirmek için ÇEVİr düğmesine dokunun:

Screenshot of app running

Uygulamayı bir Android cihazında çalıştırmak için cihazınızı geliştirme için ayarlama bölümüne bakın.

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

Yeni proje oluşturmak için Yeni Proje... öğesine tıklayın.

Yeni projeniz için şablon seçin iletişim kutusunda Android > Uygulaması'na tıklayın ve Android Uygulama şablonunu seçin. İleri'ye tıklayın.

Choose the Android App template

Android uygulamanızı yapılandırın iletişim kutusunda yeni uygulamayıPhoneword adlandırın ve İleri'ye tıklayın.

Configure the Android App

Yeni Android Uygulamanızı yapılandırın iletişim kutusunda Çözüm ve Proje adlarını olarak bırakın Phoneword ve oluştur'a tıklayarak projeyi oluşturun.

Düzen oluşturma

İpucu

Visual Studio'nun daha yeni sürümleri, Android Tasarım Aracı içinde .xml dosyaları açmayı destekler.

Android Tasarım Aracı hem .axml hem de .xml dosyaları desteklenir.

Yeni proje oluşturulduktan sonra Kaynaklar klasörünü ve ardından Çözüm panelindeki düzen klasörünü genişletin. Main.axml'ye çift tıklayarak Android Tasarım Aracı açın. Bu, Android Tasarım Aracı görüntülendiğinde ekranın düzen dosyasıdır:

Open Main.axml

Merhaba Dünya seçin, Ben'e tıklayın!Tasarım yüzeyindeki düğmeyi kaldırın ve Delete tuşuna basın.

Araç Kutusu'ndan (sağdaki alan) arama alanına girin text ve tasarım yüzeyine (ortadaki alan) bir Metin (Büyük) pencere öğesi sürükleyin:

Add large text widget

Tasarım yüzeyinde Metin (Büyük) pencere öğesi seçiliyken, Özellikler tuş takımını kullanarak Metin (Büyük) pencere öğesinin Enter a Phoneword: özelliğini aşağıda gösterildiği gibi olarak değiştirebilirsinizText:

Set large text widget properties

Ardından, Araç Kutusu'ndan bir Düz Metin pencere öğesini tasarım yüzeyine sürükleyin ve Metin (Büyük) pencere öğesinin altına yerleştirin. Pencere öğelerini ada göre bulmanıza yardımcı olması için arama alanını kullanabileceğinize dikkat edin:

Add plain text widget

Tasarım yüzeyinde Düz Metin pencere öğesi seçili durumdayken, Özellikler tuş takımını Id kullanarak Düz Metin pencere öğesinin @+id/PhoneNumberText özelliğini olarak değiştirebilir ve özelliğini 1-855-XAMARINolarak değiştirebilirsinizText:

Set plain text widget properties

Araç Kutusu'ndan bir Düğmeyi tasarım yüzeyine sürükleyin ve Düz Metin pencere öğesinin altına yerleştirin:

Add a button

Tasarım yüzeyinde Düğme seçili durumdayken, Özellikler tuş takımını kullanarak Düğme@+id/TranslateButton özelliğini olarak değiştirebilir Id ve özelliğini Translateolarak değiştirebilirsinizText:

Configure as the translate button

TextView'ıAraç Kutusu'ndan tasarım yüzeyine sürükleyin ve Düğme pencere öğesinin altına yerleştirin. TextView seçili durumdayken, TextView @+id/TranslatedPhoneWord özelliğini olarak ayarlayın id ve öğesini boş bir dize olarak textdeğiştirin:

Set the properties on the text view.

⌘ + S tuşlarına basarak çalışmanızı kaydedin.

Kod yazma

Şimdi, telefon numaralarını alfasayısaldan sayısala çevirmek için bazı kodlar ekleyin. Çözüm panelindeki Telefon word projesinin yanındaki dişli simgesine tıklayıp Yeni Dosya Ekle>...'yi seçerek projeye yeni bir dosya ekleyin:

Add a new file to the project

Yeni Dosya iletişim kutusunda Genel > Boş Sınıf'ı seçin, yeni dosyayı Telefon Çeviri adlandırın ve Yeni'ye tıklayın. Bu, bizim için yeni bir boş C# sınıfı oluşturur.

Yeni sınıftaki tüm şablon kodunu kaldırın ve aşağıdaki kodla değiştirin:

using System.Text;
using System;
namespace Core
{
    public static class PhonewordTranslator
    {
        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;
        }
    }
}

Dosya > Kaydet'i seçerek (veya ⌘ + S tuşlarına basarak) değişiklikleri Telefon Çeviri.cs dosyasına kaydedin ve dosyayı kapatın. Çözümü yeniden oluşturarak derleme zamanı hatası olmadığından emin olun.

Kullanıcı arabirimini bağla

Sonraki adım, sınıfına yedekleme kodunu ekleyerek kullanıcı arabirimini bağlamaya yönelik kod eklemektir MainActivity . Çözüm Bölmesi'nde MainActivity.cs çift tıklayarak açın.

Çevir düğmesine bir olay işleyicisi ekleyerek başlayın. MainActivity sınıfında yöntemini bulunOnCreate. düğme kodunu OnCreateve SetContentView (Resource.Layout.Main) çağrılarının base.OnCreate(bundle) altına ekleyin. Yöntemin aşağıdakine benzemesi için var olan tüm düğme işleme kodlarını (buna başvuran Resource.Id.myButton ve bu kod için bir tıklama işleyicisi oluşturan kod) OnCreate kaldırın:

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace Phoneword
{
    [Activity (Label = "Phone Word", MainLauncher = true)]
    public class MainActivity : Activity
    {
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);

            // Our code will go here
        }
    }
}

Ardından, Android Tasarım Aracı ile düzen dosyasında oluşturulan denetimlere bir başvuru gerekir. yönteminin OnCreate içine aşağıdaki kodu ekleyin (çağrısından SetContentViewsonra):

// Get our UI controls from the loaded layout
EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);
TextView translatedPhoneWord = FindViewById<TextView>(Resource.Id.TranslatedPhoneWord);
Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);

Yöntemine aşağıdaki kodu OnCreate ekleyerek (son adımda eklenen satırlardan sonra):

// Add code to translate number
string translatedNumber = string.Empty;

translateButton.Click += (sender, e) =>
{
    // Translate user's alphanumeric phone number to numeric
    translatedNumber = PhonewordTranslator.ToNumber(phoneNumberText.Text);
    if (string.IsNullOrWhiteSpace(translatedNumber))
    {
        translatedPhoneWord.Text = string.Empty;
    }
    else
    {
        translatedPhoneWord.Text = translatedNumber;
    }
};

Tümünü Derle'yi > seçerek (veya ⌘ + B tuşlarına basarak) çalışmanızı kaydedin ve uygulamayı derleyin. Uygulama derlenirse, Mac için Visual Studio en üstünde bir başarı iletisi alırsınız:

Hatalar varsa, önceki adımları izleyin ve uygulama başarıyla derleninceye kadar hataları düzeltin. Gibi bir derleme hatası alırsanız, Kaynak geçerli bağlamda yok, MainActivity.cs ad alanı adının proje adıyla (Phoneword) eşleşip çözümü tamamen yeniden derlediğini doğrulayın. Derleme hataları almaya devam ediyorsanız en son Xamarin.Android ve Mac için Visual Studio güncelleştirmelerini yüklediğinizi doğrulayın.

Etiketi ve uygulama simgesini ayarlama

Artık çalışan bir uygulamanız olduğuna göre, son rötuşları eklemenin zamanı geldi! için MainActivityöğesini düzenleyerek Label başlayın. Label Android, kullanıcıların uygulamanın neresinde olduklarını bildirmek için ekranın üst kısmında görüntülenen ekrandır. Sınıfın MainActivity en üstünde, öğesini burada gösterildiği gibi olarak değiştirin LabelPhone Word :

namespace Phoneword
{
    [Activity (Label = "Phone Word", MainLauncher = true)]
    public class MainActivity : Activity
    {
        ...
    }
}

Şimdi uygulama simgesini ayarlamanın zamanı geldi. Varsayılan olarak, Mac için Visual Studio proje için varsayılan bir simge sağlar. Bu dosyaları çözümden silin ve farklı bir simgeyle değiştirin. Çözüm Bölmesi'nde Kaynaklar klasörünü genişletin. mipmap- ön ekli beş klasör olduğuna ve bu klasörlerin her birinin tek bir Icon.png dosyası içerdiğine dikkat edin:

mipmap- folders and Icon.png files

Bu simge dosyalarının her birini projeden silmek gerekir. Icon.png dosyaların her birine sağ tıklayın ve bağlam menüsünden Kaldır'ı seçin:

Delete default Icon.png

İletişim kutusunda Sil düğmesine tıklayın.

Ardından Xamarin Uygulama Simgeleri kümesini indirin ve açın. Bu zip dosyası uygulamanın simgelerini barındırıyor. Her simge görsel olarak aynıdır, ancak farklı çözünürlüklerde farklı ekran yoğunluklarına sahip farklı cihazlarda doğru şekilde işlenir. Dosya kümesinin Xamarin.Android projesine kopyalanması gerekir. Mac için Visual Studio Çözüm Bölmesi'nde mipmap-hdpi klasörüne sağ tıklayın ve Dosya Ekle'yi > seçin:

Add files

Seçim iletişim kutusundan sıkıştırması açılmış Xamarin AdApp Icons dizinine gidin ve mipmap-hdpi klasörünü açın. Icon.png'ı seçin ve Aç'a tıklayın.

Klasöre Dosya Ekle iletişim kutusunda, Dosyayı dizine kopyala'yı seçin ve Tamam'a tıklayın:

Copy the file to the directory dialog

mipmap- Xamarin Uygulama Simgeleri klasörlerinin içeriği Telefon word projesindeki karşılık gelen mipmap- klasörlerine kopyalanana kadar her mipmap- klasörü için bu adımları yineleyin.

Tüm simgeler Xamarin.Android projesine kopyalandıktan sonra, Çözüm Bölmesi'nde projeye sağ tıklayarak Proje Seçenekleri iletişim kutusunu açın. Android Uygulaması Derle'yi > seçin ve Uygulama simgesi birleşik giriş kutusundan seçin@mipmap/icon:

Setting the project icon

Uygulamayı çalıştırma

Son olarak, uygulamayı bir Android cihazda veya öykünücüde çalıştırıp bir Telefon sözcüğü çevirerek test edin:

Screenshot of app when it is complete

Uygulamayı bir Android cihazında çalıştırmak için cihazınızı geliştirme için ayarlama bölümüne bakın.

tebrikler, ilk Xamarin.Android uygulamanızı tamamladınız! Şimdi yeni öğrendiğiniz araçları ve becerileri dağıtmanın zamanı geldi. Sırada Hello, Android Deep Dive var.