【GamePlay】Two ScrollView plugins, Super ScrollView & UIExtensions

foreword

Record the two scrolling list plugins that you have recently learned about, UIExtensions and Super ScrollView.

The former is not just a scrolling list, but an open source component library. The latter is specially extended for ScrollView, which is easier to use.

(Native ScrollView plus Content Size Fitter can also achieve basic scrolling effect)

UIExtensions

Link: https://github.com/Unity-UI-Extensions/com.unity.uiextensions
This is a UI component library, not just an extension of ScrollView, here only records the usage of scrolling list

Directory Structure

There are many components in this plugin, we only look at this

use

There is a little bit of disadvantage in this official example. The name of this example is too "generic". It is directly called Context and ScrollView, which made me think it was a general component at first. In fact, these several files are created separately for each ScrollView.

I will use my example as an example to make it clearer. It is not easy to see which structures are defined by the official example.

First of all, four files must be defined, the first four in the figure below, and the fourth is the UI control component.

The xxxScrollView is hung on the ScrollView component in the UI.
Create a prefab, hang xxxCell on the prefab, and hang it on the xxxScrooView, as shown in the figure below,

xxxContext is the data of this component.
xxxItemData is the data of each Cell.
When using it, specify it at the position in the figure below. At this time, you can go to the official example. The official example is directly named with Context. It is easy to make people think that it is a general-purpose infrastructure structure, but it is actually a structure that needs to be defined by itself.

The above is just the definition of the structure. If you want to update the data, you need to call the UpdateData of xxxScrollView (actually call the UpdateContents method in the extension), and you need to pass in a list of xxxItemData.

To customize what to do when updating in xxxCell, each Cell updates the UI according to the incoming data.

After understanding the relationship between these components, it is easy to use.

question

However, there is still a problem in the use process. The first time the game is started, the UpdateData of ScrollView is called to update the UI, but it always fails, and it will take effect after calling it again. So far, no problem has been found. . .

Super ScrollView

As far as the ScrollView function is concerned, this is more convenient than the one above, but this is charged.

The official examples are a bit messy, there are many useless things, and the core usage is not highlighted. It took me a long time to understand.

Directory Structure

The directory structure after the component is imported is as follows, where the Editor and Scripts directories are plug-in codes, and the Demo directory can be ignored. To

understand the core code, you only need to look at three files

use

First, hang LoopListView2 on the ScrollView you created.
Second, create a Cell prefab. The Cell in the figure below is just a Button.
Third, drag the prefab to the LoopListView2 component (there may be no Add New button, see the following question )

Fourth, write script initialization.
Here is the modified official Demo script. Remove redundant information and just call the initialization of the LoopListView2 component. You need to pass in the number and callback function. The function of this callback function is to display the current value in the ui When the object of index is called, this callback will be called. If five objects are added and initialized, it will be called five times with different indexes.
In this callback, you can set the information of each Cell by yourself. If you don’t set it, it will be shown in the figure below, and the structure of LoopListViewItem2 will be returned fixedly.
The commented out ItemData and ListItem2 are implemented by themselves, the former is data, and the latter is cell UI script.

If you want to use it yourself, you need to write this callback function in detail, define the data of the Cell and the UI display, get the data according to the index during the callback, and set it to the UI.

question

The Add New button on the LoopListView2 component is not displayed (it seems that I am the only one who has encountered this problem, and I thought it was not displayed on purpose after the component was updated...), just comment out the code in the figure below