Skip to main content

Membuat Halaman Signin dengan Memanfaatkan Stack View di XCODE #IOSDEV

Author Bill Tanthowi Jauhari
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 :) 
Tangerang, Tangerang City, Banten, Indonesia

Popular posts from this blog

OpenVPN Alternatif Solusi Menanggulangi Blokir dari KOMINFO

Author Bill Tanthowi Jauhari
Sejak akhir juli 2022 kemaren indonesia di gegerkan dengan tindakan kominfo atas diblokirnya banyak platform digital karna tidak mendaftar PSE, terutama paypal dan plaform game (steam, epic game dll). keputusan ini semakin membuat netizen geram dikarenakan platform judi online malah disetujui untuk beroperasi karna sudah daftar PSE. Jujur menurut saya memang keputusan ini sejak awal saya dengar sudah mengada-ada karna sangat aneh memblokir semua platform digital yang jumlahnya tidak terhitung banyaknya dan hanya membolehkan akses platform yang sudah mendaftar yang jumlahnya hanya ratusan.  saya sebagai developer juga merasa aneh banget ini kebijakan apalagi platform development juga banyak yang di blacklist oleh kominfo seperti, github, gitlab, bitbucket, even website CDN pun di blacklist. astaga wkwkwk. anyway terlepas dari kebijakan konyol ini, saya mau berbagi tips cara agar tetep bisa mengakses semua platform tersebut tanpa ada halangan, yaitu dengan menggunakan VPN. banyak ban...
Read More »

Playing with Hooks in Gorm #GolangDev

Author Bill Tanthowi Jauhari
Pixabay Hello everyone, I would like to share some tricks in gorm, the Idea of this tricks is to execute a command or code statement in the middle of an ORM operation, if you ever know about trigger in the query language, then hooks is just kinda like that. Hooks could execute statement in some events such as: beforeCreate, beforeUpdate, afterCreate,  and afterUpdate . those event is similar as a trigger,  when the trigger is executed in DBMS layer, hooks are executed in the application layer. In my real case, my current company has different convention of naming database column, so when I try to implement ORM, a lot of columns such as created_at, updated_at and deleted_at can't be generated automatically. also if you have a custom UUID you could pass the value UUID generator into hooks before the insert is executed. for more detail let's jump into code : # Explanation Above code containing model struct, and several methods from gorm to serve model, TableName method used to d...
Read More »

Laravel Database : Membuat Jutaan Data Dummy Menggunakan Faker Generator di Laravel

Author Bill Tanthowi Jauhari
faker generator adalah salah satu library magic yang build in di laravel, dengan menggunakan library ini kita bisa membuat puluhan, ratusan bahkan jutaan data dummy dengan hanya sekali pukul. udah kebayang belom? kalo belom kita langsung aja masuk ke praktiknya. like foolest people gonna smart when use faker oke guys, lets do this. pertama tama, liat diagram berikut yak, biar runtut langkah langkahnya naah langkah runtutnya kurang lebih seperti ini  create migration->model->faker->seeder->execute->test oke guys, mari kita buat migrationnya, studi kasus yang mau kita buat adalah membuat artikel blog dengan table sederhana seperti berikut 1. ketikkan perintah berikut di terminal php artisan make:migration artikel  2. buka file migrationnya di folder database>migration>[nama migration] 3. ketikkan perintah berikut di terminal php artisan migrate oke guys hasilnya nanti akan seperti ini setelah lang...
Read More »