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

Automatic API Documentation Swagger in Golang #GolangDev

Author Bill Tanthowi Jauhari
pixabay.com In this article, I'll explain how to generate an API blueprint instantly using SwagGo in Golang. API blueprint is a document that contains a bunch of API endpoints, its slickly same as documentation but less description, it's allow another programmer to read and see all the available endpoint and try it out with sandbox feature. Swagger is one of the most used API blueprints right now, it's available in free but limited usage. if you wanna use the free credit, you need to understand YAML notation, you can read the example notation in swagger official documentation. but again, it's really hard and takes an expensive time to arranges all the notation to achieve a good API blueprint. fortunately, there are tools in Golang that allow us to generate the YAML notation and automatically generate the blueprint page with only using markup notation, and it's FREE unlimited for self-host, insane right? SwagGo tools are available here , the documentation is very cl...
Read More »

How to Deploy or Debug Apple Watch Apps in Physical Device #WatchOSDev

Author Bill Tanthowi Jauhari
Hello everyone, this is my first tutorial about watchOS hope you enjoy. WatchOS is the operating system that support for apple watch, in this watchOS we could develop apps, but first thing that we must know, watch apps in 5 version and bellow are not support for independent apps, so the watch apps must develop with IOS apps in the seems time. but in WWDC 19, apple announce that WatchOS 6 will support independent apps, so the users could install apps directly from apple watch. in this tutorial we will learn about how to create first Apple Watch Apps and deploy it in physical device, why this tutorial matter, because deploying apps in apple watch is not seems as you deploy IOS apps in IPhone or IPad, there is several unique thing that you should know.  until this tutorial has written, I have not found anything tutorial that talking about this theme. so here it is. first thing we must create an xcode project. and choose WatchOS like bellow hit next, and...
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 »