Noveo

Наш блог Верстка надписей в iOS

Верстка надписей в iOS

Наш iOS-разработчик Дмитрий совсем недавно (буквально-таки вчера) поделился с нашей iOS-командой своими наработками по верстке надписей. Мы считаем, что димины наблюдения могут быть полезны не только нам, и решили поделиться статьей :) Дима ни в коем случае не претендует на безупречность своих соображений, но будет действительно рад, если они будут полезны нашим читателям.

Статья, конечно, интересна в первую очередь тем, кто непосредственно разрабатывает под iOS. Заинтересовавшихся обрадуем, что статья будет большая, ждите вторую часть на следующей неделе!

В статье изложены приемы, которыми я пользуюсь при верстке разных контролов, содержащих текст. Это кнопки (UIButton), поля ввода (UITextField), текстовые вьюхи (UITextView), но в основном это надписи (UILabel). Контролы создаются и размещаются на вьюхах согласно дизайну приложения – набору psd-файлов для фотошопа. Обычные картинки (png, jpg) тоже можно использовать для этой цели, но из них можно получить далеко не всю нужную информацию. Необходимый инструмент для работы с psd-файлами – это фотошоп. Гимп, к сожалению, не может его заменить в полной мере из-за слипающихся слоев, невозможности узнать название и размер шрифта надписей и других проблем. Чтобы добавить на вьюху надпись, соответствующую дизайну, необходимо знать название и размер шрифта надписи, ее позицию и размер. Открываем фотошоп с икскодом и приступаем.

tumblr_inline_nmjgkz2B9L1soatkc_540
Картинка с обозначенными уровнями (a – i), на которые будет ссылаться последующий текст

Название и размер шрифта

С получением этих значений проблем быть не должно. Выбираем инструмент “Type Tool”, тыкаем по надписи и смотрим название на панели инструмента. Даже если шрифт отсутствует в системе, фотошоп покажет диалог-алерт с его названием и сменит текущий выбранный размер шрифта на панели инструмента на размер надписи после закрытия диалога. Только не нужно соглашаться на замену шрифта – тогда изменится и значение размера. Остается определить размер UIFont-шрифта, который соответствует размеру шрифта в фотошопе.

Если спросить гугл о том, что такое размер шрифта, то наиболее внятным будет следующий ответ: размер шрифта определяет расстояние(между уровнями b и h) чуть большее, чем вертикальное расстояние от верхней точки (уровень c) символа, выступающего вверх больше остальных, до нижней точки (уровень g) символа, выступающего вниз больше остальных. Перечисленные уровни на картинке указаны только для примера: шрифт может иметь другие символы,более высокие, чем ”k”, или более низко расположенные, чем ”y”. Кроме того, это определение не совсем точное, и существует множество исключений1; набранный символ может иметь высоту, превышающую размер его шрифта. К счастью, на дальнейшие выводы это не влияет.

Размер шрифта можно выразить в разных единицах измерения. Фотошоп по умолчанию2 использует для этого точку (point), единицу измерения, приблизительно равную одной семьдесят второй части дюйма. Если создать в документе фотошопа надпись с размером шрифта 72 точки, то она должна полностью вместиться в прямоугольник с высотой один дюйм. Соответствие между пикселем (единицей, в которой мы привыкли измерять расстояния на картинках) и дюймом задается разрешением – величиной, равной количеству пикселей, которые вмещаются в дюйм.

image

В каких же единицах измеряется размер шрифта UIFont? В документации говорится, что размер шрифта ‑ это “desired size (in points) of the newfont object”. Если это те же самые points, используемые фотошопом, то для проверки достаточно добавить на вьюху UILabel, задать ей размер шрифта 72 точки и запустить проект на 3.5-дюймовом айфоне. Текст3  должен растянуться по вертикали на один дюйм (треть от физической высоты экрана, составляющей 3 дюйма), но текст имеет гораздо меньшую высоту. На самом деле в UIFont используются те же самые points, которыми измеряют координаты и размеры вьюх. То есть текст со шрифтом 72-го размера должен вместиться во вьюху с высотой 72 точки.

image

Остается лишь определить зависимость между точками фотошопа и точками в iOS. Исходя из вышенаписанного можно предположить, что точка вдокументе фотошопа с разрешением 72 dpi4 (и с размерами 320х480)5 будет иметь тот же размер, что и точка в iOS-приложении, то есть размеры шрифтов такого документа и приложения в точках будут совпадать. Например, текст в фотошопе с размером 36 точек займет 36/72 = полдюйма по вертикали. А так как с заданным разрешением в дюйм вмещается 72 пикселя, то в полдюйма влезет 36 пикселей – что и будет размером UIFont-шрифта в точках.

В клиентских psd-файлах может быть установлено какое угодно разрешение, отличное от 72 dpi, и произвольный размер документа в пикселях. Можно было бы задать новый размер и новое разрешение – 72 и без проблем определять размеры шрифтов надписей, но фотошоп версии CS6 (а возможно, и других версий) неправильно изменяет размеры шрифтов после смены параметров документа. Особенно это заметно, если после смены продублировать имеющуюся надпись новосозданной с таким же размером.

image

Решение проблемы – не изменять документ, а использовать формулу

S = s ∙ (r / r0) ∙ (w0 / w)

Где S (точки) – размер шрифта в iOS, s (точки) – размер шрифта в фотошопе, r (dpi) – разрешение документа, r0 (dpi) – константа равная 72, w0 (точки) – ширина экрана соответствующего i-девайса (то есть 320 для айфона и 768 для айпада), w (пиксели) – ширина документа6. Для UIFont можно задать дробный размер, но изменение размера шрифта на 1 единицу будет практически незаметно для человеческого глаза. Поэтому полученное значение стоит округлить до ближайшего целого, чтобы не возиться с дробными значениями. Формула отлично показывает себя на практике; с какими бы шрифтами и размерами я ни имел дело, сверстанный текст в интерфейсе по размеру соответствовал тексту из дизайна, и исключений я пока не наблюдал.

Сверстанная надпись и документ с нестандартными параметрами 1000×3000; 200dpi
Сверстанная надпись и документ с нестандартными параметрами 1000×3000; 200dpi

А о размере надписи, позиционировании и таблице шрифтов читайте во второй части!

  1. Буквы с диакритическими знаками и всякие закорючки зачастую выходят за границы высоты шрифта; из стандартных iOS-шрифтов выделяется Zaphino, рвущий все ограничения даже обычными латинскими буквами.
  2. Еще может измеряться в пикселях и миллиметрах, но эти единицы измерения не рассматриваются.
  3. Именно текст, а не контрол-надпись.
  4. dpi = dots per inch, количество пикселей на дюйм.
  5. Чтобы избежать путаницы, будем использовать размеры простых экранов, не ретины.
  6. Конечно, можно использовать высоту вместо ширины.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

НазадПредыдущий пост ВпередСледующий пост

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: