Xamarin Forms: Menampilkan data pada ListView (Part 1)

Pada tutorial kali ini saya akan membahas bagaimana menggunakan kontrol ListView pada Xamarin Forms. ListView adalah salah satu kontrol yang banyak digunakan untuk menampilkan data pada layar ponsel yang memiliki keterbatasan ukuran. Untuk menampilkan data dari sumber data kedalam view/kontrol maka digunakan mekanisme data binding.

Binding Data yang bertipe List Of String

Mekanisme binding umum digunakan pada Xamarin Form. Binding adalah mengaitkan data yang ada pada data source (sumber data) ke kontrol tertentu. Ada dua macam jenis binding yaitu one-way binding dan two-way binding. One-way binding digunakan hanya untuk menampilkan data saja, sedangkan two-way binding digunakan untuk menampilkan dan mengedit data.

Latihan Menampilkan Data bertipe List Of String

1. Buat Xamarin Cross Platform Portable solution dengan nama Modul3. Kemudian pada project Portable tambahkan halaman xaml baru (Form Xaml Page) dengan nama BindingListString.xaml.

image

2. Kemudian tambahkan kode berikut:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Modul3.BindingListString">
  <ListView x:Name="listView" />
</ContentPage>

3. Pada file BindingListString.xaml.cs tambahkan kode C# berikut untuk menampilkan data berupa objek List kedalam kontrol ListView.

public BindingListString()
{
InitializeComponent();
List<string> items = new List<string> { "First", "Second", "Third" };
       listView.ItemsSource = items;
}

4. Anda juga dapat mengambil informasi data/item yang dipilih pada ListView, caranya adalah dengan menambahkan event handler ‘ItemTapped’ kedalam ListView.

        public BindingListString()
        {
            InitializeComponent();
            List<string> items = new List<string> { "First", "Second", "Third" };
            listView.ItemsSource = items;

            //untuk mengambil nilai item ketika diklik pada baris
            listView.ItemTapped += async (sender, e) =>
            {
                 await DisplayAlert("Tapped", e.Item.ToString() + " was selected", "OK");
                 ((ListView)sender).SelectedItem = null;
            };
        }

5. Setelah itu masuk ke halaman App.xaml.cs dan ubah kode program berikut di bagian constructor seperti berikut :

        public App()
        {
            InitializeComponent();
            MainPage = new Modul3.BindingListString();
        }

6. Tekan F5 untuk menjalankan program pada emulator, hasilnya dapat dilihat pada gambar dibawah ini:

image

Cara membuat Android apk pada Xamarin Forms

Pada blog yang sebelumnya saya pernah menjelaskan bagaimana cara untuk membuat Android apk file pada Xamarin Forms. Namun sejak update package Xamarin Forms baru pada bulan November, terjadi perubahan metode pembuatannya. maka dari itu pada blog ini saya akan mencoba membahas pembuatan Android apk file dengan cara yang baru.

1. Klik kanan pada project Android, kemudian pilih Archive.

image

2. Setelah langkah ini dikerjakan maka Visual Studio akan menyiapkan semua file yang nanti akan dikompilasi menjadi file .apk.

image

image

3. Setelah selesai pilih tombol Distribute untuk mendistribusikan .apk yang akan dibuat. Ada dua pilihan yaitu Ad Hoc dan Google Play. Pilih Ad Hoc untuk mendistribusikan .apk tanpa melalui google play.

image

6. Anda akan diminta untuk membuat sertifikat Android Keystore, masukan data yang dibutuhkan seperti gambar dibawah ini, kemudian tekan tombol Create.

image

7. Setelah proses signing identity pada aplikasi yang kita buat, pilih tombol Save As.

image

8. Beri nama .apk tersebut, misalnya modul2.modul2

image

9. Anda akan diminta untuk memasukan password yang sebelumnya sudah anda buat ketika membuat Android Keystore.

image

10. Anda dapat melihat bahwa kita sudah berhasil membuat file .apk yang siap untuk didistribusikan.

image

UI (User Interface pada Xamarin Forms) Part 3

Pada blog tutorial sebelumnya saya sudah membahas tentang absolute layout dan relative layout. Pada blog kali ini saya akan membahas penggunaan GridLayout dan pembuatan studi kasus sederhana dengan layout.

Menggunakan GridLayout

Dengan menggunakan GridLayout, kita dapat memposisikan view berdasarkan alamat row dan kolom sama seperti ketika kita menggunakan spreadsheet di Microsoft Excel atau html table.

1. Pada project portable, tambahkan xaml page baru dengan nama GridLayout.xaml. kemudian tambahkan kode xaml berikut:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Latihan2.GridLayout">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
    <Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
    <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
    <Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
  </Grid>
</ContentPage>

2. Pada file App.xaml.cs tambahkan kode berikut untuk menjalankan halaman ini pada saat program pertama kali dijalankan.

        public App()
        {
            InitializeComponent();
            MainPage = new GridLayout();
        }

3. Hasilnya akan dapat dilihat pada gambar berikut:

image

Membuat Kalkulator Sederhana

1. Pada project Modul2 yang sudah anda buat sebelumnya, klik kanan pada portable project – Add – New Item – pilih Forms Xaml Page – beri nama KalkulatorPage.xaml.

image

2. Kemudian tambahkan desain xaml berikut pada halaman KalkulatorPage.xaml.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Latihan2.KalkulatorPage">
  <StackLayout Orientation="Vertical">
    <Label Text="Masukan Bilangan 1 :" FontSize="Medium" />
    <Entry x:Name="entryBil1" Placeholder="masukan bilangan 1" Keyboard="Numeric" />
    <Label Text="Masukan Bilangan 2 :" FontSize="Medium" />
    <Entry x:Name="entryBil2" Placeholder="masukan bilangan 2" Keyboard="Numeric" />
    <Label Text="Hasil :" FontSize="Medium" />
    <Entry x:Name="entryHasil" IsEnabled="false" />
    <StackLayout Orientation="Horizontal">
      <Button x:Name="btnTambah" Text="Tambah" />
      <Button x:Name="btnKurang" Text="Kurang" />
      <Button x:Name="btnKali" Text="Kali" />
      <Button x:Name="btnBagi" Text="Bagi" />
    </StackLayout>
  </StackLayout>
</ContentPage>

2. Tambahkan juga kode program C# pada file KalkulatorPage.xaml.cs.

public partial class KalkulatorPage : ContentPage
    {
        public KalkulatorPage()
        {
            InitializeComponent();

            btnTambah.Clicked += Btn_Clicked;
            btnKurang.Clicked += Btn_Clicked;
            btnKali.Clicked += Btn_Clicked;
            btnBagi.Clicked += Btn_Clicked;
        }

        private void Btn_Clicked(object sender, EventArgs e)
        {
            double hasil = 0;
            var myBtn = (Button)sender;
            switch(myBtn.Text)
            {
                case "Tambah":
                    hasil = Convert.ToDouble(entryBil1.Text) + Convert.ToDouble(entryBil2.Text);
                    break;
                case "Kurang":
                    hasil = Convert.ToDouble(entryBil1.Text) - Convert.ToDouble(entryBil2.Text);
                    break;
                case "Kali":
                    hasil = Convert.ToDouble(entryBil1.Text) * Convert.ToDouble(entryBil2.Text);
                    break;
                case "Bagi":
                    hasil = Convert.ToDouble(entryBil1.Text) / Convert.ToDouble(entryBil2.Text);
                    break;
            }
            entryHasil.Text = hasil.ToString();
        }
    }

3. Jalankan program diatas pada emulator dengan menekan tombol Ctrl+F5. Hasil dari program diatas dapat dilihat pada gambar berikut.

image

4. Untuk membuat file .apk yang akan anda upload maka anda dapat mengikuti langkah sebagai berikut:

5. Klik kanan pada project Droid, kemudian pilih Android Manifest, kemudian lengkapi informasi dari aplikasi anda.

image

6. Pilih ‘Release’ pada solution configuration.

image

7. Pada tampilan Android Options – Linker – pilih Sdk Assembly Only. Pengaturan ini bertujuan agar hanya file sdk yang diperlukan saja yang akan ditambahkan ke file .apk.

image

UI (User Interface pada Xamarin Forms) Part 2

Pada blog tutorial sebelumnya saya sudah membahas tentang komponen Page dan View pada Xamarin Forms user interface. Pada blog kali ini akan dibahas bagaimana menggunakan absolute layout dan relative layout.

Menggunakan Absolute Layout

1. Pada project portable, tambahkan xaml page baru dengan nama AbsoluteLayout.xaml. kemudian tambahkan kode xaml berikut:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Latihan2.AbsoluteLayout">
  <AbsoluteLayout>
    <Label Text="I'm centered on iPhone 4 but no other device"
        AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap"  />
    <Label Text="I'm bottom center on every device."
        AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
        LineBreakMode="WordWrap"  />
    <BoxView Color="Olive"  AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
  </AbsoluteLayout>
</ContentPage>

2. Pada file App.xaml.cs tambahkan kode berikut untuk menjalankan halaman ini pada saat program pertama kali dijalankan.

        public App()
        {
            InitializeComponent();
            MainPage = new AbsoluteLayout();
        }

3. Hasilnya dapat dilihat pada gambar berikut:

image

 

Menggunakan Relative Layout

RelativeLayout dapat digunakan untuk memposisikan elemen menggunakan automatic scaling pada ukuran layar yang berbeda. Penggunaan layout ini memanfaatkan relasi antar view. Setiap view akan dapat diposisikan terhadap view sebelah/tetangganya.

1. Pada project portable, tambahkan xaml page baru dengan nama RelativeLayout.xaml. kemudian tambahkan kode xaml berikut:

<RelativeLayout>
    <BoxView Color="Red" x:Name="redBox"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=.15,Constant=0}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
    <BoxView Color="Blue"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=Y,Factor=1,Constant=50}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=X,Factor=1,Constant=50}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToView,ElementName=redBox, Property=Width,Factor=.5,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToView,ElementName=redBox, Property=Height,Factor=.5,Constant=0}" />
  </RelativeLayout>

2. Pada file App.xaml.cs tambahkan kode berikut untuk menjalankan halaman ini pada saat program pertama kali dijalankan.

        public App()
        {
            InitializeComponent();
            MainPage = new RelativeLayout();
        }

3. Hasilnya akan dapat dilihat pada gambar berikut:

image