Friday, June 3, 2016

KLWP Komponent, Over Laps, dan Stack Group

  No comments
Group dalam KLWP adalah module yang berfungsi sebagai wadah untuk meletakkan module-module lain didalamnya, atau jika anda pernah mendengar tentang xml pada desain aplikasi android, group juga bisa diartikan sebagai layout.

Dalam mendesain preset KLWP penggunaan group sangat disarankan karena termasuk praktik yang baik, selain itu KLWP juga membatasi jumlah module yang bisa diletakkan pada Root, sedangkan animasi hanya bisa diterapkan pada module yang terletak tepat setelah Root, mengapa demikian? perlu diingat bahwa setiap animasi pada sebuah aplikasi baik itu live wallpaper ataupun yang lain akan mengkonsumsi ram, semakin banyak animasi maka akan semakin bayak ruang ram yang dibutuhkan, karena itu jika desain yang dibuat tidak membutuhkan animasi sebaiknya letakkan pada sebuah group.
Group dalam KLWP dibagi menjadi tiga bagian dan tentu saja memiliki fungsi yang berbeda.

Overlaps Group  

Sesuai dengan namanya, Overlaps group bersifat tumpang tindih atau menumpuk setiap module yang berada didalamnya atau bisa disebut relatif layout, lebar dari overlaps group tergantung dari setiap module baik itu panjang, lebar atau jarak (padding), kita buat contoh sederhana seperti gambar berikut.


Pada gambar diatas kita membuat contoh overlaps group dengan lima shape didalamnya, dengan nama Shape 0 - 4 caranya :
  1. klik icon " + " pilih Overlaps Group, Jika tidak mendapati apapun di layar preview jangan khawatir, karena kita belum menambahkan apapun, seperti keterangan diatas group hanyalah wadah atau pembungkus. 
  2. Selanjutnya  klik Overlaps group yang ada di tabel Items, kemudian geser ke table Position, pada bagian anchor pilih center
  3. Geser ke table Item kemudian tambahkan Shape, berinama Shape 0 caranya centang check box yang ada disamping shape kemudian pilih icon pensil.
  4. klik pada Shape 0, ubah value width menjadi 400 
  5. klik tombol back
  6. tambahkan Shape yang ke dua
  7. centang check box pada Shape yang baru ditambahkan kemudian klik icon copy yang berada disebelah icon pensil.
  8. klik icon paste yang ada di pojok kanan atas layar sebanyak tiga kali
  9. beri nama masing-masing Shape sesuai urutannya
  10. klik pada Shape 1, ubah value width : 40, color : red, anchor : top left, lihat penjelasan pada Tab Navigation.
  11. lakukan langkah yang sama pada shape-shape berikutnya, pada anchor kita ubah secara berlawanan contoh : shape 2: Top Right, Shape 3: Bottom Left, Shape 4: Bottom Right.
Sekarang coba kembali pada Shape 0, ubah value width menjadi lebih besar atau lebih kecil.


Seperti pada contoh gambar di atas dapat disimpulkan bahwa :
  • Lebar dari group mengikuti ukuran atau padding yang ditentukan pada module
  • Secara default overlaps group meletakkan module yang ada didalamnya pada posisi center
  • Posisi setiap module pada overlaps group selalu berkaitan antara satu dengan yang lain, sering kali terjadi kebingungan ketika kita merubah posisi module pada overlaps group, module yang lain ikut bergeser atau posisi dari module yang dirubah tidak bergeser karena tidak memahami hal ini.
  • Untuk mengatasi masalah dari point di atas kita bisa menggunakan shape dengan warna transparan sebagai background yang lebarnya bisa kita sesuaikan.   
mudah-mudahan dengan ini kita lebih paham bagaimana menggunakan Overlaps group.

Stack Group

Stack group akan meletakkan setiap module yang ada didalamnya secara tersusun berjejer baik itu vertikal ataupun horizontal, untuk merubah jenis susunan module pada Stack Group, geser pada table Layer kemudian pilih Stacking.


Berbeda dari Overlaps Group, padding dari setiap module pada stack group berdasarkan batas terdekat misalkan module dengan module yang lain atau module dengan batas dari group itu sendiri, contoh kita buat stack group dengan tiga shape rectangle didalamnya, masing-masing dari shape kita ubah width : 160, height : 80, Bpadding : 30, maka akan tampak seperti gambar berikut.


Pada Stack group setiap module yang ditambahkan tidak akan pernah menimpa module yang lain, Contoh :

  • Ubah stacking menjadi Center Horizontal
  • pada setiap shape ubah Rpadding menjadi 25
  • keluar dari Stack group, kemudian tambahkan Stack groub baru pada layer Root.
  • Cut Stack group yang pertama dengan cara centang pada check box, klik pada icon three dots yang ada diatas layar kemudian pilih Cut.
  • kita buka Stack group yang baru kemudian klik icon paste
  • kemudian lakukan copy paste sebanyak 3x pada Stack group tersebut (lihat contoh shape pada Overlaps group)
Hasilnya akan seperti gambar di bawah ini.


Komponent

Komponent merupakan Overlaps group spesial yang dapat di export secara terpisah, misalkan kita mempunya beberapa bagian desain seperti jam weather atau yang lain, dan kita tidak ingin membagikan semua, maka komponent merupakan wadah yang tepat, Komponent juga bisa disebut widget pada KLWP, seperti halnya preset, komponen juga memiliki variable global tersendiri.
Komponent juga dapat di Export dalam bentuk APK sepeerti preset. jadi kita bisa menggunakan komponent di beberapa Preset.
Menambahkan komponent sama dengan menambahkan module yang lain, hanya saja setelah menambahkan komponent kita akan dibawa pada halaman seperti ketika memilih preset.


Seperti contoh gambar di atas, KLWP juga memiliki Buil-in komponent yang bisa digunakan' atau jika memiliki komponent berupa nama_komponent.komp.zip, letakkan file tersebut pada /sdcard/Kustom/komponents.
Ketika memuat komponent yang telah jadi, kita tidak akan melihat module apapaun di dalamnya karna terkunci, jadi ketika ingin melihat atau mengedit, buka kunci komponent yang berada di atas layar, variable global pada komponent hanya bisa di akses oleh komponent itu sendiri.

Export Komponent
Cara mengexport komponent berbeda dengan mengeksport Preset, misalkan kita memiliki sebuah komponent yang siap dibagikan.

  • Pastikan komponent tidak dalam keadaan terkunci
  • Lihat deretan menu pada atas layar
  • klik icon export yang berada disebelah icon gembok
  • isi Title, Diskripsi dan yang lain kemudian klik Export

Letak komponent yang di export berada pada folder /sdcard/Kustom/komponents/ berupa nama.komp.zip

No comments :

Post a Comment