Merhaba, Android: Hızlı Başlangıç
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.
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:
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:
Yeni Android Uygulaması iletişim kutusunda Boş Uygulama'ya ve ardından Tamam'a tıklayarak yeni 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 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:
İpucu
Visual Studio'nun daha yeni sürümleri biraz farklı bir uygulama şablonu içeriyor.
- düzen activity_main.axml yerine content_main.axml içindedir.
- Varsayılan düzen bir
RelativeLayout
olacaktı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 öznitelikandroid: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:
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
:
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):
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:
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:
Araç Kutusu'ndan bir Düğmeyi tasarım yüzeyine sürükleyin ve Düz Metin pencere öğesinin altına yerleştirin:
Tasarım yüzeyinde Düğme seçili durumdayken, özellikler bölmesini kullanarak özelliğini Translate
olarak ve Id
özelliğini @+id/TranslateButton
olarak değiştirinText
:
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/TranslatedPhoneword
ayarlayınId
:
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:
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:
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 OnCreate
eklemektir. İ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 SetContentView
sonra 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:
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.
Android uygulamanızı yapılandırın iletişim kutusunda yeni uygulamayıPhoneword
adlandırın ve İleri'ye tıklayın.
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:
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:
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
:
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:
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-XAMARIN
olarak değiştirebilirsinizText
:
Araç Kutusu'ndan bir Düğmeyi tasarım yüzeyine sürükleyin ve Düz Metin pencere öğesinin altına yerleştirin:
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 Translate
olarak değiştirebilirsinizText
:
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 text
değiştirin:
⌘ + 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:
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 OnCreate
ve 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 SetContentView
sonra):
// 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 Label
Phone 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:
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:
İ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:
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:
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
:
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:
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.