MIT School Muslimah : Cara Berpindah Halaman – X-Code

Kali ini saya akan sharing tentang cara berpindah halaman, saya akan membuatnya dalam 3 cara yaitu untuk pindah halaman dengan drag drop / langsung dari button ke view tujuan, pindah halaman secara programatikal, dan pindah halaman dengan mengirim data.

langkah pertama buka X-Code dan membuat project baru, kemudian buatlah 3 button, untuk pindah halaman dengan drag drop dari button ke view tujuan, pindah halaman secara programatikal, dan pindah halaman dengan mengirim data. Jangan lupa buat tambahkan elemen text field untuk menuliskan kata yang akan keluar ke layar yang diinginkan (layar tujuan)

Screen Shot 2016-05-10 at 9.28.34 AMScreen Shot 2016-05-21 at 10.59.45 AM

Dan jadilah seperti ini. Jangan lupa connectionnya pilih Action dan Typenya pilih UIButton, dan untuk text field dijadikan var dengan connection Outlet. Layer ini saya namai dengan viewcontroller
Screen Shot 2016-05-21 at 10.59.05 AM

Selanjutnya membuat 3 viewcontroller lagi, dan akan kita hubungkan dengan segue, dalam setiap viewcontroller terdiri dari 1 label dan 1 button untuk tombol kembali. Setiap viewcontroller/layer saya namai berbeda. Saya memberi warna pada label agar lebih mudah membedakannya.

Screen Shot 2016-05-22 at 4.41.23 AM

Pemberian warna bisa langsung lewat Inspector Pane / dikode lewat file brain.
Setelah 3 layer siap, sekarang saya hubungkan mereka dengan segue
1. Pindah halaman langsung tanpa kode dengan drag drop dari button ke view tujuan, disini saya menamai button dengan”Langsung buka” dan view tujuan “langsungbuka”. Caranya select button tekan control lalu drag ke view tujuan dan pilih Action Modal.
modal
hasil :

Screen Shot 2016-05-22 at 10.32.49 AM

Sekarang saya akan mengisi sebuah kalimat pada view tujuan ‘langsungbuka’. Hanya membutuhkan 1 label untuk menampung kalimat itu, setelah membuat label drag label tersebut pada file brain saya namai dengan labela karenan akan dijadikan sebuah var pilih connection outlet dan dengan tipe UILabel.

Selanjutnya saya akan memasukkan kalimanya, caranya panggil nama labelnya dalam func viewDidload dan isikan didalamnya dengan tipe string.
Karena saya suka dengan warna maka saya tambahkan warna pada background label, dan saya akan memberi warna full satu layer. Untuk memberi warna full setiap scene mempunyai view, panggil view dalam viewDidload dan berikan kode seperti gambar dibawah

Screen Shot 2016-05-30 at 2.55.36 AMScreen Shot 2016-05-23 at 12.28.11 AM
dan jangan lupa untuk mendrag button back, agar nanti bisa kembali ke viewController utama. Caranya sama seperti mendrag label diatas, hanya saja connection diganti menjadi Action dan type dengan UIButton .Masukkan text berikut pada func back “self.dismissViewControllerAnimated(true, completion: nil)”

Screen Shot 2016-05-23 at 12.20.27 AM

Nah.. agar tampilan semakin menarik saat dijalankan tambahkan animasi, caranya select seguenya dan klik di Attributes Inspector silahkan memilih animasinya
Screen Shot 2016-05-30 at 11.50.41 AM

2. Pindah halaman secara programatikal, dengan cara select viewcontrller tekan control lalu drag ke view tujuan, view tujuan kedua saya namai ‘dengankode’. Seperti biasa Action Segue adalah Modal

Screen Shot 2016-05-22 at 5.05.57 AM
hasil :

Screen Shot 2016-05-22 at 10.34.36 AM

Layer utama sudah terhubung dengan layer dengankode, sekarang memberikan nama pada segue. Caranya select segue yang akan dinamai lalu select Attributes Inspektor dan berikan nama

Screen Shot 2016-05-30 at 12.11.11 AM

hmmm apakah sudah selesai ??? belum . Kok belum ??. Untuk pindah halaman secara programatikal masih membutuhkan kode kode lain agar bisa berjalan dengan lancar dan mulus saat run.
Drag button “Lewat Kodingan” ke file brain
Screen Shot 2016-05-29 at 11.41.50 PM
jika sudah panggil nama seguenya dengan kode “Self.performSegueWithIdentifire(“lewatkode”, sender: nil)
Screen Shot 2016-05-30 at 2.27.41 AM
Selanjutnya drag label ke file brain dan memasukkan kalimat, caranya sama seperti diatas tapi connectionnya outlet saya namai label2. panggil nama labelnya dalam func viewDidload seperti gambar di bawah, dan saya akan memberi warna full satu layer. Untuk memberi warna full setiap scene mempunyai view, panggil view dalam viewDidloaddan berikan kode seperti gambar dibawah
Screen Shot 2016-05-30 at 2.54.34 AM

Jangan lupa membuat tombol back! dan berikan animasi
3. Pindah halaman dengan mengirim data. Untuk mengirim data akan memalui proses coding, pada pindah halam ini text field akan digunakan. Cara bekerja untuk mengirim data adalah menuliskan sesuatu di text field, lalu tekan button yang sudah dihubungkan dengan view tujuan.

Hubungkan button “Dengan data” ke layar “Dengandata”, setelah segue muncul, saya namai segue dengan “untukdata”, cara menamai segue sama seperti yang kita bahas sebelumnya.Screen Shot 2016-05-21 at 11.50.47 AM

Mari beralih ke layar Dengandata dan mulai mengode, pertama membuat variable kosongan
Screen Shot 2016-05-30 at 10.38.41 AM
hmm untuk apa ini ?? var kata dibuat dengan tujuan untuk menampung / menyimpan kata yang akan dituliskan pada textfield nanti.

setelah membuat var kosongan, seperti sebelumnya drag label pada file brain, dengan connection outlet dan memberinya nama “labelc”. Panggil nama label (labelc) jangan lupa “.text” supaya muncul saat di run, masukkan var kata dalam label. Jangan lupa membuat tombol back.

kata

Kembali ke layer utama..
Lalu mau diapakan text fieldnya ? Agar disimlator kita bisa mengetik apapun di text field, edit seperti ini.
Drag text field ke file brain saya namai dengan “textfield”

Screen Shot 2016-05-30 at 6.15.08 AM

buat func prepareForsegue, masih ingatkan tadi menamai segue dengan “untukdata”, dia akan digunakan disini, edit seperti gambar dibawah ini.
Screen Shot 2016-05-30 at 10.36.35 AM

Alhamdulillah sudah selesai, saatnya mencoba disimulator

** Pindah halaman secara langsung

Screen Shot 2016-05-30 at 12.16.58 PM

** Pindah halaman secara programatikal

Screen Shot 2016-05-30 at 12.17.18 PM

** Pindah halaman dengan mengirim data

Screen Shot 2016-05-30 at 12.18.53 PM  Screen Shot 2016-05-30 at 12.19.06 PM

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Terimakasih telah berkunjung, semoga bermanfaat dan selamat mencoba

 

Astri Novia Putri
Madani IT School

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Loading Facebook Comments ...