24 December 2017

#13 Membuat Menu Navigasi 5 Kolom Di Sketchware Android

Halo juragan, kembali lagi di IDSketchware Tutorial Sketchware bahasa Indonesia.

Sebelum masuk ke pembahasannya, kita ingetin ke agan/sista semua, yuk rame-rame bangun blog ini supaya memberika ilmu dan manfaat pada banyak orang. Setuju gan?

Hari ini, kita akan ajarkan kepada agan2 semua cara membuat menu navigasi 5 kolom seperti yang dipakai oleh banyak aplikasi.

Menu navigasi 5 kolom adalah sejenis menu untuk berpindah dari satu layar ke lain (dalam satu hape), menu ini seperti tab tapi posisinya dibawah layar.

Nah, bijimana cara buatnya? Yuk OTW gan.



Selesai agan buat projek baru, agan masukkan textview dan linear(h) trus namain idnya ke "halaman" dan "navigasi".

Lalu pada linear, masukkan 5 imageview gan. Kita akan buat menu navigasi ala Instagram.


Karena disini kita belum punya ikon2, buat setiap imageviewnya, kita import ikon yang dibutuhin seperti home, search, kamera, hati, dan profil.



Namain imageviewnya home, search, kamera, love, dan profil, atur juga beratnya ke 1 ya.



Nah menu navigasinya udah nampak kan? tapi kalo dipencet2 kita nggak tau menu mana yang aktif, karena kita belum buat logicnya.

Sekarang kita pindah ke tab logic gan, disitu ada onCreate. kita masuk dan lansung buat blok lainnya namain "setHalaman".



Dan dibawah ada pilihan boolean tuh, ganti ke number dan namain "no".

jika udah seperti itu, agan save dan blok akan segera terlahir.



Pasang blok yang tadi dibuat dan ketik angka 1 pada buletannya.

Kembali ke tab logic, pencet tanda "+" yang atas, masukkin semua imageview yang ada. Diurut ya, biar gak bingung.





Terus, pasang blok setHalaman tadi ke setiap imgaviewnya da isi buletannya dengan nomor seperti ini.



Sampek sini kita sudah salesai memasang blok buatan kita sendiri. Tapi, blok yang kita buat belum ada fungsinya / unfaedah. trus macam mana nak buat fungsinya? Macam ni.

Liat deh pada tab logic dibawah onCreate ada setHalaman yang udah ada dari tadi.Masuk aja, disini fungsi blok kita buat.



Disana ada blok ungu bertuliskan "no" yang kita buat saat bikin blok ini. di dalamnya berisi nomor/ angka yang akan berubah ketika salah satu imageview kita pencet.

Pertamax+, buat susunan fungsi seperti ini, ini akan kita copaskan biar cepet.



Isikan ubah Alpha atas angka 1 dan yang bawah 0,5.

Terus, agan tap "copy" dan tap blok warna kuning dan paste, lalu pasang dibawahnya.



ulangi sampai 5 biji sebanyak jumlah imageviewnya.



Lalu agan lengkapin kayak diatas, kelar.

Coba run gan, pada saat aplikasi dibuka menu yang aktif adalah home, coba pencet2 imageview lainnya.

Menu yang gak aktif akan terlihat abu2 dan yang aktif hitam.

Gimana gan? Mudeng gak?

Gampang kan? Kalo belum paham tulis di kolom komentar ya gan. Sekian gan, untuk pertemuan kali ini. Good bye, ane cabut thanks gan.

8 comments:

  1. Supaya lebih mudah difahami, alangkah baiknya jika disertai dengan video. Tolong tambahkan video dalam blog agan ini. Trima kasih

    ReplyDelete
  2. Gan block nya kok beda ya? Cuma sethalaman gak ada buletannya

    ReplyDelete
    Replies
    1. Saat buat Block coba add/tambahkan variabel angka juga

      Delete
  3. Cuma gua yg gagal paham😂
    Ini perintahnya baru menandakan button/imagekey sedang aktif yg di tandai bahwa sudah aktif di halaman sekian.. jadi mesti buat halaman lgi tuh agar tombolnya berfaedah🙊

    ReplyDelete
  4. Good tutorial nya jadi ini bisa membuat kita dengan gampang membuat sebuah aplikasi unik tentunya tapi gan kalau bisa buat tutorial pasang iklan adsense atau lainya yang pas di bluid bisa muncul dengan id device yang melakukan pemasangan apk tersebut

    Smart thingking

    ReplyDelete

Makasih gan udah ngunjungin blog aner, silakan gan komennya / request tutorial / saran masukan wat blog ane ya gan
.