current position:Home>Unity zero foundation to advanced [UI system learning] ugui layout element introduction and simple example

Unity zero foundation to advanced [UI system learning] ugui layout element introduction and simple example

2021-08-22 22:38:21 Silly little y Typing Code

???? introduction


????Layout Element Introduction to layout elements

The official introduction : If you want to override the minimum, preferred, or flexible size of a layout element, you can do that by adding a Layout Element component to the GameObject. A layout controller allocates width or height to a layout element in the following order:

  • First, the layout controller allocates the minimum size properties (Min Width, Min Height).
  • If there is sufficient available space, the layout controller allocates the preferred size properties (Preferred Width, Preferred Height).
  • If there is additional available space, the layout controller allocates the flexible size properties (Flexible Width, Flexible Height).

translate : If you want to override the minimum of layout elements 、 Preferred or flexible size , You can do this by adding layout element components to the game object . The layout controller assigns width or height to layout elements in the following order :

  • First , The layout controller assigns the minimum size attribute (Min Width,Min Height).
  • If there is enough free space , The layout controller assigns the preferred size attribute (Preferred Width、Preferred Height).
  • If there is additional free space , The layout controller assigns flexible size attributes ( Flexible width 、 Flexible height ).

Property:

Function

Ignore Layout

When enabled, the layout system ignores this layout element.

Min Width

The minimum width this layout element should have.

Min Height

The minimum height this layout element should have.

Preferred Width

The preferred width this layout element should have before additional available width is allocated.

Preferred Height

The preferred height this layout element should have before additional available height is allocated.

Flexible Width

The relative amount of additional available width this layout element should fill out relative to its siblings.

Flexible Height

The relative amount of additional available height this layout element should fill out relative to its siblings.

Layout Priority

The layout priority for this component. If a GameObject has more than one component with layout properties (for example, an Image component and a LayoutElement component), the layout system uses the property values from the component with the highest Layout Priority.If the components have the same Layout Priority, the layout system uses the highest value for each property, regardless of which component it comes from.

  • Ignore Layout Ignore layout : When enabled , The layout system ignores this layout element .
  • Min Width Minimum width : The minimum width that this layout element should have .
  • Min Height Minimum height : The minimum height that this layout element should have .
  • Preferred Width Preferred width : Before allocating additional available width , The preferred width that this layout element should have .
  • Preferred Height Preferred height : Before allocating additional available heights , The preferred height that this layout element should have .
  • Flexible Width Flexible width : The relative amount of extra available width that this layout element should fill relative to its sibling elements .
  • Flexible Height Flexible height : The relative amount of additional available height that this layout element should fill relative to its sibling elements .
  • Layout Priority Layout first : The layout priority of this component . If one GameObject There are multiple components with layout properties ( for example , One Image Components and a LayoutElement Components ), The layout system uses data from the highest Layout Priority Property value of the component . If the components have the same Layout Priority, Then the layout system is each ​​ Attributes use the highest value , No matter which component it comes from .

Layout elements include 7 Attributes , The top 6 The first attribute is the setting of the size information of each layout element , It is generally used for layout controller to set its size and position .

  1. Layout There are two core elements involved , Including layout controller (Layout Controller) And layout elements , The layout controller includes a horizontal layout group 、 Vertical layout group and grid layout group ; Layout elements (Layout Element) It's those with Rect Transform The object of the component , Not just those with Layout Element The object of the component .
  2. Layout elements do not change their size , Instead, the layout controller controls the layout according to the size attributes of the layout elements ( Minimum width and height ( Set according to the pixel size )、 The most suitable width and height ( Set according to the pixel size )、 Retractable width and height ( Set according to weight )) To assign the corresponding size and location . Layout group ( Layout controller ) Will meet the minimum size of all layout elements .
  3. Flexible Width and Flexible Height Is to set the expansion size by weight , That is, if the layout group has configured the most suitable width and height of all layout elements, there is still space left , The remaining controls will be allocated the remaining space according to the scalable control weight of each layout element .
  4. Ignore Layout, That is, this layout element does not participate in the layout of the layout group .
  5. Text (Text) And images (Image) default Preferred Width and Height Are the number and size of text and pictures .

????Layout Element Examples of use

  • What I use in this component at present is Ignore Layout
  • When an object uses a layout controller , The position of subclasses cannot be changed
  • Then we can add... To a child object Layout Element
  • This is the time , This sub object is no longer affected by the layout controller , Free placement
  • This function is easy to use in some special cases , Here's a demonstration , Look at the effect

Example : There is an object Panel Added Grid Layout Group Grid layout controller , It has three sub objects

because Grid Layout Group Is to lock the size and position of sub objects , Therefore, changing the size of sub objects will not change at this time

But we add... To one of the child objects Layout Element , And check the Ignore Layout after , The child object is out of control of the parent object

And you can freely control the size and position , Completely free !


???? summary

The content of this article is for UGUI Medium Layout elements Layout Element A simple introduction and use example

This component has many more uses , Here is just a super simple usage

Because I haven't met a good need to use this component at present , So let's briefly introduce these , In the future, we will continue to fill the pit !

Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .

copyright notice
author[Silly little y Typing Code],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822223818911o.html

Random recommended