[unity3d] nested use layout group to make scroll view with dynamic sub object height

notes ¹： This solution refers to StackOverFlow

notes ²： This solution only uses UGUI Built in components , No wheels

notes ³： Use UGUI Self contained Scroll View Components , because Scroll View and Content All are Unity Own naming , Therefore, its specific functions will not be repeated

demand

Build a chat interface or other needs according to the specific height of the sub object （ The width is the same ） Dynamically changing interface

Desired effect

Problems encountered

Because the usual practice is ScrollView Under components Content Mount a （Grid/Horizontal/Vertical）LayoutGroup, And then by adjusting LayoutGroup To control the width and height of the sub object , This will cause each sub object to have the same width and height , It is impossible to calculate the height of the sub object （ For example, according to the sub object Text Automatically adjust the height of the whole sub object by the number of words on , So as to adjust the whole ScrollView Height ）

Solution

ScrollView Under the Content mount ContentSizeFitter （Vertical Fit = Preferred Size） and Vertical Layout Group（Child Controls Size Width / Height = true）,ContentSizeFitter The main function is to adjust according to the width and height of the sub object Content The width and height of ,Child Controls Size Let the sub object control its width and height by itself , Be careful not to choose Child Force Expand , Otherwise, the width and height of the sub object cannot be controlled .

The chat interface is generally composed of avatars and dialog boxes , Then we can go through Add... At the root node Horizontal Layout Group（ Because avatars and dialog boxes are generally horizontally arranged ）, then Dialog add Vertical Layout Group To control their own vertical height .

You will find Head portrait RectTransform Neither width nor height can be set 了 , Because you use the root node of the sub object Horizontal Layout Group Controls the layout of the avatar and dialog .

It is also easy to set its width and height , as long as Mount on the avatar Layout Element , Then adjust it Min Width/Min Height and Preferred Width/Preferred Height that will do .

A little trick

Now the chat interface is filled from top to bottom ( namely Pivot = (0.5,1)), If you want to go from bottom to top , You need to adjust the parent object Pivot = (0.5,0), The principle is unknown , Please also teach me

Final effect

From the original CSDN Blogger 【 I want to play games with my hair 】https://blog.csdn.net/weixin_37658157/article/details/104558947 Reprint please indicate the source