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

UI (User Interface pada Xamarin Forms) Part 1

Ada tiga komponen utama yang membentuk Xamarin Forms UI yaitu:

  • Page: Halaman yang digunakan untuk menampilkan view yang disusun menggunakan layout.
  • Views: komponen kontrol yang ada pada Xamarin Forms seperti Entry, Button, dll.
  • Layout: komponen yang digunakan untuk mengatur posisi views pada halaman.

image

Page

Class Page adalah kontainer utama untuk setiap tampilan pada halaman aplikasi di Xamarin Forms. Class ini diturunkan dari class Xamarin.Forms.VisualElement. Class Page adalah baseclass untuk membuat dari semua class UI pada Xamarin Forms. Berikut adalah beberapa contoh Page yang umum digunakan:

  • ContentPage
  • MasterDetailPage
  • NavigationPage
  • TabbedPage
  • CarouselPage

 

View

View adalah kontrol interaktif yang ada pada Page. Berikut ini adalah jenis-jenis view yang ada pada Xamarin Forms.

  • Basic – fundamental views
    • Label
    • Image
    • Button
    • BoxView
  • List – scrollabe dan selectable list
    • ListView
    • Text Entry – entry input pengguna menggunakan keyboard
    • Entry
    • Editor
  • Selection – pilihan pengguna yang lebih dari satu.
    • Picker
    • DatePicker
    • TimePicker
    • Stepper
    • Slider
    • Switch
  • User Feedback – notifikasi pengguna
    • Activity

Layout

Layout adalah wadah yang digunakan untuk pengaturan posisi kontrol (view, atau layout lain). Ada beberapa macam layout yang didukung oleh Xamarin Form yaitu:

  • StackLayout: mengatur kontrol secara horisontal atau vertikal.
  • AbsoluteLayout: pengaturan posisi berdasarkan letak yang pasti.
  • RelativeLayout: pengaturan posisi kontrol berdasarkan kontrol yang lain.
  • Grid: membuat layout yang terdiri dari kolom dan baris seperti tabel.

Latihan Menggunakan StackLayout

1. Pada portable project Latihan2, tambahkan forms xaml page baru baru dengan nama SampleStackLayout.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.SampleStackLayout">
   <StackLayout>
    <StackLayout Spacing="0">
      <Label Text="Posisi Start atau flush left" HorizontalOptions="Start"/>
      <Label Text="Posisi Center" HorizontalOptions="Center"/>
      <Label Text="Posisi End atau flush right" HorizontalOptions="End"/>
    </StackLayout>
    <StackLayout Spacing="0" Orientation="Horizontal">
      <Label Text="Posisi Start" HorizontalOptions="Start"/>
      <Label Text="Posisi Center" HorizontalOptions="CenterAndExpand"/>
      <Label Text="Posisi End" HorizontalOptions="End"/>
    </StackLayout>
  </StackLayout>
</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 SampleStackLayout();
        }

3. Hasilnya dapat dilihat pada gambar dibawah ini.

image

Seminar Xamarin Forms with Azure Mobile Services

Pada tanggal 19 November – 20 November 2016 telah diadakan Seminar dan Workshop dengan judul Seminar Mobile App and Competition with Visual Studio and Xamarin. Pada acara tersebut saya berkesempatan untuk membawakan workshop dengan topik Xamarin Forms with Azure Mobile Services.

Acara ini berlokasi di Hening Griya, Jalan Limpakuwus Sumbang, Purwokerto. Jumlah peserta pada acara ini kurang lebih 100 orang yang terdiri dari akademisi, mahasiswa, dan kalangan profesional.

Detail acara dapat dilihat pada website eventbrite berikut.

IMG_20161120_105659_HDR

IMG_20161120_105631_HDR

Untuk materi dalam bentuk ppt pada acara tersebut dapat diunduh pada tautan berikut