This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Recommended reading

  • CSDN home page
  • GitHub open source address
  • Unity3D plugin sharing
  • Jane’s address book
  • My personal blog
  • QQ group: 1040082875

Hello everyone, I am a Buddhist engineer ☆ quiet small magic dragon ☆, update Unity development skills from time to time, think useful remember one key three link oh.

One, foreword

First, introduce a UGUI, NGUI is the predecessor of UGUI, Unity development team took NGUI development team under their own development team, and developed UGUI from this. The UGUI system has only been integrated into the Unity editor since Version 4.6.

UGUI features:

  • flexible
  • fast
  • visualization

There are many advantages for developers, such as:

  • High efficiency
  • Achieve good results
  • Easy to use and expand
  • High compatibility with the Unity editor

Scrollbar Component introduction

Scrollbar is a component used to display progress, mainly used to display the current content in the overall content of the scale or location.

A control that is primarily used to visually drag to change the target scale. Its best use is to change an overall value to its specified percentage scale, with a maximum value of 1 (100%) and a minimum value of 0 (0%). The drag slider can change between these, such as changing the display area of the scrolling view.

Scrollbar The Scrollbar component is usually used in conjunction with the ScrollView component to display content.

Next, in Unity’s Hierarchy view, select “Create→UI→Scrollbar” to Create a Scrollbar component:The Hierarchy result of Scrollbar in Hierarchy view is as follows:

object introduce
Scrollbar Slider assembly.
Sliding Area The sliding area of the slider.
Handle slider

Let’s look at the properties of the Scrollbar component in detail.

Scrollbar Component properties

Scrollbar The Scrollbar component consists of the Image component and the Scrollbar component. The Image component shows the background of the Scrollbar, which will not be detailed. Here’s a look at the Scrollbar component:Interactable, Transition, and Navigation are similar to Button components, as explained in the Button tutorial.

attribute introduce
Handle Rect The slider object used to drag
Direction Scroll bar orientation can be set from left to right or top to bottom.
Value The value of the current position of the slider
Size The zoom size of the slider
Number Of Setps Specifies the number of scrollable positions. the number of scrollable positions. 0 and 1 are invalid.
On Value Changed Listen for functions that fire messages when values change.

The Number Of Setps attribute:

Specifies the number of scrollable positions. the number of scrollable positions. 0 and 1 are invalid.

Principle: The scrollbar area is 100%, and the length Of each move is the value Of the Number Of Setps divided by 100.

For example, if the Number Of Setps is set to 10, then the length Of each move is:

10/100=1/10, so each move is 1/10 of the length: