Tampilkan postingan dengan label Developer. Tampilkan semua postingan
Tampilkan postingan dengan label Developer. Tampilkan semua postingan

Minggu, 14 April 2019

Membuat Halaman Signin dengan Memanfaatkan Stack View di XCODE #IOSDEV

Halo semuanya kali ini kita akan belajar xcode lagi, judul kali ini adalah menggunakan stack view di xcode, stack view adalah salah satu jenis view yang bisa membuat komponen di dalam view tesebut menjadi tesusun secara bertumpuk. stack view memiliki 2 jenis yaitu stack view horizontal dan vertical, sesuai dengan namanya stack view horizontal bisa membuat komponen di dalamnya menjadi berjejer secara horizontal, sedangkan vertical bisa membuat komponen di dalamnya menjadi bertumpuk atau berjejer vertical.

stack view berperan penting dalam dunia layouting aplikasi, untuk melakukan penumpukan komponen cukup menggunakan stack view kita bisa mendapatkan hasil yang sesuai dan lebih praktis, apabila kita tidak menggunakan stack view atau bisa di asumsikan kita menggunakan margin dan constraint maka pekerjaan kita menjadi lebih rumit dan prosesnya lebih lama.

berikut ilustrasi dari stack view. 

source : developer.apple.com

pada gambar di atas ada stack view yang di dalamnya terdapat 3 komponen yaitu : label, image view dan button. saat kita memasukkan komponen2 tersebut kedalam stack view, mereka otomatis langsung berurutan seperti di atas sesuai posisi urutan yang kita mau.

sudah paham kan? oke, kita langsung lanjut ke langkah langkahnya.

1. Buat project xcode
2. Masuk ke storyboard, tekan command+shift+L > pilih stack view vertical


3. Drag and drop di storyboard. pastikan urutan komponen seperti gambar dibawah.

4. Tambahkan 3 button di dalam stack view.

note: pada langkah ini kita sudah bisa melihat bahwa 3 componen yang kita tambahkan tadi langsung bertumpuk sejajar saat kita masukkan satu2. itulah gunanya stack view (vertical).

5. buat agar stackview memiliki rata tengah horizontal dan vertical. dengan cara klik align menu pada kanan bawah storyboard > lalu klik centang horizontal dan vertical > add constraint.


note : pada langkah ini harusnya component stack view sudah di tengah vertical dan horizontal.

6.  Tambahkan asset untuk mempercantik halaman login kita. klik Assets.xcassets > drag and drop asset dari finder ke dalam xcode. seperti berikut



7.  tambahkan 2 label. satu didalam stack view, lainnya di atas stackview. seperti ini.


8. Ganti properties pada setiap komponen sesuai list dibawah.


  • LabelA (text : "Batavia Hack Town") atau terserah kalian
  • LabelB (text: "Choose your login")
  • ButtonA (title: "Sign in with Facebook", background: "FB", text color: "white")
  • ButtonB (title: "Sign in with Google", background: "google", text color: "black")
  • ButtonC (title: "Sign in with Email", background: "email", text color: "black")
  • StackView (spacing: 10, distribution: "fill equal")
sehingga terlihat seperti ini


9. tambahkan constrain pada LabelA dengan cara seperti berikut .



dan hasilnya akan jadi seperti ini .


10. tambahkan sedikit property pada LabelA untuk mempercantik. 

LabelA (font style: light, font size: 50)

11. tambahkan image view, lalu ganti property image pada imageview menjadi "background" lalu ganti content mode menjadi "aspect fill". tambahkan constraint sesuai dengan gambar dibawah ini. 


note: pastikan constrain yang di tuju adalah super view, seperti berikut.



setelah itu hasilnya akan seperti ini.


here we are, sudah selesai lah kita pada akhir tutorial ini. apabila ada pertanyaan silahkan layangkan di komentar. good luck and thankyou :) 

Minggu, 20 Agustus 2017

Intel XDK : Download Free Ebook Bahasa Indonesia Lengkap



bill.web.id, intel xdk adalah SDK buatan Intel Corporation yang memungkinkan kita untuk membuat aplikasi berbasis mobile di semua platform mobile seperti android dan ios. tidak cuma pada platform itu saja, intel xdk juga mensupport platform terkenal lain yaitu windows phone dan blackberry os. SDK serupa juga telah muncul sebelum intel xdk yaitu Phonegap, tetapi platform ini sangat tidak userfriendly terhadap developer baru karna semuanya menggunakan console. 



berbeda dengan intel xdk, sdk ini terbukti mudah di pelajari dengan user interface yang mirip dengan sdk terkenal lainnya seperti android studio dan visual studio. dengan fitur drag and drop component sdk ini semakin memanjakan para developer untuk dengan mudah mendevelop aplikasi berbasis mobile. 

Baca Juga :


intel xdk menggunakan bahasa javascript sebagai core logicnya dan html, css sebagai core UI nya. bagi para web developer khususnya frontend developer, sangat mungkin dan pasti sangat mudah untuk pindah ke dalam dunia developing mobile menggunakan intel xdk ini. 



intel xdk menggunakan cordova sebagai core utama untuk berkomunikasi dengan device android dan memanfaatkan fitur2 yang ada di android, seperti camera, photo, library, notifikasi dll. 


Baca Juga :


kelebihan dari intel xdk adalah sangat user friendly dengan adanya fitur drag and drop, dan semuanya di lakukan dengan GUI, jadi sangat mudah bagi para developer mobile baru yang hendak belajar. selain itu intel xdk juga memiliki kekurangan, yaitu sdk ini terbilang berat, anda wajib menginstall ram 4 gb jika ingin lancar mendevelop dengan sdk ini. dan juga aplikasi yang di build menggunakan intel xdk performanya lebih berat dari pada aplikasi yang di develop menggunakan native seperti android studio ataupun visual studio.


Baca Juga :


nah, tertarik nggk kalian semua sama intel xdk? pasti tertarik dong, sejak di tulisnya artikel ini link2 ebook intel xdk sangatlah banyak, bahkan berbahasa indonesia pun ada. apabila kalian tertarik untuk mencoba berhijrah ke intel xdk kalian bisa memanfaatkan ebook yang saya share di google drive ini. ada 8 ebook dan semuanya step by step dari awal develop sampai upload ke store. ebooknya gratis yuk di download ^_^ 


Search