Начнем с текстового блока, потому что он самый простой. На нем мы и посмотрим работу автолейаутов.
Я отставил и разгрупировал текст, чтобы сделать все заново. Мы уже определились, что контейнер у нас будет 640 пикселей, потому что это принятый удобный размер для чтения в вебе. Здесь у нас описание самой статьи, поэтому “размер” ставим 25.
Дальше у нас идет еще один блок с текстом, но он уже с заголовком. На данном этапе давайте определимся с тем, какие отступы мы хотим видеть на сайте. Допустим, отступ от заголовка до текста у нас будет — 15 пикселей. Между главами текста мы сделаем большой отступ — 60 пикселей. В автолейаутах надо исходить из меньшего отступа, который есть на сайте. Это мы предусмотрели в первую очередь, потому что большие отступы поправить можно позже. Сейчас я расскажу как.
Нам нужен прозрачный шейпик. Я думаю, все его знают по добавлению в край блока, который листается вправо.
Итак, мы группируем нужные объекты и делаем нашу группу “объектом” — выбираем “Object (Beta)” в GROUP. После этого добавляем сам автолейаут — во FLEX жмем Auto и настраиваем отступы. Так и сформировался наш автолейаут. Сейчас расскажу как здесь все устроено.
В главном тексте, от заголовка до текста, отступ — 15 пикселей по автолейауту. Выше отступ — 60 пикселей. Он получился за счет того, что отступ от текста до нашего шейпа — 15 пикселей, столько же и от шейпа до заголовка + сам шейп — 30 пикселей. В общем и получается 60.
Это расстояние можно редактировать с помощью увеличения шейпа. Так как отступы у нас по автолейауту — 15 пикселей, то следующие главы нам нужно скопировать вместе с этим шейпом.
Допустим, мы еще хотим добавить изображение. Сперва добавим отступ, чтобы оно не прилипало к тексту, но сделаем его чуть меньше — 10 пикселей.