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

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