Version: 5.6
Создание интерфейса (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.

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

В момент когда элементы интерфейса автоматически меняют свои размеры, чтобы уместиться в нужный им контент, вам нужно обратить особое внимание на точку опоры Rect Transform. Точка опоры останется на месте после того как элемент изменит свои размеры, поэтому установив позицию точки опоры вы можете управлять в каком направлении элемент будет развёрнут или свёрнут. Например, если точка опоры находится в центре, тогда элемент будет растягиваться равномерно во всех направлениях. Если же точка опоры будет находиться левом верхнем углу, тогда элемент будет растягиваться вправо и вниз.

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

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

Чтобы сделать это, сперва нужно добавить горизонтальную компоновочную группу к элементу интерфейса, затем также добавить и компонент Content Size Fitter. Установите требуемые значения для Horizontal Fit, the Vertical Fit или сразу для них обоих. Можете добавить и подкорректировать уплотнение (padding) используя свойство padding в Horizontal Layout Group.

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

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

Горизонтальная (или вертикальная) компоновочная группа (Layout Group) вкупе функционируют и как Layout Controller (компоновочный контроллер) и как Layout Element (компоновочный элемент). Первым делом он принимает компоновочную информацию от потомка группы - в данном случае потомка компонента Text. Затем он определяет насколько крупной должна быть группа (минимум и номинально), чтобы суметь вместить в себя всех потомков, и функционирует он как компоновочный элемент (Layout Element), который и предоставляет о том, насколько большой (минимум и номинально) должна быть эта группа.

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)