Prototyping App in Xcode

Secuil tutorial ‘How to slicing image’ dari Sketch ke Xcode

Listia Eka
Aug 9, 2017 · 3 min read
Unsplash.com

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.

tampilan desain di sketch
  1. 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
Select image -> Klik icon di lingkaran merah pojok kanan bawah lalu “Export Bg”

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)
tampilan halaman setelah layouting
    Listia Eka

    Written by

    UI/UX Design Enthusiast

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade