Pengantar Pengembangan Android dengan Xamarin
Phoneword
Dalam panduan dua bagian ini, kita membangun aplikasi Xamarin.Android pertama kami (menggunakan Xamarin Studio atau Visual Studio) dan mengembangkan pemahaman tentang dasar-dasar pengembangan aplikasi Android dengan Xamarin. Sepanjang jalan akan kami memperkenalkan alat, konsep, dan langkah-langkah yang diperlukan untuk membangun dan menyebarkan aplikasi Xamarin.Android.
Hello, Android Quickstart
Dalam langkah-langkah ini, kita membuat sebuah aplikasi yang menerjemahkan nomor telepon alfanumerik yang dimasukkan oleh pengguna ke nomor telepon numerik, dan kemudian memanggil nomor itu. Aplikasi akhir terlihat seperti ini:
Mari kita mulai!
Persyaratan
Xamarin.Android bekerja dengan salah satu setup berikut:
Versi terbaru dari Xamarin Studio pada OS X Mountain Lion dan di atas.
Versi terbaru dari Xamarin Studio pada Windows 7 dan di atas.
Windows 7 dan di atas dengan Visual Studio 2010 Professional atau lebih tinggi.
Langkah-langkah ini mengasumsikan bahwa versi terbaru dari Xamarin.Android diinstal dan berjalan pada platform pilihan Anda. Untuk panduan untuk menginstal Xamarin.Android, lihat Xamarin.Android panduan Instalasi. Sebelum kita mulai, silahkan download dan unzip Xamarin App Icons & Luncurkan Screens ditetapkan.
Konfigurasi Emulator
Android memiliki beberapa pilihan untuk emulator. Standar Android emulator adalah yang paling sederhana untuk mengatur tetapi berjalan lambat. Xamarin menyarankan Anda menggunakan kinerja tinggi Xamarin Android Player. Jika Anda tidak menggunakan Xamarin Android Player, Anda harus mengkonfigurasi emulator Anda untuk menggunakan akselerasi hardware. Instruksi untuk mengkonfigurasi akselerasi hardware yang tersedia di Percepatan panduan Emulator Android.
Walkthrough
Mari kita memulai Xamarin Studio dari folder Applications atau dari Spotlight. Hal ini akan membuka halaman awal:
Klik new solution ... untuk membuat proyek baru:
Dalam Pilih template untuk dialog proyek baru Anda, mari kita klik Android> App dan pilih template Android App. Klik next.
Dalam Pilih template untuk dialog proyek baru Anda, mari kita klik Android> App dan pilih template Android App. Klik next....
Dalam dialog Configure proyek baru Anda, kami akan meninggalkan Solusi dan nama Proyek diatur untuk Phoneword dan klik Create untuk membuat proyek:
Setelah proyek baru dibuat, mari kita memperluas folder Sumber Daya dan kemudian folder tata letak di pad Solusi. Klik dua kali Main.axml untuk membukanya di Android Designer. Ini adalah file layout untuk layar kami:
Mari kita pilih Hello World, Click Me! Tombol pada permukaan desain dan tekan tombol Delete untuk menghapusnya. Dari Toolbox (daerah di sebelah kanan), memasukkan teks ke dalam kolom pencarian dan tarik Text (Large) widget ke permukaan desain (area di center):
Dengan Text (Large) widget yang dipilih pada permukaan desain, kita dapat menggunakan Properties pad untuk mengubah properti Text dari Text (Large) widget untuk Masukkan Phoneword: seperti yang terlihat di bawah ini:
Catatan: Anda dapat membuka pad Properties atau Toolbox setiap saat dengan menavigasi ke view> Pads.
Berikutnya, mari kita tarik widget Text Plain dari Toolbox ke permukaan desain dan menempatkannya di bawah Text (Large) widget. Perhatikan bahwa kita dapat menggunakan kolom pencarian untuk membantu menemukan widget dengan nama:
Dengan widget Text Plain dipilih pada permukaan desain, kita dapat menggunakan Properties pad untuk mengubah properti Id widget Text Plain ke @ + id / PhoneNumberText dan mengubah Teks properti ke 1-855-Xamarin:
Mari kita tarik Button dari Toolbox ke permukaan desain dan menempatkannya di bawah widget Text Plain:
Dengan Tombol yang dipilih pada permukaan desain, kita dapat menggunakan Properties pad untuk mengubah properti Id Button untuk @ + id / TranslateButton dan mengubah Teks properti untuk Translate:
Berikutnya, mari kita tarik Tombol kedua dari Toolbox ke permukaan desain dan menempatkannya di bawah tombol translate:
Dengan Tombol yang dipilih pada permukaan desain, kita dapat menggunakan Properties pad untuk mengubah properti Id Button untuk @ + id / CallButton dan mengubah Teks properti ke Call:
Sekarang, mari kita menambahkan beberapa kode untuk menerjemahkan nomor telepon dari alfanumerik untuk numerik. Kami akan menambahkan file baru untuk proyek dengan mengklik ikon roda gigi di sebelah proyek Phoneword di solution pad dan memilih Add> New File ...:
Dalam dialog File New, mari kita pilih general> empty class, nama file PhoneTranslator baru, dan klik New:
Ini menciptakan kosong C # kelas baru bagi kita. Mari kita menghapus semua kode template dan menggantinya dengan kode berikut:
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;
}
}
}Mari kita menyimpan perubahan ke PhoneTranslator.cs file dengan memilih File> Save (atau dengan menekan ⌘ + S), kemudian tutup file tersebut.
Berikutnya kita akan menambahkan kode untuk memasang sebuah antarmuka pengguna. Mari kita tambahkan kode dukungan ke kelas MainActivity. Klik dua kali MainActivity.cs di Solusi Pad untuk membukanya:
Kami mulai dengan kabel sampai Terjemahkan tombol. Di kelas MainActivity, menemukan metode OnCreate. Kami akan menambahkan kode tombol kami di dalam OnCreate, di bawah base.OnCreate (bundel) dan setContentView (Resource.Layout.Main) panggilan. Menghapus kode penanganan tombol Template sehingga metode OnCreate menyerupai berikut ini:
using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
namespace Phoneword
{
[Activity (Label = "Phoneword", 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
}
}
}Berikutnya, kita perlu untuk mendapatkan referensi untuk kontrol yang kita buat dalam file tata letak dengan Android Designer. Mari kita tambahkan kode berikut dalam metode OnCreate, setelah panggilan ke `SetContentView`:
// Get our UI controls from the loaded layout:
EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);
Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);
Button callButton = FindViewById<Button>(Resource.Id.CallButton);Sekarang mari kita tambahkan kode yang merespon pengguna menekan dari tombol Terjemahkan. Tambahkan kode berikut untuk metode OnCreate (setelah baris kami menambahkan di langkah terakhir):
// Disable the "Call" button
callButton.Enabled = false;
// Add code to translate number
string translatedNumber = string.Empty;
translateButton.Click += (object sender, EventArgs e) =>
{
// Translate user's alphanumeric phone number to numeric
translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);
if (String.IsNullOrWhiteSpace(translatedNumber))
{
callButton.Text = "Call";
callButton.Enabled = false;
}
else
{
callButton.Text = "Call " + translatedNumber;
callButton.Enabled = true;
}
};Berikutnya mari kita tambahkan kode yang merespon pengguna menekan tombol panggilan. Kami akan menempatkan kode berikut di bawah kode untuk Translate tombol:
callButton.Click += (object sender, EventArgs e) =>
{
// On "Call" button click, try to dial phone number.
var callDialog = new AlertDialog.Builder(this);
callDialog.SetMessage("Call " + translatedNumber + "?");
callDialog.SetNeutralButton("Call", delegate {
// Create intent to dial phone
var callIntent = new Intent(Intent.ActionCall);
callIntent.SetData(Android.Net.Uri.Parse("tel:" + translatedNumber));
StartActivity(callIntent);
});
callDialog.SetNegativeButton("Cancel", delegate { });
// Show the alert dialog to the user and wait for response.
callDialog.Show();
};Akhirnya, mari kita memberikan izin aplikasi kita untuk menempatkan panggilan telepon. Membuka opsi proyek dengan mengklik kanan Phoneword di solution pad dan selecting option:
Dalam dialog Options Project, pilih Build> Android Application. Pada bagian Diperlukan Permissions, mengaktifkan izin CallPhone:
Dalam dialog Options Project, pilih Build> Android Application. Pada bagian Diperlukan Permissions, mengaktifkan izin CallPhone:............
Jika ada kesalahan, kita bisa pergi melalui langkah-langkah sebelumnya dan memperbaiki kesalahan sampai aplikasi membangun berhasil. Jika Anda mendapatkan kesalahan membangun seperti, Sumber Daya tidak ada dalam konteks saat ini, pastikan bahwa nama namespace di MainActivity.cs sesuai dengan nama proyek (Phoneword) dan kemudian benar-benar membangun kembali solusi. Jika Anda masih mendapatkan membangun kesalahan, pastikan Anda telah menginstal Xamarin.Android dan Xamarin Studio update terbaru.
Kami sekarang memiliki aplikasi bekerja - saatnya untuk menambahkan sentuhan akhir! Mari kita mulai dengan mengedit Label untuk MainActivity kami. Label adalah apa yang menampilkan Android di bagian atas layar untuk membiarkan pengguna tahu di mana mereka berada dalam aplikasi. Di bagian atas kelas MainActivity, mengubah Label untuk seperti yang terlihat di sini:
namespace Phoneword
{
[Activity (Label = "Phone Word", MainLauncher = true)]
public class MainActivity : Activity
{
...
}
}Berikutnya, mari kita mengatur ikon aplikasi. Pertama, mari kita buka-download dan membuka ritsleting Xamarin App Icons set. Berikutnya, mari kita memperluas folder drawable-hdpi bawah resource dan menghapus icon.png ada dengan mengklik kanan dan memilih remove:
Ketika kotak dialog berikut ditampilkan, pilih delete:
Berikutnya, mari kita klik kanan folder drawable-hdpi dan pilih Add> Add Files:
Dari dialog pemilihan, mari kita arahkan ke direktori Xamarin App Icons unzipped dan membuka folder drawable-hdpi. Pilih icon.png:
Dalam Add File ke Folder kotak dialog, pilih Copy file ke direktori dan klik OK:
Ulangi langkah ini untuk setiap folder * drawable- sampai isi drawable- yang * Xamarin App Icons folder akan disalin ke rekan mereka drawable- folder * dalam proyek Phoneword:
Folder ini memberikan resolusi yang berbeda dari ikon sehingga membuat benar pada perangkat yang berbeda dengan kepadatan layar yang berbeda.
Akhirnya, kita dapat menguji aplikasi kita dengan mengerahkan ke sebuah emulator Android. Jika Anda belum dikonfigurasi emulator Anda, silakan lihat Xamarin Android Player untuk instruksi pemasangan. Dalam contoh ini, kita telah menginstal Nexus 4 (KitKat) (Android 4.4.2, API Tingkat 19) perangkat virtual dan kita sudah mulai dari Device Manager konsol Xamarin Android Player:
Dalam Xamarin Studio, pilih perangkat virtual ini (di bawah Devices Virtual) dan klik tombol putar di sudut kiri atas:
Seperti ditunjukkan dalam screenshot ini, kami telah memilih Nexus 4 (KitKat) (API 19) perangkat virtual yang berjalan di Xamarin Android Player.
Setelah Xamarin Studio load aplikasi ke dalam perangkat virtual, aplikasi Phoneword secara otomatis dimulai. Screenshot di bawah ini menggambarkan penerapan Phoneword berjalan di Xamarin Android Player. Ikon yang kami memasang ditampilkan di sebelah label Kata Phone yang kita dikonfigurasi dalam MainActivity. Mengklik tombol Terjemahkan update teks tombol Call, dan mengklik tombol Call menyebabkan dialog panggilan untuk tampil seperti yang ditunjukkan di sebelah kanan:
ayo kita coba lagi di tutorial selanjutnya.
