MIT School Muslimah : Belajar X-Code Yukk…!!

MIT School Muslimah : Belajar X-Code Yukk…!!

Yuhuu, artikel kali ini saya akan memberi tutor tentang mengoperasikan X-Code.
Yang ini bukan “Hello Word!” lagi, mari kita buat yang baru hehehe
cekidot

  1. Jalankan Xcode dan membuat proyek baru.Screen Shot 2016-03-24 at 10.40.55 PM
  2. Gunakan template Tunggal View Application sebagai titik awalScreen Shot 2016-03-24 at 9.22.55 PM
  3. Isi semua yang diperlukan, Selanjutnya kamu harus memilih folder untuk menyimpan project. Pilih folder sesuka hati (tidak perlu untuk membuat folder baru, karena akan di-generate oleh Xcode). Klik Create.
    Screen Shot 2016-03-24 at 9.07.10 PM
  4. Setelah X-code menciptakan proyek, jendela X-code utama terlihat seperti ini
    Screen Shot 2016-03-24 at 9.12.10 PM
  5. Lalu lihat storyboard. Klik Main.storyboard di navigator proyek untuk membukanya di editor Interface Builder. Atur ukuran layarnya, biasanya saya pakai yang 4.7 Inchi
    Screen Shot 2016-03-24 at 10.31.26 PM
  6. Ketik “image” di object Libary kemudian drag ke view controller
    Screen Shot 2016-03-24 at 10.32.52 PM
  7. Masukkan gambar yang sudah dipilih untuk dijadikan background ke dalam Assets.Xcassets
    Screen Shot 2016-03-24 at 8.20.17 PM
  8. Masukkan gambarnya
    Screen Shot 2016-03-24 at 10.34.47 PM
  9. Setting tampilan gambar tersebut menurut keinginan, kamu bisa memilihnya seperti  gambar yang saya tunjukkan. Kalau saya biasa memilih Aspect Fill.
    Screen Shot 2016-03-24 at 10.35.54 PM
  10. Tulis “View” di Object Library, drag ke view controller
    Screen Shot 2016-03-24 at 8.23.31 PM
  11. Buatlah kotak seperti di gambar dibawah ini, dan kotaknya bisa kamu warnai
    Screen Shot 2016-03-24 at 11.11.47 PM
  12. Atur tingkat transparan pada kolom Alpha, dimulai dari kiri atas sampai kanan bawah (menyamping) tingkat transparannya mulai dari 1; 0.8; 0.6; 0.4; 0.2
    Screen Shot 2016-03-24 at 10.37.31 PMSampai tampilannya seperti ini
    Screen Shot 2016-03-24 at 8.48.19 PM
  13. agar nanti saat di play dari iphone 6s sampai 4s tidak berubah, maka atur background dan ornamen kotaknya pada autoresizingnya. Namun setiap gambar dan ornamen selalu berubah ubah dalam menyeting autoresizingnya
    (background)
    Screen Shot 2016-03-24 at 11.28.16 PM(Ornamen kotak
    Screen Shot 2016-03-24 at 11.28.44 PM
  14. Jika sudah silahkan dicoba pada IOS Simulator, tekan tanda play
    Screen Shot 2016-03-24 at 10.38.43 PM

Maka simolator akan bekerja. Berikut tampilan pada 5 device
– iPhone 6s dan iPhone 6
Screen Shot 2016-03-24 at 8.53.20 PM   Screen Shot 2016-03-24 at 8.51.41 PM

– iPhone 5s dan iPhone 5
Screen Shot 2016-03-24 at 9.00.48 PM      Screen Shot 2016-03-24 at 9.02.46 PM

– iPhone 4s
Screen Shot 2016-03-24 at 9.02.46 PM

Nah mudah kan gaes ??
Sekian materi yang bisa saya sharing , semoga bermanfaat dan selamat mencoba ya 🙂

Astri Novia Putri

iOS MIT School Muslimah

Related posts:

Loading Facebook Comments ...