[Xamarin iOS] Understanding Navigation

Xamarin iOS Navigation

Salah satu tantangan dalam pengembangan aplikasi mobile adalah ukuran screen yang terbatas sehingga memaksa developer untuk berpikir keras untuk menampilkan konten aplikasinya dalam beberapa screen dengan navigasi yang tepat. Pada bahasan kali ini kita akan mempelajari navigasi pada iOS yang melibatkan lebih dari satu screen.

UINavigationController

Silahkan buka Main.storyboard dan tambahkan UINavigationController pada storyboard anda.

UINavigationController adalah controller yang mengelola navigasi dari hirarki konten. Jika anda menambahkan UINavigationController pada storyboard anda, maka akan muncul dua Controller yang terdiri dari UINavigationController dan sebuah Controller yang terhubung ke UINavigationController oleh sebuah garis yang disebut seague. Pada gambar di atas UINavigationController terhubung dengan UITableViewController sedangkan yang akan kita buat UINavigationController akan terhubung dengan UIViewController.

Menghubungkan UINavigationController dengan Controller

Karena kita ingin menghubungkan UINavigationController dengan UIViewController, hapus UITableViewController yang ada pada storyboard. Bagaimana cara menghapusnya? Click pada kotak berwarna putih pada bagian bawah controller, kemudian tekan tombol “delete” pada keyboard. Tambahkan UIViewController baru pada storyboard, beri identitas pada Class dengan nama “WelcomeController”. Setelah diberikan identitas maka project secara otomatis membuat class “WelcomeController”. Hubungkan UINavigationController dengan seague ke WelcomeController dengan menekan “Ctrl”+drag dari UINavagationController ke WelcomeController, berikan Relationship “Root” pada keterangan relation. Pindahkan default controller dari “ViewController” ke “UINavigationController” yang baru kita buat.

(Catatan : jika anda mengalami kesulitan membuat seague pada Xamarin Studio, lakukan dengan menggunakan Xcode Interface Builder. Lakukan secondary click pada file storyboard pilih “Open With” kemudian pilih Xcode Interface Builder)

Tambahkan sebuah UIButton pada WelcomeController seperti gambar diatas dan berikan UIButton identitas nama “Btn_nav”. UINavigationController dan WelcomeController sudah terhubung, hubungkan juga “ViewController” dari “WelcomeController. Anda tidak bisa menghubungkan controller dari WelcomeController ke ViewController layaknya dari UINavigationController. Anda harus memilih UIButton pada “WelcomeController” terlebih dahulu kemudian lakukan “Ctrl” + drag ke ViewController, pilih Action Seague “Show”.

Ketika aplikasi dijalankan akan muncul pada halaman utama seperti berikut : 

Jika anda menekan tombol “Go To Dashboard”, akan muncul halaman berikut :

Pada contoh diatas perubahan halaman akan terjadi dengan action seague “Show”. Pada Xamarin anda dapat memilih beberapa jenis action seague, untuk merubah jenis seague silahkan click pada garis seague pada storyboard dan pada boks property akan muncul pilhan  seperti berikut :

Setiap jenis seagues memiliki perlakuan berbeda-beda ketika menjalankan proses transisi navigasi. Berikut kegunaan masing-masing seagues :

• Show : menampilkan screen baru pada aplikasi.
• Show Detail : digunakan pada aplikasi yang menampilkan master detail view yang biasanya aplikasi ditampilkan dalam dua frame view, frame master dan detail. Ketika proses transisi terjadi, maka aplikasi hanya akan merubah tampilan pada frame detail.
• Present Modally : menampilkan halaman penuh dan menyediakan pilhan untuk mengatur jenis transisi halaman.
• Present As Popover : pilihan ini akan menampilkan konten dalam bentuk popover.

Silahkan langsung mencoba menggunakan berbagai macam seagues.

Parameter

Penggunaan parameter adalah suatu hal yang sering dilakukan dalam proses transisi halaman. Dengan menggunakan aplikasi yang telah kita buat sebelumnya, kita akan mencoba menerapkan penggunaan parameter. Pada ViewController, tambahkan sebuah label dengan nama “Txt_param”

Pada class ViewController masukkan code berikut :

 //definisikan variabel public dengan nama “Param1”
 public string Param1; 

 public override void ViewDidLoad()
 {
    base.ViewDidLoad();
    //tambahkan code ini agar text diambil dari variabel Param1
    this.Txt_param.Text = Param1;
    this.Txt_Name.EditingChanged += (sender, ea) =>{
        this.Label_count.Text = "Count of character : " + ((UITextField)sender).Text.Length;
    }; 
 }

Pada class WelcomeController, tambahkan code berikut :

 public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender)
 {
    base.PrepareForSegue(segue, sender);
    var viewContoller = segue.DestinationViewController as ViewController;
    if (viewContoller != null)
    {
       viewContoller.Param1 = "I love you";
    }
 }

Code di atas memerintahkan program menjalankan suatu proses ketika proses transisi halaman akan dilakukan. Perintah yang dilakuakn adalah melakukan set nilai “Param1” dengan suatu string yang diinginkan.

Gambar diatas adalah tampilan screen setelah kita lakukan modifikasi pada code. Happy coding..