Как поместить изображения для раскадровки, используя автоматическую компоновку?

Question

Я использую Sketch для создания образов, которые будут использоваться в моих раскадрах раскадровки Xcode 6. Однако я не могу получить правильные размеры изображений. Они всегда кажутся слишком большими и переполняют контроллер просмотра раскадровки. Есть ли способ в Xcode увидеть размеры, которые ожидает раскадровка? Существует ли систематический способ сделать это ... а не проб и ошибок?

Answer 1

Раскадровка, особенно в режиме автоматического макета, не ожидает каких-либо измерений - размеры будут зависеть от экрана устройства (в действительности) или от имитируемых показателей (в Interface Builder в Xcode).

Важным является соотношение сторон и наличие трех файлов ресурсов (три размера - регулярные, 2x и 3x).

Вы можете увидеть список измерений здесь: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Итак, предположим, что вы хотите вставить изображение, которое занимает всю ширину экрана, а высота выбирается автоматически таким образом, чтобы сохранить аспект соотношение. Что вы можете сделать:

1. Создание изображений в эскизе с шириной 320, 750 и 1242 пикселей. Сохраните их как image.png, image@2x.png, image@3x.png.
2. Вставить изображение в построитель интерфейсов (Storyboard), добавить ограничение ширины - равное супервизу, вместо ограничения высоты - сохранить пропорции.
3. Если изображение выглядит слишком большим, Interface Builder будет жаловаться, что изображение предварительного просмотра не соответствует ограничениям, вы увидите небольшую желтую стрелку. Нажмите на него, выберите предупреждение и нажмите еще раз - Xcode предложит вам «Обновить фрейм». При необходимости размер изображения будет изменен. Не забудьте выбрать правильный режим масштабирования (Aspect fit?) Для вашего изображения.

Кроме того, вы можете увидеть текущую ширину и высоту имитируемого экрана на вкладке «Метрики». Но они будут меняться каждый раз, когда вы измените свой тип предварительного просмотра (имитируемого).