Prototyping App in Xcode
Secuil tutorial ‘How to slicing image’ dari Sketch ke Xcode
Aug 9, 2017 · 3 min read

Halo.. Sebelum membuat sebuah aplikasi pastinya kita membuat dulu desain aplikasinya, bisa melalui Sketch, photoshop, corel, dsb. Setelah kita buat desainnya, maka kita akan melakukan layouting atau penataan setiap elemen desain ke dalam xcode atau IDE programming kita.

- Kita export dulu setiap elemen gambar yang kita butuhkan. Mengklik icon (+) di pojok kanan bawah sebanyak 3x agar mendapatkan ukuran 1x 2x 3x untuk di impor pada xcode

2. Mengatur tiap image dengan constraint agar ukuran seimbang/sesuai dengan konsep awal

- Background: image view -> (name image -> Bg), add new constrain (isi dengan right 0 left 0 top 0 bottom 0) tapi ukuran pada top side belum penuh lalu update. Klik “show the size inspector”, delete “Bottom Space to:” lalu tarik panah bagian top hingga background ukuran penuh. Lalu update

- Icon : drag layer icon ke view, pilih vertical spacing dan center horizontally in Container

- Title : gunakan “label” untuk membuat text untuk Title. Atur ukuran, warna dan margin. Pada “Lines” buat menjadi 0 agar… Atur layer title lalu drag pada layer icon”ideal”, setelah itu select “vertical spacing” dan center horizontal. Atur right 74 dan left 74 jangan lupa uncheck “Constrain to margins” lalu update.

- Subtitle : gunakan label utk teks, lalu drag layer subtitle ke layer title -> check “Vertical Spacing”. Isi Lines dengan 0. Lebarkan area bottom pada teks. Lalu update
- Button Sign up dan Login : gunakan UI “button” atur ukuran dan warna teks. Lalu “add new constrains” atur right left, bottom, width dan height. Lalu update

- Tab navigasi : tambahkan “Page Controller” lalu drag, atur letak pada “add new constrains”
3. Membuat class baru “Cocoa Touch Class”
4. Membuat window baru dengan UIViewController
5. Mengoperasikan button login agar pindah ke next view.
- Beri identifier pada button yang akan diberi program
- Drag button login ke dalam body. Masukkan dalam UIButton(self.performSegue)

6. Mengoperasikan button setup agar pindah ke back view
- Beri identifier pada button yang akan diberi program. Drag button login ke dalam body.
- Masukkan dalam UIButton(self.dismiss)

