Halo, Android: Mulai cepat

Artikel
07/13/2023

Dalam panduan dua bagian ini, Anda akan membangun aplikasi Xamarin.Android pertama Anda dengan Visual Studio dan mengembangkan pemahaman tentang dasar-dasar pengembangan aplikasi Android dengan Xamarin.

Download Sample Mengunduh sampel

Anda akan membuat aplikasi yang menerjemahkan nomor telepon alfanumerik (dimasukkan oleh pengguna) ke dalam nomor telepon numerik dan menampilkan nomor telepon numerik kepada pengguna. Aplikasi akhir terlihat seperti ini:

Persyaratan Windows

Untuk mengikuti panduan ini, Anda memerlukan hal berikut:

Windows 10.
Visual Studio 2019 atau Visual Studio 2017 (versi 15.8 atau yang lebih baru): Komunitas, Profesional, atau Perusahaan.

persyaratan macOS

Untuk mengikuti panduan ini, Anda memerlukan hal berikut:

Versi terbaru Visual Studio untuk Mac.
Mac yang menjalankan macOS High Sierra (10.13) atau yang lebih baru.

Panduan ini mengasumsikan bahwa versi terbaru Xamarin.Android diinstal dan berjalan di platform pilihan Anda. Untuk panduan penginstalan Xamarin.Android, lihat panduan Penginstalan Xamarin.Android.

Mengonfigurasi emulator

Jika Anda menggunakan emulator Android, kami sarankan Anda mengonfigurasi emulator untuk menggunakan akselerasi perangkat keras. Petunjuk untuk mengonfigurasi akselerasi perangkat keras tersedia di Akselerasi Perangkat Keras untuk Performa Emulator.

Membuat proyek

Mulai Visual Studio. Klik File > Proyek Baru > untuk membuat proyek baru.

Dalam dialog Proyek Baru, klik templat Aplikasi Android. Beri nama proyek Phoneword baru dan klik OK:

Dalam dialog Aplikasi Android Baru, klik Aplikasi Kosong dan klik OK untuk membuat proyek baru:

Membuat tata letak

Tip

Rilis Visual Studio yang lebih baru mendukung pembukaan file .xml di dalam Android Designer.

File .axml dan .xml didukung di Android Designer.

Setelah proyek baru dibuat, perluas folder Sumber Daya lalu folder tata letak di Penjelajah Solusi. Klik dua kali activity_main.axml untuk membukanya di Android Designer. Ini adalah file tata letak untuk layar aplikasi:

Tip

Rilis Visual Studio yang lebih baru berisi templat aplikasi yang sedikit berbeda.

Alih-alih activity_main.axml, tata letak berada di content_main.axml.
Tata letak default akan menjadi RelativeLayout. Agar langkah-langkah lain di halaman ini berfungsi, Anda harus mengubah <RelativeLayout> tag menjadi <LinearLayout> dan menambahkan atribut android:orientation="vertical" lain ke LinearLayout tag pembuka.

Dari Kotak Alat (area di sebelah kiri), masukkan text ke bidang pencarian dan seret widget Teks (Besar) ke permukaan desain (area di tengah):

Dengan kontrol Teks (Besar) dipilih pada permukaan desain, gunakan panel Properti untuk mengubah Text properti widget Teks (Besar) menjadi Enter a Phoneword::

Seret widget Teks Biasa dari Kotak Alat ke permukaan desain dan letakkan di bawah widget Teks (Besar). Penempatan widget tidak akan terjadi sampai Anda memindahkan penunjuk mouse ke tempat di tata letak yang dapat menerima widget. Pada cuplikan layar di bawah ini, widget tidak dapat ditempatkan (seperti yang terlihat di sebelah kiri) hingga penunjuk mouse dipindahkan tepat di bawah sebelumnya TextView (seperti yang ditunjukkan di sebelah kanan):

Ketika Teks Biasa (EditTextwidget) ditempatkan dengan benar, teks tersebut akan muncul seperti yang diilustrasikan dalam cuplikan layar berikut:

Dengan widget Teks Biasa dipilih pada permukaan desain, gunakan panel Properti untuk mengubah Id properti widget Teks Biasa menjadi @+id/PhoneNumberText dan mengubah Text properti menjadi 1-855-XAMARIN:

Seret Tombol dari Kotak Alat ke permukaan desain dan letakkan di bawah widget Teks Biasa:

Dengan Tombol dipilih pada permukaan desain, gunakan panel Properti untuk mengubah propertinya Text menjadi Translate dan propertinya Id menjadi @+id/TranslateButton:

Seret TextView dari Kotak Alat ke permukaan desain dan letakkan di bawah widget Tombol. Text Ubah properti TextView menjadi string kosong dan atur propertinya Id ke @+id/TranslatedPhoneword:

Simpan pekerjaan Anda dengan menekan CTRL+S.

Menulis beberapa kode

Langkah selanjutnya adalah menambahkan beberapa kode untuk menerjemahkan nomor telepon dari alfanumerik ke numerik. Tambahkan file baru ke proyek dengan mengklik kanan proyek Telepon word di panel Penjelajah Solusi dan memilih Tambahkan > Item Baru... seperti yang ditunjukkan di bawah ini:

Dalam dialog Tambahkan Item Baru, pilih File Kode > Visual C# > dan beri nama file kode baru Telepon Penerjemah.cs:

Ini membuat kelas C# kosong baru. Sisipkan kode berikut ke dalam file ini:

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

Simpan perubahan ke file Telepon Penerjemah.cs dengan mengklik Simpan File > (atau dengan menekan CTRL+S), lalu tutup file.

Menyambungkan antarmuka pengguna

Langkah selanjutnya adalah menambahkan kode untuk menyambungkan antarmuka pengguna dengan memasukkan kode cadangan ke MainActivity kelas . Mulailah dengan memasang kabel tombol Terjemahkan . MainActivity Di kelas , temukan metode .OnCreate Langkah selanjutnya adalah menambahkan kode tombol di dalam OnCreate, di base.OnCreate(savedInstanceState) bawah panggilan dan SetContentView(Resource.Layout.activity_main) . Pertama, ubah kode templat sehingga OnCreate metodenya menyerupan berikut:

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

Dapatkan referensi ke kontrol yang dibuat dalam file tata letak melalui Android Designer. Tambahkan kode berikut di OnCreate dalam metode , setelah panggilan ke SetContentView:

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

Tambahkan kode yang merespons penekanan pengguna pada tombol Terjemahkan . Tambahkan kode berikut ke OnCreate metode (setelah baris ditambahkan di langkah sebelumnya):

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

Simpan pekerjaan Anda dengan memilih Simpan Semua File > (atau dengan menekan CTRL-SHIFT-S) dan buat aplikasi dengan memilih Bangun > Solusi Pembangunan Ulang (atau dengan menekan CTRL-SHIFT-B).

Jika ada kesalahan, lakukan langkah-langkah sebelumnya dan perbaiki kesalahan apa pun hingga aplikasi berhasil dibangun. Jika Anda mendapatkan kesalahan build seperti, Sumber Daya tidak ada dalam konteks saat ini, verifikasi bahwa nama namespace di MainActivity.cs cocok dengan nama proyek (Phoneword) lalu bangun kembali solusi sepenuhnya. Jika Anda masih mendapatkan kesalahan build, verifikasi bahwa Anda telah menginstal pembaruan Visual Studio terbaru.

Mengatur nama aplikasi

Anda sekarang harus memiliki aplikasi yang berfungsi - saatnya untuk mengatur nama aplikasi. Perluas folder nilai (di dalam folder Sumber Daya) dan buka file strings.xml. Ubah string nama aplikasi menjadi Phone Word seperti yang ditunjukkan di sini:

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

Menjalankan aplikasi

Uji aplikasi dengan menjalankannya di perangkat Android atau emulator. Ketuk tombol TERJEMAHKAN untuk menerjemahkan 1-855-XAMARIN ke dalam nomor telepon:

Untuk menjalankan aplikasi di perangkat Android, lihat cara menyiapkan perangkat Anda untuk pengembangan.

Luncurkan Visual Studio untuk Mac dari folder Aplikasi atau dari Spotlight.

Klik Proyek Baru... untuk membuat proyek baru.

Dalam dialog Pilih templat untuk proyek baru Anda, klik Aplikasi Android > dan pilih templat Aplikasi Android. Klik Berikutnya.

Dalam dialog Konfigurasikan aplikasi Android Anda, beri nama aplikasi Phoneword baru dan klik Berikutnya.

Dalam dialog Konfigurasikan Aplikasi Android baru Anda, biarkan nama Solusi dan Proyek diatur ke Phoneword dan klik Buat untuk membuat proyek.

Membuat tata letak

Tip

Rilis Visual Studio yang lebih baru mendukung pembukaan file .xml di dalam Android Designer.

File .axml dan .xml didukung di Android Designer.

Setelah proyek baru dibuat, perluas folder Sumber Daya lalu folder tata letak di pad Solusi . Klik dua kali Main.axml untuk membukanya di Android Designer. Ini adalah file tata letak untuk layar saat dilihat di Android Designer:

Pilih Halo Dunia, Klik Saya!Tombol pada permukaan desain dan tekan tombol Hapus untuk menghapusnya.

Dari Kotak Alat (area di sebelah kanan), masukkan text ke bidang pencarian dan seret widget Teks (Besar) ke permukaan desain (area di tengah):

Dengan widget Teks (Besar) yang dipilih pada permukaan desain, Anda dapat menggunakan pad Properti untuk mengubah Text properti widget Teks (Besar) menjadi Enter a Phoneword: seperti yang ditunjukkan di bawah ini:

Selanjutnya, seret widget Teks Biasa dari Kotak Alat ke permukaan desain dan letakkan di bawah widget Teks (Besar ). Perhatikan bahwa Anda dapat menggunakan bidang pencarian untuk membantu menemukan widget berdasarkan nama:

Dengan widget Teks Biasa dipilih pada permukaan desain, Anda dapat menggunakan pad Properti untuk mengubah Id properti widget Teks Biasa menjadi @+id/PhoneNumberText dan mengubah Text properti menjadi 1-855-XAMARIN:

Seret Tombol dari Kotak Alat ke permukaan desain dan letakkan di bawah widget Teks Biasa:

Dengan Tombol yang dipilih pada permukaan desain, Anda dapat menggunakan pad Properti untuk mengubah Id properti Tombol menjadi @+id/TranslateButton dan mengubah Text properti menjadi Translate:

Seret TextView dari Kotak Alat ke permukaan desain dan letakkan di bawah widget Tombol. Dengan TextView dipilih, atur id properti TextView ke @+id/TranslatedPhoneWord dan ubah text menjadi string kosong:

Simpan pekerjaan Anda dengan menekan ⌘ + S.

Menulis beberapa kode

Sekarang, tambahkan beberapa kode untuk menerjemahkan nomor telepon dari alfanumerik ke numerik. Tambahkan file baru ke proyek dengan mengklik ikon gigi di samping proyek Telepon word di pad Solusi dan memilih Tambahkan > File Baru...:

Dalam dialog File Baru, pilih Kelas Kosong Umum>, beri nama file baru Telepon Penerjemah, dan klik Baru. Ini membuat kelas C# kosong baru bagi kami.

Hapus semua kode templat di kelas baru dan ganti 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;
        }
    }
}

Simpan perubahan ke file Telepon Penerjemah.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S), lalu tutup file. Pastikan bahwa tidak ada kesalahan waktu kompilasi dengan membangun kembali solusi.

Menyambungkan antarmuka pengguna

Langkah selanjutnya adalah menambahkan kode untuk menghubungkan antarmuka pengguna dengan menambahkan kode cadangan ke MainActivity kelas . Klik dua kali MainActivity.cs di Pad Solusi untuk membukanya.

Mulailah dengan menambahkan penanganan aktivitas ke tombol Terjemahkan . MainActivity Di kelas , temukan metode .OnCreate Tambahkan kode tombol di dalam OnCreate, di base.OnCreate(bundle) bawah panggilan dan SetContentView (Resource.Layout.Main) . Hapus kode penanganan tombol yang ada (yaitu, kode yang mereferensikan Resource.Id.myButton dan membuat handler klik untuk kode tersebut) sehingga OnCreate metode menyerupan berikut:

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

Selanjutnya, referensi diperlukan untuk kontrol yang dibuat dalam file tata letak dengan Android Designer. Tambahkan kode berikut di OnCreate dalam metode (setelah panggilan ke SetContentView):

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

Tambahkan kode yang merespons penekanan pengguna dari tombol Terjemahkan dengan menambahkan kode berikut ke OnCreate metode (setelah baris ditambahkan di langkah terakhir):

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

Simpan pekerjaan Anda dan buat aplikasi dengan memilih Build Build All (atau dengan menekan ⌘ + B>). Jika aplikasi dikompilasi, Anda akan mendapatkan pesan sukses di bagian atas Visual Studio untuk Mac:

Mengatur label dan ikon aplikasi

Sekarang setelah Anda memiliki aplikasi yang berfungsi, saatnya untuk menambahkan sentuhan akhir! Mulailah dengan mengedit Label untuk MainActivity. Itulah Label yang ditampilkan Android di bagian atas layar untuk memberi tahu pengguna di mana mereka berada dalam aplikasi. Di bagian MainActivity atas kelas, ubah ke Phone Word seperti yang ditunjukkan Label di sini:

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

Sekarang saatnya untuk mengatur ikon aplikasi. Secara default, Visual Studio untuk Mac akan menyediakan ikon default untuk proyek. Hapus file-file ini dari solusi, dan ganti dengan ikon yang berbeda. Perluas folder Sumber Daya di Solution Pad. Perhatikan bahwa ada lima folder yang diawali dengan mipmap-, dan bahwa masing-masing folder ini berisi satu file Icon.png :

Anda perlu menghapus masing-masing file ikon ini dari proyek. Klik kanan pada setiap file Icon.png , dan pilih Hapus dari menu konteks:

Klik tombol Hapus dalam dialog.

Selanjutnya, unduh dan unzip set Ikon Aplikasi Xamarin. File zip ini menyimpan ikon untuk aplikasi. Setiap ikon secara visual identik tetapi pada resolusi yang berbeda dirender dengan benar pada perangkat yang berbeda dengan kepadatan layar yang berbeda. Kumpulan file harus disalin ke dalam proyek Xamarin.Android. Di Visual Studio untuk Mac, di Pad Solusi, klik kanan folder mipmap-hdpi dan pilih Tambahkan > File:

Dari dialog pemilihan, navigasikan ke direktori Ikon Xamarin AdApp yang tidak di-zip dan buka folder mipmap-hdpi . Pilih Icon.png dan klik Buka.

Dalam kotak dialog Tambahkan File ke Folder , pilih Salin file ke direktori dan klik OK:

Ulangi langkah-langkah ini untuk setiap folder mipmap- hingga konten folder mipmap- Xamarin App Icons disalin ke folder mipmap- rekan mereka di proyek Telepon word.

Setelah semua ikon disalin ke proyek Xamarin.Android, buka dialog Opsi Proyek dengan mengklik kanan proyek di Solution Pad. Pilih Bangun > Aplikasi Android dan pilih @mipmap/icon dari kotak kombo ikon Aplikasi:

Menjalankan aplikasi

Terakhir, uji aplikasi dengan menjalankannya di perangkat Android atau emulator dan terjemahkan Telepon word:

Untuk menjalankan aplikasi di perangkat Android, lihat cara menyiapkan perangkat Anda untuk pengembangan.

Selamat atas penyelesaian aplikasi Xamarin.Android pertama Anda! Sekarang saatnya untuk membedah alat dan keterampilan yang baru saja Anda pelajari. Selanjutnya adalah Hello, Android Deep Dive.

Halo, Android: Mulai cepat

Persyaratan Windows

persyaratan macOS

Mengonfigurasi emulator

Membuat proyek

Membuat tata letak

Menulis beberapa kode

Menyambungkan antarmuka pengguna

Mengatur nama aplikasi

Menjalankan aplikasi

Membuat tata letak

Menulis beberapa kode

Menyambungkan antarmuka pengguna

Mengatur label dan ikon aplikasi

Menjalankan aplikasi

Tautan terkait

Sumber Daya Tambahan: