Правильный масштаб изображения и шрифта на разных устройствах?

Question

У меня есть простой вид с текстом и изображением. Я запустил это приложение на iPhone6Plus и iPhone5. Затем я сделал снимок экрана и увеличил скриншот iPhone5 таким образом, чтобы он соответствовал размеру скриншота из iPhone6Plus. Вот результат:

Как вы можете себе размер текста размера изображения и есть позиции не идентичны, но они должны быть выглядеть так же на другом экране размера.

Вот пример weather app работает на разных экранах:

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

Изображения загружается из каталога активов:

imageView.image = UIImage(named: "shower3") 
self.view.addSubView(imageView) 
imageView.center = self.view.center 

Я только создал 128x128 изображение и поместить его в версию @ ой в Cataloge активов.

Позвольте мне перефразировать это. Я запускаю приложение wether на iPhone5, чтобы сделать снимок экрана и iPhone6 ​​сделать скриншот. Затем я изменяю размер скриншотов одинакового размера. Затем я вижу, что как размер шрифта, так и размер изображения в точности равны на обоих снимках экрана. Это означает, что на каждом устройстве шрифт и изображение должны иметь разные размеры. Как я могу это сделать?

Как добиться того, чтобы текст и изображение имели одинаковые пропорции на разных размерах экрана? Как это делает Weather App?

Answer 1

iOS использует points для расчета размера изображения и размера шрифта. На экране без сетчатки 1 точка равна 1 пикселю, на сетчатых экранах - 2 пикселя, а для iPhone 6 Plus она равна 3 пикселям (хотя применяется некоторое масштабирование). Если вы хотите, чтобы масштабировать изображение и шрифт, основанный на фактическом пикселей размер экрана, вы можете получить число пикселя в точке, как это:

CGFloat screenScale = [[UIScreen mainScreen] scale]; 

iPhone 5, 6 и 6 Plus формат экрана отношения одинаковы, а разрешения различаются. Если вы хотите просто сохранить пропорции, вам нужно выбрать ширину или высоту «базового» экрана (скажем, ширину экрана iPhone 5, что составляет 320,0 балла), а затем рассчитать пропорцию, разделив фактическую ширину экрана устройства (скажем, ширина экрана iPhone 6 Plus, что составляет 414,0 балла) по этой «базовой» ширине (414,0/320,0 = 1,29375). Вы можете получить размер экрана, как это:

CGRect screenBounds = [[UIScreen mainScreen] bounds]; 

Разделив ширину screenBounds «s по ширине основания дает пропорцию. Затем вы просто умножаете все размеры и поля с той пропорцией (1.29375 в нашем случае для iPhone 6 Plus). Надеюсь, вы получите эту идею.

P.S. Хорошим руководством к разрешениям является here.

P.P.S. И в вашем случае, как сказал skorolkov ниже, приложение просто расширяет все для больших экранов (добавьте/удалите всплывающие экраны, чтобы включить/отключить это масштабирование).

UPD: Хорошо, теперь я вижу, что вас смущает.Вот что: когда Apple изначально выпустила iPhone 6 и 6 Plus, многие приложения не поддерживали их большие экраны и большие разрешения. Поэтому они решили, что если в приложении отсутствуют экраны заставки , конкретно, сделанные для этих телефонов, он должен использовать разрешение iPhone 5.

Вот почему вы получаете точные снимки после ручного изменения размера скриншотов: система тоже делает это. Он просто берет iPhone 5 'picture' и растягивает его так, что он подходит для больших экранов. Недостаток ясен (и заметен, особенно на iPhone 6 Plus): шрифты и изображения размыты и масштабируются (элементы системного интерфейса, такие как строка состояния, также получают масштабирование). Таким образом, в основном вы получаете изображение iPhone iPhone 5 на всех устройствах с большим экраном (вы можете проверить это, сделав снимок экрана на iPhone 5, изменив его размер вручную, чтобы он соответствовал разрешению iPhone 6/6 Plus и сравнил фактический iPhone 6/6 Plus скриншот к нему).

Чтобы быть ясным: это поведение, которое вы сейчас получаете, но это не хорошо. Чтобы все было правильно масштабировано с использованием собственного разрешения устройства, используйте описанный выше метод (ручное умножение) или автозапуск с /width, установленным в соответствии с желаемыми коэффициентами для элементов интерфейса.

Answer 2

Вам необходимо установить ограничение макета на все виды, чтобы они отображали одинаковые места и размеры во всех размерах экранов при условии, что соотношение сторон экранов одинаково.

Answer 3

Вы пытались удалить функциональность из вида autoResizing? Нажмите на внутреннюю стрелку, чтобы удалить autoResize вид, как на надтаблицы

Answer 4

1. Сначала отключить автоматическую раскладку, автоматическое изменение размеров и классов размера в раскадровке.
2. Нажмите на значок Images.xcassets и выберите все свои графики. В инспекторе атрибутов задайте свойство Devices для «Device Specific» и установите флажок напротив «iPhone» и «Retina 4-inch».
3. Поместите всю свою графику в набор изображений 2x. Вы можете разместить изображение с более высоким разрешением для улучшения результатов с помощью iPhone 6/6 +.
4. Создайте свой вид для справочного устройства, скажем, iPhone 5 (портрет 320x568).
5. В вашем методе viewDidLoad вставьте следующий код

self.view.transform=CGAffineTransformScale(CGAffineTransformIdentity,self.view.frame.size.width/320, self.view.frame.size.height/568);

И вы будете иметь тот же результат на iPhone 5/5S, iPhone 6/6 +.

Answer 5

Приложение, на которое вы ссылаетесь, неправильно поддерживает несколько размеров экрана. Интерфейс масштабируется для работы на 6 и 6 плюс, поэтому все выглядит одинаково.

Посмотрите на скриншоты из вашего приложения - строка состояния намного меньше по 6 плюс. Это потому, что предположил, что занимает меньше места на экране. Это 20 очков на всех устройствах.

Теперь посмотрите на скриншот из приложения погоды - строки состояния имеют одинаковый размер. Поскольку приложение погоды не поддерживает несколько размеров экрана, iOS просто берет меньший интерфейс и масштабирует его, чтобы заполнить экран.

Если вы хотите добиться того же эффекта (чего не следует), удалите файл LaunchScreen.xib и используйте вместо него изображение запуска. Но люди не покупают более крупные звонки, потому что хотят иметь один и тот же контент, но больше. Это было бы достигнуто дешевле, просто держа телефон ближе к лицу.

Вы должны использовать более крупные дисплеи, позволяя одновременно отображать больше содержимого на экране - больше строк данных в таблице, больше текста из книги, больше изображений из библиотеки фотографий.

В случае приложения погоды дополнительное пространство должно использоваться для отображения большего количества рядов почасового прогноза или чего-то еще, а не просто более крупной версии довольно бесполезного значка с изображением типа погоды.

Я подозреваю, что это только поддержка игр, что означает, что поддержка больших экранов должным образом не является обязательным условием для представления магазина приложения. Поддержка 4-дюймового экрана стала обязательной довольно быстро, вы должны ожидать, что аналогичное правило будет введено для 6 и 6 плюс до слишком долгого.

Если вы хотите, чтобы определенный элемент всегда занимал 50% ширины экрана или метка всегда был того же размера, что и изображение, тогда вы используете ограничения автоопределения с помощью множителей . Autolayout ограничение базовой структуры:

attribute of A = (attribute of B * multiplier) + constant 

Большую часть времени мультипликатор осталось как один, так что вы просто сказать, что это 20 очков слева, что, или что угодно, но вы можете используйте множитель, а также скажите, что A - ширина B, умноженная на 2 или 0,5 или что угодно.

Answer 6

Приложение Weather использует высококлассный режим для работы на iPhone 6+. Вы можете включить его, удалив экраны запуска для 6/6 +.

Перейдите в каталог активов, выберите изображение запуска и снимите флажок «iOS 8 или более поздняя версия» в «Инспекторе атрибутов».

Screenshot - your app has this set

Screenshot from WeatherApp

Answer 7

Изображения

Я создатель и один из разработчиков Swift Weather app. Приложение не использует три версии изображений, потому что я не делал эти изображения, и это был запрос Pull от другого разработчика. У меня нет исходных изображений.

Адрес: @Daniil Korotin Оплаченный адрес: iOS points для расчета размера изображения и размера. iOS использует let screenScale = UIScreen.mainScreen().scale для извлечения масштаба экрана и получения правильного размера (1x, 2x или 3x) изображения. Если мы не обеспечиваем надлежащий размер изображения, например, в приложении SwiftWeather, у нас есть только 1-кратная версия изображения (как снимок экрана ниже), iOS будет масштабировать изображение для рендеринга на сетчатых устройствах. На iPhone 6 Plus он фактически уменьшает выборку для 3x активов. Пожалуйста, посмотрите на iPhone 6 Screens Demystified. В некоторых случаях, если вы не предоставляете изображения 2x или 3x, на устройствах сетчатки изображение, увеличенное с 1x, может выглядеть размытым. Мы всегда должны предоставлять изображения 1x, 2x и 3x, если это возможно.

шрифты

IOS делает шрифты в соответствии с указанным points. Он автоматически преобразует точки в определенный пиксель на основе экранной шкалы устройств (как упоминалось выше).

Как достичь этого текста и изображения с одинаковыми пропорциями на разных размерах экрана? Как приложение Weather работает? Ответ Auto Layout

Вы можете увидеть, мы устанавливаем ограничения для представления изображений (используется для иконки погоды), как показано ниже. Ширина и высота всегда 150 points, обратите внимание, что это points или pixels. Он будет иметь тот же размер (для внешнего вида, а не для ровно пикселей) для разных устройств. Для вашего первого изображения (iPhone 6 Plus против iPhone 5), он выглядит иначе, потому что, может быть, ваши симуляторы имеют разный масштаб. Лучший способ проверить, как элементы автоматического макета лежат на экране, - использовать Preview в Interface Builder.

Откройте главное раскадровки, и нажмите на помощника редактора. В правой части выберите «Предварительный просмотр» (вверху слева). И щелкните знак плюса (в левом нижнем углу), чтобы добавить разные устройства. Вы можете видеть, что они имеют одинаковые пропорции на разных размерах экрана.

Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать.

Что-то может быть не по теме

Если я проектировать изображения/активы, я хотел бы использовать некоторые векторные базовый инструмент, как эскиз для разработки активов и экспортировать их в трех разных размеров. Пожалуйста, посмотрите мой другой проект iOSAnimationSample. Он имеет файл Sketch для дизайна.

Эскиз дизайн

Экспорт активов в различных размерах

В этом случае IOS может подобрать соответствующие средства для различных устройств.

Answer 8

в Programatically (X и Y) мы предварительно определить значения в постоянной:

#define XScale [[UIScreen mainScreen] bounds].size.width/320.0f 
#define YScale [[UIScreen mainScreen] bounds].size.height/568.0f 

Затем создать UIImageView программно

var imageView : UIImageView 
imageView = UIImageView(frame:CGRectMake(XScale *someValue, YScale * someValue, XScale *someValue, YScale *someValue)); 
imageView.image = UIImage(named:"image.jpg") 
self.view.addSubview(imageView) 

на основе вашего размера экрана, мы должны установить постоянные значения. Мы используем экран iPhone5 и 4s.