Menggunakan Xamarin.Android Designer

Artikel ini adalah panduan Xamarin.Android Designer. Ini menunjukkan cara membuat antarmuka pengguna untuk aplikasi browser warna kecil; antarmuka pengguna ini dibuat sepenuhnya di Perancang.

Gambaran Umum

Antarmuka pengguna Android dapat dibuat secara deklaratif dengan menggunakan file XML atau secara terprogram dengan menulis kode. Xamarin.Android Designer memungkinkan pengembang untuk membuat dan memodifikasi tata letak deklaratif secara visual, tanpa memerlukan pengeditan tangan file XML. Perancang juga memberikan umpan balik real time yang memungkinkan pengembang mengevaluasi perubahan UI tanpa harus menyebarkan ulang aplikasi ke perangkat atau ke emulator. Fitur Desainer ini dapat mempercepat pengembangan UI Android dengan sangat baik. Artikel ini menunjukkan cara menggunakan Xamarin.Android Designer untuk membuat antarmuka pengguna secara visual.

Tip

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

File .axml dan .xml didukung di Android Designer.

Panduan

Tujuan dari panduan ini adalah untuk menggunakan Android Designer untuk membuat antarmuka pengguna untuk contoh aplikasi browser warna. Aplikasi browser warna menyajikan daftar warna, namanya, dan nilai RGB-nya. Anda akan mempelajari cara menambahkan widget ke Permukaan Desain serta cara menata widget ini secara visual. Setelah itu, Anda akan mempelajari cara memodifikasi widget secara interaktif di Permukaan Desain atau dengan menggunakan panel Properti Desainer. Terakhir, Anda akan melihat tampilan desain saat aplikasi berjalan di perangkat atau emulator.

Visual Studio

Membuat produk baru

Langkah pertama adalah membuat proyek Xamarin.Android baru. Luncurkan Visual Studio, klik Proyek Baru..., dan pilih templat Aplikasi Android Visual C# > Android > (Xamarin). Beri nama aplikasi baru DesignerWalkthrough dan klik OK.

Dalam dialog Aplikasi Android Baru, pilih Aplikasi Kosong dan klik OK:

Menambahkan tata letak

Langkah selanjutnya adalah membuat LinearLayout yang akan menyimpan elemen antarmuka pengguna. Klik kanan Sumber Daya/tata letak di Penjelajah Solusi dan pilih Tambahkan > Item Baru.... Dalam dialog Tambahkan Item Baru, pilih Tata Letak Android. Beri nama file list_item dan klik Tambahkan:

Tata letak list_item baru ditampilkan di Perancang. Perhatikan bahwa dua panel ditampilkan – Permukaan Desain untuk list_item terlihat di panel kiri saat sumber XML-nya ditampilkan di panel kanan. Anda bisa menukar posisi panel Permukaan Desain dan Sumber dengan mengklik ikon Tukar Panel yang terletak di antara dua panel:

Dari menu Tampilan, klik Kerangka Dokumen Windows > Lainnya untuk membuka Kerangka Dokumen. Kerangka Dokumen menunjukkan bahwa tata letak saat ini berisi satu widget LinearLayout:

Langkah selanjutnya adalah membuat antarmuka pengguna untuk aplikasi browser warna dalam ini LinearLayout.

Membuat antarmuka pengguna Item Daftar

Jika panel Kotak Alat tidak ditampilkan, klik tab Kotak Alat di sebelah kiri. Di Kotak Alat, gulir ke bawah ke bagian Gambar & Media dan gulir ke bawah lebih lanjut hingga Anda menemukan ImageView:

Secara bergantian, Anda dapat memasukkan ImageView ke bilah pencarian untuk menemukan ImageView:

Seret ini ImageView ke Permukaan Desain (ini ImageView akan digunakan untuk menampilkan swatch warna di aplikasi browser warna):

Selanjutnya, seret LinearLayout (Vertical) widget dari Kotak Alat ke Perancang. Perhatikan bahwa kerangka biru menunjukkan batas-batas yang ditambahkan LinearLayout. Kerangka Dokumen menunjukkan bahwa ini adalah anak dari LinearLayout, yang terletak di bawah imageView1 (ImageView):

Saat Anda memilih ImageView di Perancang, kerangka biru bergerak untuk mengelilingi ImageView. Selain itu, pilihan berpindah ke imageView1 (ImageView)dalam Kerangka Dokumen:

Selanjutnya, seret Text (Large) widget dari Kotak Alat ke dalam yang baru ditambahkan LinearLayout. Perhatikan bahwa Perancang menggunakan sorotan hijau untuk menunjukkan di mana widget baru akan dimasukkan:

Selanjutnya, tambahkan Text (Small) widget di bawah Text (Large) widget:

Pada titik ini, permukaan Perancang harus menyerupai cuplikan layar berikut:

Jika dua textView widget tidak berada di dalam linearLayout1, Anda dapat menyeretnya ke linearLayout1 dalam Kerangka Dokumen dan memosisikannya sehingga muncul seperti yang ditunjukkan pada cuplikan layar sebelumnya (diindentasi di bawah linearLayout1).

Mengatur antarmuka pengguna

Langkah selanjutnya adalah memodifikasi UI untuk menampilkan ImageView di sebelah kiri, dengan dua TextView widget yang ditumpuk di sebelah kanan ImageView.

1. Pilih ImageView.

2. Di jendela Properti, masukkan lebar di kotak pencarian dan temukan Lebar Tata Letak.

3. Ubah pengaturan Lebar Tata Letak menjadi wrap_content:

Cara lain untuk mengubah Width pengaturan adalah dengan mengklik segitiga di sisi kanan widget untuk mengalihkan pengaturan lebarnya ke wrap_content:

Mengklik segitiga kembali mengembalikan Width pengaturan ke match_parent. Selanjutnya, buka panel Kerangka Dokumen dan pilih akar LinearLayout:

Dengan akar LinearLayout dipilih, kembali ke panel Properti , masukkan orientasi ke dalam kotak pencarian dan temukan pengaturan Orientasi . Ubah Orientasi menjadi horizontal:

Pada titik ini, permukaan Perancang harus menyerupai cuplikan layar berikut. Perhatikan bahwa TextView widget telah dipindahkan ke sebelah kanan ImageView:

Mengubah penspasian

Langkah selanjutnya adalah memodifikasi pengaturan padding dan margin di UI untuk memberikan lebih banyak ruang di antara widget. Pilih pada ImageView permukaan Desain. Di panel Properti , masukkan min di kotak pencarian. Masukkan 70dp untuk Tinggi Min dan 50dp untuk Lebar Min:

Di panel Properti , masukkan padding di kotak pencarian dan masukkan 10dp untuk Padding. Pengaturan , dan paddingminWidth ini minHeightmenambahkan padding di semua sisi dan memanjangkannya ImageView secara vertikal. Perhatikan bahwa XML tata letak berubah saat Anda memasukkan nilai-nilai ini:

Pengaturan padding bawah, kiri, kanan, dan atas dapat diatur secara independen dengan memasukkan nilai ke bidang Padding Bottom, Padding Left, Padding Right, dan Padding Top . Misalnya, atur bidang Padding Left ke 5dp dan bidang Padding Bawah, Padding Kanan, dan Padding Atas ke 10dp:

Selanjutnya, sesuaikan posisi LinearLayout widget yang berisi dua TextView widget. Di Kerangka Dokumen, pilih linearLayout1. Di jendela Properti , masukkan margin di kotak pencarian. Atur Margin Tata Letak Bawah, Margin Tata Letak Kiri, dan Margin Tata Letak Atas ke 5dp. Atur Margin Tata Letak Kanan ke 0dp:

Menghapus gambar default

ImageView Karena sedang digunakan untuk menampilkan warna (bukan gambar), langkah selanjutnya adalah menghapus sumber gambar default yang ditambahkan oleh templat.

1. Pilih pada ImageView Permukaan Perancang.

2. Di Properti, masukkan src di kotak pencarian.

3. Klik persegi kecil di sebelah kanan pengaturan properti Src dan pilih Reset:

Ini menghapus android:src="@android:drawable/ic_menu_gallery" dari XML sumber untuk itu ImageView.

Menambahkan kontainer ListView

Sekarang setelah tata letak list_item ditentukan, langkah selanjutnya adalah menambahkan ListView ke tata letak Utama. Ini ListView akan berisi daftar list_item.

Di Penjelajah Solusi, buka Sumber Daya/tata letak/activity_main.axml. Di Kotak Alat, temukan ListView widget dan seret ke Permukaan Desain. ListView di Perancang akan kosong kecuali untuk garis biru yang menguraikan batasnya saat dipilih. Anda bisa melihat Kerangka Dokumen untuk memverifikasi bahwa ListView telah ditambahkan dengan benar:

Secara default, ListView diberikan Id nilai @+id/listView1. Saat listView1 masih dipilih di Kerangka Dokumen, buka panel Properti , klik Susun menurut, dan pilih Kategori. Buka Utama, temukan properti Id , dan ubah nilainya menjadi @+id/myListView:

Pada titik ini, antarmuka pengguna siap digunakan.

Menjalankan aplikasi

Buka MainActivity.cs dan ganti kodenya dengan yang berikut:

using Android.App;
using Android.Widget;
using Android.Views;
using Android.OS;
using Android.Support.V7.App;
using System.Collections.Generic;

namespace DesignerWalkthrough
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        List<ColorItem> colorItems = new List<ColorItem>();
        ListView listView;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);
            listView = FindViewById<ListView>(Resource.Id.myListView);

            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.DarkRed,
                ColorName = "Dark Red",
                Code = "8B0000"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.SlateBlue,
                ColorName = "Slate Blue",
                Code = "6A5ACD"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.ForestGreen,
                ColorName = "Forest Green",
                Code = "228B22"
            });

            listView.Adapter = new ColorAdapter(this, colorItems);
        }
    }

    public class ColorAdapter : BaseAdapter<ColorItem>
    {
        List<ColorItem> items;
        Activity context;
        public ColorAdapter(Activity context, List<ColorItem> items)
            : base()
        {
            this.context = context;
            this.items = items;
        }
        public override long GetItemId(int position)
        {
            return position;
        }
        public override ColorItem this[int position]
        {
            get { return items[position]; }
        }
        public override int Count
        {
            get { return items.Count; }
        }
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var item = items[position];

            View view = convertView;
            if (view == null) // no view to re-use, create new
                view = context.LayoutInflater.Inflate(Resource.Layout.list_item, null);
            view.FindViewById<TextView>(Resource.Id.textView1).Text = item.ColorName;
            view.FindViewById<TextView>(Resource.Id.textView2).Text = item.Code;
            view.FindViewById<ImageView>(Resource.Id.imageView1).SetBackgroundColor(item.Color);

            return view;
        }
    }

    public class ColorItem
    {
        public string ColorName { get; set; }
        public string Code { get; set; }
        public Android.Graphics.Color Color { get; set; }
    }
}

Kode ini menggunakan adaptor kustom ListView untuk memuat informasi warna dan untuk menampilkan data ini di UI yang baru saja dibuat. Agar contoh ini tetap pendek, informasi warna dikodekan secara permanen dalam daftar, tetapi adaptor dapat dimodifikasi untuk mengekstrak informasi warna dari sumber data atau untuk menghitungnya dengan cepat. Untuk informasi selengkapnya tentang ListView adaptor, lihat ListView.

Membuat dan menjalankan aplikasi. Cuplikan layar berikut adalah contoh bagaimana aplikasi muncul saat berjalan di perangkat:

Visual Studio untuk Mac

Membuat produk baru

Langkah pertama adalah membuat proyek Xamarin.Android baru.

Luncurkan Visual Studio untuk Mac dan klik Proyek Baru.... Pilih templat Aplikasi Android dan klik Berikutnya:

Beri nama aplikasi baru DesignerWalkthrough. Di bawah Platform Target, pilih Terbaru dan Terbesar dan klik Berikutnya:

Di layar dialog berikutnya, klik Buat.

Menambahkan tata letak

Langkah selanjutnya adalah membuat LinearLayout yang akan menyimpan elemen antarmuka pengguna.

Di Visual Studio untuk Mac, klik kanan Sumber Daya/tata letak di pad Solusi dan pilih Tambahkan > File Baru.... Dalam dialog File Baru, pilih Tata Letak Android>. Beri nama file list_item dan klik Baru:

Setelah file ini ditambahkan, tata letak list_item baru ditampilkan di Permukaan Desain (jika Anda melihat pesan, Proyek ini berisi sumber daya yang tidak berhasil dikompilasi, penyajian mungkin terpengaruh, klik Bangun > Bangun Semua untuk membangun proyek):

Klik tab Sumber di bagian bawah Perancang untuk menampilkan sumber XML untuk tata letak ini. Saat Anda mengklik tab Kerangka Dokumen di sebelah kanan, ini menunjukkan bahwa tata letak saat ini berisi satu widget LinearLayout :

Langkah selanjutnya adalah membuat antarmuka pengguna untuk aplikasi browser warna.

Membuat antarmuka pengguna Item Daftar

Klik tab Perancang di bagian bawah layar untuk kembali ke Permukaan Perancang. Di panel Kotak Alat di sebelah kanan, gulir ke bawah ke bagian Gambar & Media dan temukan ImageView:

Secara bergantian, Anda dapat memasukkan ImageView ke bilah pencarian untuk menemukan ImageView:

Seret ini ImageView ke Permukaan Desain (ini ImageView akan digunakan untuk menampilkan swatch warna di aplikasi browser warna):

Selanjutnya, seret LinearLayout (Vertical) widget dari Kotak Alat ke Permukaan Desain. Perhatikan bahwa kerangka biru menunjukkan batas-batas yang ditambahkan LinearLayout. Kerangka Dokumen menunjukkan bahwa ini adalah anak dari LinearLayout, yang terletak di bawah imageView1 (ImageView)ini :

Saat Anda memilih ImageView di Perancang, kerangka biru bergerak untuk mengelilingi ImageView. Selain itu, pilihan berpindah ke imageView1 (ImageView)dalam Kerangka Dokumen:

Selanjutnya, seret Text (Large) widget dari Kotak Alat ke dalam yang baru ditambahkan LinearLayout. Perhatikan bahwa saat Anda menyeret mouse ke Permukaan Desain, itu menyoroti di mana widget baru akan dimasukkan. Widget Text (Large) harus terletak di dalam linearLayout1 seperti yang terlihat di sini:

Selanjutnya, tambahkan Text (Small) widget di Text (Large) bawah widget. Pada titik ini, Permukaan Desain harus menyerupai cuplikan layar berikut:

Jika dua textView widget tidak berada di dalam linearLayout1, Anda dapat menyeretnya ke linearLayout1 dalam Kerangka Dokumen dan memosisikannya sehingga muncul seperti yang ditunjukkan pada cuplikan layar sebelumnya (diindentasi di bawah linearLayout1).

Mengatur antarmuka pengguna

Langkah selanjutnya adalah memodifikasi UI untuk menampilkan ImageView di sebelah kiri, dengan dua TextView widget yang ditumpuk di sebelah kanan ImageView.

1. Dengan yang ImageView dipilih, klik tab Properti .

2. Tepat di bawah tab Properti , klik Tata Letak.

3. Gulir ke bawah ke ViewGroup dan ubah pengaturan menjadi Widthwrap_content:

Cara lain untuk mengubah Width pengaturan adalah dengan mengklik segitiga di sisi kanan widget untuk mengalihkan pengaturan lebarnya ke wrap_content:

Mengklik segitiga kembali mengembalikan Width pengaturan ke match_parent. Selanjutnya, buka panel Kerangka Dokumen dan pilih akar LinearLayout:

Dengan akar LinearLayout dipilih, kembali ke tab Properti dan klik Widget. Ubah pengaturan menjadi horizontal seperti yang Orientation ditunjukkan di bawah ini. Pada titik ini, Permukaan Desain harus menyerupai cuplikan layar berikut. Perhatikan bahwa TextView widget telah dipindahkan ke sebelah kanan ImageView:

Mengubah penspasian

Langkah selanjutnya adalah memodifikasi pengaturan padding dan margin di UI untuk memberikan lebih banyak ruang di antara widget. Pilih dan ImageView klik tab Tata Letak di bawah Properti. Ubah ke 50dp, ke 70dpMin Height , dan menjadi Padding10dp.Min Width Ini berlaku padding di semua sisi dan memanjangkannya ImageView secara vertikal:

Pengaturan padding atas, kanan, bawah, dan kiri dapat diatur secara independen dengan memasukkan nilai ke dalam Topbidang , , RightBottom, dan Left padding, masing-masing. Misalnya, atur Left nilai padding ke 5dp dan Topnilai padding , , Rightdan Bottom ke 10dp. Perhatikan bahwa Padding pengaturan berubah menjadi daftar nilai-nilai ini yang dipisahkan koma:

Selanjutnya, sesuaikan posisi LinearLayout widget yang berisi dua TextView widget. Di Kerangka Dokumen, pilih linearLayout1. Di panel Properti, pilih tab Tata Letak. Gulir ke bawah ke bagian Grup Tampilan dan atur Leftmargin , , TopRight, dan Bottom ke 5dp, 5dp, 0dp, dan 5dp masing-masing:

Menghapus gambar default

ImageView Karena sedang digunakan untuk menampilkan warna (bukan gambar), langkah selanjutnya adalah menghapus sumber gambar default yang ditambahkan oleh templat.

1. Pilih ImageView.

2. Klik tab Widget di bawah Properti.

3. Kosongkan Src pengaturan sehingga kosong:

Ini menghapus android:src="@android:drawable/ic_menu_gallery" dari XML sumber untuk itu ImageView.

Menambahkan kontainer ListView

Sekarang setelah tata letak list_item ditentukan, langkah selanjutnya adalah menambahkan ListView ke tata letak Utama. Ini ListView akan berisi daftar list_item.

Di Penjelajah Solusi, buka Sumber Daya/tata letak/Main.axml. Button Klik widget (jika ada) dan hapus. Di Kotak Alat, temukan ListView widget dan seret ke Permukaan Desain. ListView di Perancang akan kosong kecuali untuk garis biru yang menguraikan batasnya saat dipilih. Anda bisa melihat Kerangka Dokumen untuk memverifikasi bahwa ListView telah ditambahkan dengan benar:

Secara default, ListView diberikan Id nilai @+id/listView1. Saat listView1 masih dipilih di Kerangka Dokumen, buka panel Properti , klik Susun menurut, dan pilih Kategori. Buka Utama, temukan properti Id , dan ubah nilainya menjadi @+id/myListView:

Pada titik ini, antarmuka pengguna siap digunakan.

Menjalankan aplikasi

Buka MainActivity.cs dan ganti kodenya dengan yang berikut:

using Android.App;
using Android.Widget;
using Android.Views;
using Android.OS;
using System.Collections.Generic;

namespace DesignerWalkthrough
{
    [Activity(Label = "@string/app_name", MainLauncher = true)]
    public class MainActivity : Activity
    {
        List<ColorItem> colorItems = new List<ColorItem>();
        ListView listView;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
            listView = FindViewById<ListView>(Resource.Id.myListView);

            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.DarkRed,
                ColorName = "Dark Red",
                Code = "8B0000"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.SlateBlue,
                ColorName = "Slate Blue",
                Code = "6A5ACD"
            });
            colorItems.Add(new ColorItem()
            {
                Color = Android.Graphics.Color.ForestGreen,
                ColorName = "Forest Green",
                Code = "228B22"
            });

            listView.Adapter = new ColorAdapter(this, colorItems);
        }
    }

    public class ColorAdapter : BaseAdapter<ColorItem>
    {
        List<ColorItem> items;
        Activity context;
        public ColorAdapter(Activity context, List<ColorItem> items)
            : base()
        {
            this.context = context;
            this.items = items;
        }
        public override long GetItemId(int position)
        {
            return position;
        }
        public override ColorItem this[int position]
        {
            get { return items[position]; }
        }
        public override int Count
        {
            get { return items.Count; }
        }
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var item = items[position];

            View view = convertView;
            if (view == null) // no view to re-use, create new
                view = context.LayoutInflater.Inflate(Resource.Layout.list_item, null);
            view.FindViewById<TextView>(Resource.Id.textView1).Text = item.ColorName;
            view.FindViewById<TextView>(Resource.Id.textView2).Text = item.Code;
            view.FindViewById<ImageView>(Resource.Id.imageView1).SetBackgroundColor(item.Color);

            return view;
        }
    }

    public class ColorItem
    {
        public string ColorName { get; set; }
        public string Code { get; set; }
        public Android.Graphics.Color Color { get; set; }
    }
}

Kode ini menggunakan adaptor kustom ListView untuk memuat informasi warna dan untuk menampilkan data ini di UI yang baru saja dibuat. Agar contoh ini tetap pendek, informasi warna dikodekan secara permanen dalam daftar, tetapi adaptor dapat dimodifikasi untuk mengekstrak informasi warna dari sumber data atau untuk menghitungnya dengan cepat. Untuk informasi selengkapnya tentang ListView adaptor, lihat ListView.

Membuat dan menjalankan aplikasi. Cuplikan layar berikut adalah contoh bagaimana aplikasi muncul saat berjalan di perangkat:

Ringkasan

Artikel ini menjelaskan proses penggunaan Xamarin.Android Designer di Visual Studio untuk membuat antarmuka pengguna untuk aplikasi dasar. Ini menunjukkan cara membuat antarmuka untuk satu item dalam daftar, dan menggambarkan cara menambahkan widget dan meletakkannya secara visual. Ini juga menjelaskan cara menetapkan sumber daya dan kemudian mengatur berbagai properti pada widget tersebut.