Skip to main content

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 :) 

Popular posts from this blog

The Advantage of Using HTTP Default Authorization Scheme #DigitalSecurity

pixabay.com Hello Everyone, This day I would like to introduce you to the default header for authorization in HTTP. HTTP auth scheme is a guide or standardization scheme for the authorization header in the HTTP protocol. this standard is using key Authorization in the header and followed by a value that usually filled by key or token. for example : Authorization : <type> <key/token> this standard is the solution of the key header for authorization that really random was provided by developers to build an authorization header for their application, in my experience, developers used to "token" for their key in the header that usually followed by the hash value. the random key makes developers using more time for writing code for getting header key and validating the value which is you could use the library and focus on writing the logic of your application. Depend on Mozilla site , HTTP auth scheme divided by 4 types, such as : Basic  (see  RF

Typer shark Deluxe free full crack

Typer shark Deluxe : software yang akan membantu kita untuk belajar mengetik keyboard dengan cara 10jari, untuk agan2 yang baru belajar komputer pasti teknik pertama yang dilakukan adalah dengan 11jari (kanan 1 + kiri 1 = 11)hahahaha, softaware ini sangat menarik, karna kita belajar 10jari dengan bermain game.. n gamenya interaktif,,, pkoqnya yang tadinya mengetik 11jari, dalam waktu seminggu pasti bisa lancar 10jari... syaratnya harus tekunn...  kalo agan mau ngunduh silahkan : Download screenshot:

Tutorial Hydra Part I ( Cracking FTP Account Using GUI Mode )

Tutorial ini tentang cracking ftp password dengan Hydra. Relate search :  hacking, cracking, backtrack, hydra, hydra -G, kali, linux, password, username, email, server, website, terminal. Hydra adalah suatu tools yang di gunakan untuk melakukan bruteforcing kepada akun tertentu di suatu jaringan atau server, contohnya FTP dan SSH. hydra adalah tools opensource, dan sudah bisa di install di segala platform termasuk windows, linux dan mac. tools ini memiliki dua versi yaitu, versi GUI dan versi CLI, pada kali ini saya akan memberikan contoh menggunakan GUI Mode. untuk lebih jelasnya tetang keterangan dari Hydra , bisa lihat di website aslinya di sini https://www.thc.org/thc-hydra/ tutorial kali ini saya akan memberikan langkah-langkah untuk melakukan bruteforcing kepada akun FTP . WARNING : Tutorial ini bermaksud untuk memberikan pengetahuan bagi para pemilik akun ftp agar tau dan bisa memproteksi akun miliknya agar tidak bisa di crack atau di retas. diharapkan ba