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

MENGATASI PRINTER KEHABISAN TINTA HITAM

Hai semua…. Saya kembali lagi untuk memberi tips dan trik computer untuk kalian. Pernahkah kalian kehabisan tinta?.Apalagi tinta hitam yang sring di gunakan buat print tugas!. Yah gitulah kalau dompet kempes tapi mau print tugas yang di kumpulin besok, wah mau print di warnet tapi gak punya duit, apalagi beli tinta waaaahhh. Tambah pusing..!!! Tapi jangan khawatir disini saya akan mengulas masalah tersebut dan memberi kalian jalan keluar untuk kalian yang dompetnya lagi kosong melompong kayak punya saya. Hehehe (jangan terseinggung ya, Cuma bercanda) Berikut adalah trik saya untuk print pada printer canon, tapi jangan khawatir kemungkinan besar gak beda jauh koq sama printer merk lain, tapi berbahagialah bagi yang printernya canon. Trik ini memiliki syarat kalau tinta warna harus ADA!! Ingat karna kita disini akan memodifikasi warna bukan menyulap catridge warna hitam yang semula habis menjadi full. LOL :D Nah sudah cukup basa basinya dengan saya berikut tutorialnya :  Buka document ya…

Hacking Website With SQL Injection (Manual)

Relate Search : Melihat isi database dengan teknik manual Sql Injection, Mencuri isi database, Sql Injection, Sqli, Dork Sqli, Cara hacking website dengan sql injection, google dork, dork terbaru.
Sql Injection adalah salah satu teknik hacking suatu website yang memanfaatkan bug Sql pada link dinamis, pada url tersebut attacker dapat memasukkan perintah Sql ke dalam statement Sql via input website. Banyak cara untuk melakukan Sql Injection seperti dengan tools SqlMap, Havij dll, tetapi pada tutorial kali ini saya akan menjelaskan tentang cara Sql Injection secara manual melalui addressbar.
Berikut Langkah-Langkahnya :
1. Siapkan target terlebih dahulu, ( Website yang vulnerable terhadap Sql injection ). Cara mencari nya kita dapat menggunakan Google Dork, untuk melihat google dork terbaru bisa lihat DISINI.
untuk definisi Google Dork dan list Google dork terbaru bisa lihat DISINI.
2. Setelah kita dapat targetnya , sekarang kita akan mulai periksa, apakah website tersebut vul…

Membuat Game Sederhana Dengan JavaScript

Assalamualaikum Wr Wb

Javascript adalah Bahasa pemrograman yang di pakai di web, javascript kebanyakan di gunakan untuk kebutuhan membuat animasi, tapi tidak semata-mata javascript hanya bisa di pakai untuk membuat animasi, untuk kebutuhan operasi web pun sering di gunakan. Javascript bersifat Client Side, maksudnya adalah javascript berjalan di PC pengguna atau pengakses web, dan scriptnya pun bisa di lihat oleh user, berbeda dengan PHP yang scriptnya tidak bisa di lihat oleh user.

Selain di buat animasi, Javascript juga bisa di pakai untuk membuat aplikasi web, salah satunya adalah GAME, pada kesempatan kali ini saya akan memberikan tutorial bagaimana membuat GAME sederhana dengan Javascript, memanfaatkan event-event dalam javascript.

berikut screenshoot dari game sederhana :


Alur Game :

1. Klik button Start.
2. gambar monster akan bergerak cepat.
3. klik sebanyak mungkin gambar monsternya.
4. Apabila skor lebih dari 20, maka anda akan menang.

untuk sourcecode nya bisa d…