Tips for using ugui (V) using scroll rect component

In function development , Because you may need to display a lot of data , But an interface cannot be displayed , You will often encounter a list that needs sliding , Such as Backpack , Rankings, etc , These places are basically used Unity3D Of Scroll Rect Component to realize sliding function . besides ,Scroll Rect There are also some tips , Can be used to slide text , picture , Achieve some other functions .

One 、 Basic usage

Frequently used components ：Scroll Rect、Mask、GridLayoutGroup

First Unity Of Hierarchy Panel Canvas Next create a Scroll View, Right click UI->Scroll View（ Because I don't need a slider , So I deleted it Scrollbar Horizontal and Scrollbar Vertical）, And then in Scroll View Under the Content Add... Under sub object GridLayoutGroup Components , Then add your sub objects to Content Next , such , The simplest sliding frame is done . Of course , You can also create empty objects , Add... Yourself Scroll Rect、Mask、GridLayoutGroup Component to implement the function of the sliding box .

The main idea is ：Scroll Rect The assembly is responsible for sliding ,Scroll Rect Under components Content Is the sliding area ,Horizontal and Vertical The two parameters determine whether the sliding is left or right , Slide up and down ,MovementType Is a sliding type .Mask The component is responsible for controlling the visible area .GridLayoutGroup Components are responsible for the distribution of sub objects .

Two 、 Tips ： Controls the sliding of text

In development , Maybe yours UI The interface needs to show a lot of things , But there is no place to show you , You'll cover something else , Or something else will cover you . As described , Chinese translation into English , The name is added with district service, etc , You can change the text to slidable .

Frequently used components ：Scroll Rect、Mask、ContentSizeFitter

The principle of controlling text sliding is similar , It's just that there's no need to Content Add distribution components on GridLayoutGroup, But in Content Create Text, stay Text Add ContentSizeFitter Components , Set up HorizonttalFit Property or VertiaclFit attribute . So you can drag and drop the text to see the blocked content .

3、 ... and 、 Tips ： Control the sliding of the picture

In development , When you encounter a large background picture , It's over Canvas Range , If the size is fixed, some things will not display completely , If you show everything in one Canvas in , In the embarrassing problem of compressing the graph to a very small size , Maybe it can be achieved by sliding the background image . Like a little map , Some background pictures, etc .

Components used ：Scroll Rect、Mask

stay Content Create a picture under , This picture is the background you want to drag . There is no need to add other components ,ScrollRect The other properties of are set according to your specific situation .

Be careful ：Mask stay ViewPort Next ,ViewPort The size that should be set is yours Canvas Size （ Specific personal settings ）,Content Is a range that can be dragged ,Image The size is the size of your picture , I set the two objects to the same size .

Hey , So you can see all the background pictures .

The above is what I often use in projects Scroll Rect Component tips . If you have more Scroll Rect Component usage tips , Looking forward to your sharing ！