MIT School Muslimah : Memodifikasi View di Xcode – Swift Programing

MIT School Muslimah : Memodifikasi View di Xcode – Swift Programing

Ingin buat aplikasi di iOS, mari berkenalan dulu dengan “view” pada Xcode agar melancarkan niatan teman untuk membuat aplikasi dengan mengetahui sedikit lebih dalam mengenai view. Dalam hal ini saya menganggap teman telah menginstal Xcode-nya jikalau belum silahkan baca tulisan bagian-bagian Xcode. Mungkin di kepala teman mulai bermunculan pertanyaan seperti ini,

“View itu apaan sih…? Dari tadi ngomongnya Via, View, Via, View. Eh,”

View adalah pondasi dasar user interface untuk aplikasi kita, yang intinya mengenai tampilan pada aplikasi yang akan dibuat. Mari memulai langkah awal kita dengan mengikuti instruksi seperti gambar di bawah.

view

  1. Ketik view pada kolom search.
  2. Pilih view pada bagian library, setelah itu drag ke kolom editor.

Cara Merubah Ukuran Pada View 

Mengubah tinggi dan lebar sebuah view identik dengan bentuk view akan menjadi seperti apa, semisal bentuk persegi atau kotak, persegi panjang serta bentuk lingkaran (walaupun ada tambahan code lain tetapi acuannya tetap butuh settingan ini). Teman bisa saja merubahnya secara langsung di size inspector untuk tinggi maupun lebar sebuah view seperti gambar di bawah.

View2

  1. Pilih atau klik view agar kolom utility terbuka
  2. Setelah itu klik icon size inspector
  3. Silahkan mengisi kolom width untuk lebar sebuah view
  4. Sama halnya kolom height silahkan diisi untuk tinggi sebuah view

Cara di atas tanpa coding, akan tetapi jikalau teman ingin dengan cara coding silahkan mengikuti langkah ini.

view3

  1. Klik view sambil menekan tombol “control” pada keyboard secara bersamaan
  2. Lalu arahkan ke bagian ViewController
  3. Silahkan teman memberi nama, contoh “viewku”
  4. Setelah itu klik “Connect” untuk mengeksekusi

view4

  1. “@IBOutlet weak var viewku: UIView!” adalah hasil eksekusi dari langkah sebelumnya
  2. Code yang disisipkan untuk mengubah lebar dan tinggi sebuah view

Silahkan teman mengcopy code di bawah ini untuk pengaturan lebar dan tinggi view

viewku.frame.size.width = 140
viewku.frame.size.height = 166
/*viewku adalah nama var yang telah dibuat sebelumnya jadi sesuaikan dengan nama var yang teman 
buat, ukuran lebar dan tinggi silahkan disesuaikan dengan selera.*/

Cara Merubah Posisi X dan Y

Pada bagian ini, bagaimana kita menentukan posisi X dan Y dimana X diibaratkan sebagai lebar sedangkan Y sebagai tinggi suatu bentuk view. Teman-teman yang familiar dengan matematika sudah pasti bisa membayangkan maksud dari X dan Y ini. Secara programmatical untuk mengubah tampilan seperti ini.

viewku.frame.origin = CGPoint(x: 30, y: 30)
// teman bisa juga menggunakan code perpaduan antara lebar, tinggi dengan x, y 
viewku.frame = CGRect(x: 30, y: 30, width: 142, height: 142)

Cara Merubah Warna

Hal lain yang perlu teman ketahui adalah cara merubah warna, kenapa mesti merubah warna? yah tidak mesti juga merubah warna, selama teman nyaman dengan warna default view-nya yaitu warna putih atau sesuai kebutuhan teman. Tetapi kita mengubah disini agar view-nya tidak kelihatan monoton dengan warna default dan teman bisa membuat kesesuaian warna untuk aplikasi yang dibuat nantinya. Teman bisa secara langsung mengubah warna view pada bagian utility, caranya seperti ini.

view5

  1. Klik view agar attributes inspector terbuka
  2. Lalu klik icon attributes inspector untuk mengubah warna
  3. Klik warna pada item background
  4. Silahkan teman memilih warna sesuai selera

Sedangkan secara programmatikal, teman tinggal menambahkan code ini pada bagian editor.

viewku.backgroundColor = UIColor.brownColor()
//untuk mengubah warna, tinggal mengganti kata "brown" dengan warna pilihan teman

Cara Merubah Lekuk Sudut

Terkadang kita ingin mengubah bentuk lekuk sudut sebuah view agar kelihatan berbeda dari bentuk bawaan Xcode dan enak dipandang mata, langsung saja mengikuti code ini.

viewku.layer.cornerRadius = 44
//nilai 44 ini dapat teman ubah sesuai dengan paduan lebar dan tinggi view, pada kesempatan ini 
saya menggunakan lebar = 142 dan tinggi = 142

Hasil yang muncul pada simulator akan seperti ini (perhatikan tiap lekuk/sudutnya)

View-6

Cara Membuat Lingkaran

Jikalau mengikuti default view, bentuknya itu cuman persegi dan persegi panjang sedangkan teman inginnya berbentuk lingkaran tetapi opsi lingkaran tidak tersedia, dibagian ini kita adakan opsi lingkaran ada di Xcode.

view8

  1. Pilih view  untuk membuka bagian utility
  2. Klik icon identity inspector untuk menentukan nilai
  3. Lalu klik simbol “+”
  4. Silahkan teman ketik “layer.cornerRadius” tanpa menggunakan tanda kutip pada kolom key path
  5. Pada kolom type pilih “Number”
  6. Selanjutnya isi kolom value, saya mengisi dengan nilai 65 (alasannya kenapa? penjelasannya ada di bawah). Jangan lupa teman, setelah semuanya terisi silahkan tekan tombol “enter” (terkadang kita lupa)

Sedangkan cara mengubah secara programmatikal teman dapat menyimak code di bawah ini, dimana letak perbedaan dalam menentukan perubahan sudut/lekuk dengan membuat view menjadi sebuah lingkaran.

viewku.layer.cornerRadius = 65
//disini saya menggunakan lebar = 130 dan tinggi = 130

Yupss,,, jawaban teman benar, perbedaannya itu terletak pada kesesuaian penggunaan nilai lebar (130) dan tinggi (130) dibagi 2 (dua) menjadi nilai penentu layer.cornerRadius = 65,  walaupun menggunakan instruksi code yang sama tetapi memiliki perbedaan dalam menggunakan nilai.

Cara Membuat View Menjadi Transparan

Bagaimana sih cara buat tampilan yang rada-rada blur gitu,,,? Baik, pada bagian ini kita akan membuat tampilan menjadi blur atau transparan. Teman apabila bermaksud mengubah, bisa mensetting seperti code di bawah. Untuk view alpha-nya kita menggunakan 0.5 dari 1 atau teman analogikan dari jumlah 100%, kita hanya menggunakan 50%.

view7

  1. Klik view untuk menampilkan bagian utility
  2. Lalu pilih attributes inspector untuk mengubah nilai alpha
  3. Silahkan teman menentukan nilai alpha

Secara programmatikal teman bisa copy code di bawah ini,

viewku.alpha = 0.5
//dikesempatan ini saya menggunakan alpha 0.5, dimana alpha adalah tingkat transparan sebuah view

Cara Membuat Lebar Pada Border

View dapat ditambahkan dengan opsi border, border disini layaknya sebuah kulit menyelimuti sebuah daging. Untuk ketebalan sebuah border teman dapat mensetting seperti ini.

viewku.layer.borderWidth = 23
//nilai 23 adalah tingkat ketebalan border view dan dapat diubah sesuai dengan keinginan teman

Cara Membuat Warna Pada Border

Setelah berhasil mengubah ketebalan sebuah border, teman juga dapat mengubah warna. Warnanya pun bervariasi, untuk itu silahkan memberi warna sesuai dengan kebutuhan teman. Langsung saja tulis code-nya,

viewku.layer.borderColor = UIColor.redColor().CGColor
//untuk warna silahkan teman sesuaikan, tinggal mengubah kata "red" menjadi "black" atau warna 
apapun itu

Kurang lebih seperti itulah mengenai view, jikalau ada yang kurang menurut teman silahkan menambahkan pada kolom komentar.

Related posts:

Loading Facebook Comments ...