Membuat kontrol tinggi dan lebar sebuah objek di Sketchware
By Ndi Uke
Post a Comment
Halo semua !! terimakasih telah kembali berkunjung ke Blog sederhana ini. Pada kesempatan kali ini saya masih ingin membahas seputar aplikasi Sketchware, dan tutorial kali ini saya akan membagikan cara membuat pengontrol tinggi dan lebar sebuah objek menggunakan elemen SeekBar yang sudah tersedia pada list widget dari aplikasi Sketchware.
Jika kalian pernah menggunakan aplikasi SketchUi, kurang lebih seperti itulah tampilan aplikasi yang akan kita buat !! seperti yang kalian lihat pada thumbnail di atas. Kita dapat mengatur tinggi dan lebar sebuah objek yang dalam hal ini saya gunakan LinearLayout sebagai objeknya. Aksi seperti ini biasanya akan diterapkan pada aplikasi "desain" jadi buat kalian yang sedang mengerjakan projek aplikasi desain boleh nih ikutin tutorial sederhana ini atau buat kamu yang iseng pengen coba juga silahkan ikuti langkah-langkah berikut ini.
Sebagian besar bahan yang akan kita gunakan sudah tersedia di aplikasi Sketchware, disini kita hanya memerlukan sedikit kode / skrip sebagai tambahan. tapi sebelum kita membuat programnya kita buat dulu Layout atau tampilannya (opsional), tampilannya tidak harus sama dengan yang saya buat.
TATA LETAK TAMPILAN
Buat projek baru atau bisa juga buat aktivitas baru di projek yang sedang kamu kerjakan, dihalaman tersebut tambahkan linear vertikal dengan pedding nol (0) terus ubah tinggi dan lebarnya menjadi match_parent. selanjutnya silahkan tambahkan lagi 2 linear vertikal didalamnya, sehingga sekarang kita memiliki 3 linear vertikal yang mana liner1 sebagai linear dasar sedangkan linear2 dan linear3 berada didalam.
Kemudian ubah gravity linear2 menjadi center_vertical dan center_horizontal, selain itu ubah juga weight nya menjadi 1 (satu) sehingga akan tampak menjadi seperti berikut.
Selanjutnya tambahkan lagi satu buah linear vertikal didalam linear2 kemudian ubah tinggi dan lebar linear tersebut yaitu (linear4) menjadi 300-400dp (opsional) lalu ubah juga warna background nya sesuai selera karena hanya sebagai penanda saja.
Selanjutnya tambahkan 3 (tiga) linear horizontal didalam linear3, kemudian pada masing-masing linear tersebut tambahkan 4 buah textview dan 1 buah Widget SeekBar dan letakan SeekBar diantara textview jangan lupa juga untuk mengubah weight pada SeekBar menjadi 1 (satu).
Selanjutnya ubah masing-masing textview seperti yang sudah saya lakukan, dari yang awalnya seperti gambar di atas menjadi seperti gambar berikut.
Sampai sini tata letak tampilan sudah berhasil kita buat dan selanjutnya kita akan menambahkan programnya agar aktivitas tersebut dapat dioperasikan, untuk itu sekarang kita beralih pada tab event.
ONCREATE
Pertama-tama kita masuk pada opsi onCreate, di onCreate kita masukan blok view yaitu (SeekBar setProgress), tambahkan 2 buah blok tersebut untuk SeekBar1 dan SeekBar2 atau lihat gambar berikut.
Angka 400 itu untuk menampilkan nilai SeekBar saat activity pertama kali dimuat dan nilai tersebut harus sama dengan nilai tiggi atau lebar objek saat pertamakali aktifitas dimuat.
MEMBUAT FUNGSI
Selanjutnya tambahkan opsi untuk seekbar, untuk itu kita keluar saja dari opsi onCreate kemudian kamu bisa geser dahulu pada tab view lalu Tap pada element SeekBar kemudian klik event pada opsi yang muncul dari bawah selanjutnya pilih pada opsi onProgressChanged atau Lihat Gambar ini.
Selanjutnya pada opsi onProgressChanged ini kita akan menambahkan skrip / kode programnya, ada beberapa opsi untuk menambahkan skrip ini.
- Menggunakan MoreBlock
- Menggunakan AddSourceDirectly
- Menggunakan BlockCustom
Dan untuk yang pertama kita akan menggunakan moreblock, untuk skrip yang akan kita gunakan pada MoreBlock ialah seperti berikut.
Caranya buatlah MoreBlock dengan nama apa saja kemudian tambahkan view dengan nama v, jika sudah sekarang tambahkan variable pilih Number kasih nama h untuk Height jika sudah masih di variable Number sekarang tambahkan number dengan nama w untuk Width jika sudah silahkan Add.
Selanjutnya tambahkan skrip di atas kedalam moreblock yang barusan kita buat. sebagai contoh Lihat Gambar.
Setelah membuat moreblock sekarang pada opsi onProgressChanged tambahkan blok SeekBar setMax dan atur maksimal value nya, kemudian tambahkan moreblock yang sudah kita buat tadi lalu masukkan view yang akan dijadikan Objek lalu pada kolom height masukan blok SeekBar getProgress dan kolom width masukan progressvalue, terakhir tambahkan blok view textview setText pada kolom setText tambahkan block operator toString Without Desimal dan masukan progressvalue pada kolom yang tersedia pada blok operator, atau ikuti susunan bloknya seperti gambar berikut.
Lakukan hal yang sama pada seekbar2 yaitu seekbar untuk mengatur height , susunan Block nya sama saja namun kamu harus mengganti view seekbar pada seekbar2 dan tukar posisi kolom number pada MoreBlock.
Sedangkan jika kita menggunakan skrip langsung dalam hal ini menggunakan AddSourceDirectly (ASD), kamu bisa gunakan skrip berikut.
Untuk caranya cukup mudah yaitu cukup tambahkan blok ASD kemudian paste skrip di atas pada block ASD, atau seperti gambar berikut.
CUSTOM BLOCK
Sedangkan opsi yang ketiga ialah menggunakan block custom yang sudah saya buat. kamu bisa mengunduh blocknya dibawah ini.
Untuk penerapannya sama saja seperti kedua opsi diatas, hanya saja menurut saya menggunakan block custom jauh lebih simpel untuk digunakan.
Ok jika kamu sudah melakukan tutorial diatas dengan benar,,, SeekBar1 dan 2 sudah dapat digunakan namun untuk seekbar3 yang akan kita gunakan untuk menambahkan corner radius atau menambahkan lengkungan pada objek belum kita tambahkan program apapun, untuk itu sekarang kita buat programnya dahulu.
Untuk membuat seekbar3 bekerja caranya juga sama yaitu dengan cara Tap pada bagian seekbar dan pilih event kemudian pilih opsi onProgressChange. Pada halaman tersebut kita tidak perlu menambahkan skrip tambahan apapun karena kita akan menggunakan blok bawaan dari Sketchware.
Untuk itu kamu cukup buka pada blockView kemudian cari view setCornerRadius yang disertai Color, selanjutnya blok textview setText dan tentunya blok SeekBar setMax untuk menentukan nilai maximal nya jika sudah silahkan atur urutan blok seperti gambar berikut.
Sampai tahap ini ketiga Widget SeekBar sudah dapat dioperasikan tapi tidak untuk textview yang kita jadikan tombol min dan plus. dan sebelum kita fungsikan tombol min dan plus nya ada baiknya kamu coba jalankan dulu projeknya untuk mengecek apakah terjadi error atau tidak, jika terjadi error periksa kembali susunannya dan baca kembali tutorialnya lebih teliti, jika sudah benar saatnya kita lanjutkan tutorialnya.
Pada dasarnya timbol min dan plus digunakan untuk menambah atau mengurangi dalam jumlah satuan yang mana itu dikarenakan kita akan kesulitan untuk mendapatkan nilai yang kita inginkan jika hanya mengandalkan SeekBar saja, maka yang akan kita lakukan pada tombol-tombol tersebut ialah menambah variabel Number jadi langsung saja masuk pada opsi onclick pada setiap textview yang kita ubah menjadi tombol min dan plus.
MIN PLUS BUTTON
Pertama Kita mulai pada textview4 yaitu tombol minus (min). Buatlah variabel Number dengan nama apa saja dalam contoh ini saya menamakannya (n1) untuk Number kemudian susun bloknya seperti gambar berikut ini.
Susunan blok diatas adalah untuk mengurangi nilai dalam jumlah satuan dan untuk menambah atau fungsi pada tombol plus kita bisa Colect urutan blok diatas kemudian tempelkan pada opsi onclick pada tombol plus dengan catatan kamu ganti blok number decrease1 menjadi increase1 dan kamu terapkan juga pada tombol-tombol lainnya tapi jangan lupa untuk mengubah targetnya seperti seekbar1 setProgress menjadi seekbar2 atau 3 dan textview sesuai urutannya.
Sampai tahap ini semua sudah selesai, tinggal kamu perbaiki saja tata letak tampilannya jika menurut kamu itu kurang menarik. Dan buat kamu yang kesulitan memahami apa yang saya tulis diatas mohon maaf karena saya memang kurang pandai dalam menyusun kata atau kalimat, tapi untuk lebih jelasnya kamu bisa mempelajari tutorial ini langsung dari projek yang sudah saya buat dan kamu bisa mengunduh projek nya di link dibawah ini.
Atau juka kamu butuh penjelasan secara visual kamu bisa tonton video berikut ini.
Post a Comment for "Membuat kontrol tinggi dan lebar sebuah objek di Sketchware "