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

Advertisements

About Erick Kurniawan

IT Trainer, Consultant, & Microsoft Azure MVP Actual Training (http://actual-training.com)
This entry was posted in Cross Platform Mobile Development, Xamarin Forms and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s