Version: 2019.4
Создание интерфейса (UI) под разные разрешения экрана
Создание интерфейса на основе мировых координат (World Space UI)

Создание элементов интерфейса с подгонкой их размеров под их контент

Обычно при позиционировании элемента интерфейса с его Rect Transform-ом, его размер и позиция задаются вручную (опционально включая растягиваемость с родительским компонентом Rect Transform).

Однако, иногда вам может понадобиться сделать так, чтобы прямоугольник заполнял собою всю область содержимого определённого элемента интерфейса. Этого можно добиться путём добавления компонента под названием Content Size Fitter.

Подогнать под размер компонента Text

Чтобы включить Rect Transform содержащий компонент Text в область занимаемую текстовым контентом, добавьте компонент Content Size Fitter к тому же игровому объекту (Game Object), который содержит в себе компонент Text. Затем приведите Horizontal Fit, the Vertical Fit или сразу их обоих к желаемым значениям.

Как это работает?

Что здесь происходит, так то что компонент Text работает как компоновочный элемент (Layout Element), который может предоставлять информацию о том насколько велик его минимальный и номинальный размер. В ручной компоновке данная информация не используется. Компонент Content Size Fitter представляет из себя типа компоновочного контроллера (Layout Controller), который действует на основе информации, получаемой от компоновочных элементов (Layout Elements) и согласно этому управляет размером Rect Transform.

Запомнить расположение точки опоры

When UI elements are automatically resized to fit their content, you should pay extra attention to the pivot of the Rect Transform. The pivot will stay in place when the element is resized, so by setting the pivot position you can control in which direction the element will expand or shrink. For example, if the pivot is in the center, then the element will expand equally in all directions, and if the pivot is in the upper left corner, then the element will expand to the right and down.

Подогнать под размер элемента интерфейса с дочерним Text компонентом

Если у вас есть элемент интерфейса, такой как например Button (Кнопка), которому также в качестве заднего фона назначено изображение и дочерний игровой объект (Game Object) с Text компонентом, вы скорее всего захотите, чтобы данный элемент интерфейса целиком занял область, занимаемую текстом - может быть даже с некоторым уплотнением.

In order to do this, first add a Horizontal Layout Group to the UI element, then add a Content Size Fitter too. Set the Horizontal Fit, the Vertical Fit, or both to the Preferred setting. You can add and tweak padding using the padding property in the Horizontal Layout Group.

Зачем использовать горизонтальную компоновочную группу (Horizontal Layout Group)? Ну, она могла бы быть и вертикальной - пока есть всего один потомок, результат будет одинаковым как для той, так и для другой группы.

Как это работает?

The Horizontal (or Vertical) Layout Group functions both as a Layout Controller and as a Layout Element. First it listens to the layout information provided by the children in the group - in this case the child Text. Then it determines how large the group must be (at minimum, and preferably) in order to be able to contain all the children, and it functions as a Layout Element that provides this information about its minimum and preferred size.

Content Size Fitter принимает компоновочную информацию, предоставляемую любым компоновочным элементом одного и того же игрового объекта - в данном случае предоставляемую горизонтальной (или вертикальной) компоновочной группой. В зависимости от этих настроек, затем он управляет размером Rect Transform на основе этой информации.

Как только был установлен размер Rect Transform, горизонтальная (или вертикальная) компоновочная группа устанавливает позицию и размер его потомков, основываясь на доступном для этого месте. Для более подробной информации по тому, как управлять позицией и размером их потомков, посетите страницу документации, посвящённую горизонтальным компоновочным группам.

Подогнать размеры потомков компоновочной группы (Layout Group) к соответствующим им размерам.

Как вы поступаете в случаях, когда у вас есть компоновочная группа (горизонтальная или вертикальная) и вы хотите, чтобы каждый из элементов интерфейса занимал положенное себе место в отведённой ему области?

Вы не можете поместить компонент Content Size Fitter в каждого потомка. Причина заключается в том, что этому компоненту требуется управление его собственным Rect Transform-ом, но родительская компоновочная группа также требует управления над дочерним Rect Transform-ом. Всё это может вылиться в конфликтную ситуацию и привести к непредсказуемому поведению.

Тем не менее, это не так уж и необходимо. Родительская компоновочная группа может уже подогнать размер каждого потомка под необходимый размер. Что вам нужно сделать, так это отключить в компоновочной группе переключатели Child Force Expand. Если потомки сами по себе являются компоновочными группами, вам возможно придётся и для них отключить переключатели Child Force Expand.

Как только потомки перестают растягиваться, их выравнивание может быть отрегулировано в компоновочной группе путём изменения настройки Child Alignment.

Что если вам захочется, чтобы определённые потомки могли разворачиваться так, чтобы занимать дополнительное свободное пространство, а другие нет? Этого можно легко добиться путём добавления компонента Layout Element к потомкам, которым вы хотите добавить эту возможность, а заодно и добавить возможность гибко контролировать свойства Flexible Width или Flexible Height на этих Layout Element-ах. В родительской компоновочной группе (Layout Group) переключатель Child Force Expand должен быть по прежнему выключен, иначе все потомки по прежнему будут сохранять эту гибкость при своём разворачивании.

Как это работает?

Game Object может иметь сразу несколько компонентов, каждый из которых предоставляет компоновочную информацию о минимальном, номинальном и свободном размерах. Система приоритетов определяет какие одни значения влияют на другие. Компонент Layout Element имеет более высокий приоритет чем компоненты Text, Image и Layout Group, поэтому он может использоваться для перезаписи значений любой компоновочной информации, которую предоставляют те компоненты.

Когда компоновочная группа принимает компоновочную информацию, передающуюся ей потомками, она будет учитывать обновлённые свободные размеры. Затем, при управлении размерами потомков, она не сделает их крупнее их номинальных размеров. Однако, если в компоновочной группе активирована опция Child Force Expand, тогда у всех свободных размеров всех потомков будет возможность быть как минимум в значении равному 1.

Более подробная информация

На этой странице были даны решения для несколько общепринятых методов работы. Для более углублённого изучения авто компоновочной системы, ознакомьтесь пожалуйста со страницей UI Auto Layout.

Создание интерфейса (UI) под разные разрешения экрана
Создание интерфейса на основе мировых координат (World Space UI)