Unity Tutorial : UI Unity ~ Komponen UI Scrollbar

Komponen UI Scrollbar bisa disebut juga baris penggulung adalah adalah sebuah komponen berbentuk kotak yang digunakan untuk menggeser layar agar dapat menemukan isi/konten yang tersembunyi.

Komponen UI Scollbar sedikit berbeda dari komponen lainnya, karena dalam penggunaannya perlu ditambahkan beberapa komponen ke UI Scrollbar

Untuk lebih memahami penggunaan Scrollbar ikuti langkah-langkah di bawah.

MULAI

Tambahkan komponen UI Scollbar terlebih dahulu di jendela hirarki, Create - UI - Scrollbar.

Lihat jendela Inspektor - Rect Transform - Anchor Presets.

Atur posisi Anchor point berada di sebelah kanan atau sesuai selera masing-masing.

BACA JUGA : UI Unity : Anchor Point

Masih pada jendela Inspektor - Scrollbar(Script).

Atur posisi awal dan akhir scrollbar pada bagian Direction dan beri nilai nol pada Value, Size dan Number Of Step, alasannya agar posisi Scorllbar dimulai dari nol.

Buat sebuah objek kosong. GameObject - Create Empty.

Beri nama Layar info atau sesuai selera, Layar info ini adalah layar yang nantinya diakses oleh komponen UI Scollbar.

Kemudian Layar Info tadi diberi 3 komponen tambahan :

- Scoll Rect  : Berfungsi untuk pengaturan UI Scrollbar

- Image : Berfungsi sebagai tempat menyimpan konten (text, foto)

- Mask : Digunakan untuk membatasi penampil pada Layar Info.

Gunakan tombol "Add Component" pada Inspektor untuk mempermudah penambahan dan gunakan pula kotak pencarian.

Maka hasilnya seperti gambar di atas. Komponen sebelah kana adalah UI Scollbar dan yang berwarna putih adalah Layar Info.

Atur ukuran dan posisi scrollbar sesuai selera begitu juga ukuran dan posisi Layar Info.

Klik Layar Info pada jendela hirarki, kemudian lihat jendela Inspektor - Scroll Rect.

Tambahkan UI Scollbar ke Kotak Horizontall atau Vertical Scollbar. VCG Memilih Vertical Scrollbar karena pada pengaturan sebelumnya UI Scrollbar dibuat vertikal. 

Kemudian tambahkan konten ke Layar Info baik itu tulisan atau foto, VCG membuat konten tulisan/Text.

Klik Layar Info kemudian klik kanan - UI - Text. Jadikan konten sebagai sub-objek jadi Layar Info.

Klik konten Text kemudian lihat jendela inspektor - Rect Transform.

Atur area/ batas text pada menu Width dan Height. Atur batas sesuai panjang atau lebar dari text. 

Disini vcg mengatur batas lebar(width) disamakan dengan lebar Layar Info dan Height disesuaikan dengan banyaknya tulisan. 

Tahap selanjutnya adalah mengakses konten tadi agar dapat discroll melalaui UI Scrollbar. Klik Layar Info kemudian lihat jendela Inspektor - Scroll Rect. Tambahkan konten Text ke kotak content.

Disini VCG menuliskan Abjad dari A-Z secara vertikal.

Jika sudah, jalankan game dan gerakan Scrollbar, lihat yang terjadi.

SELESAI