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:
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.
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.
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.
6. Pilih ‘Release’ pada solution configuration.
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.
Erick Kurniawan 