Подтвердить что ты не робот

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

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

enter image description here

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

Ниже приведен пример приложения

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

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

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

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

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

Ответ 2

Изображения

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

Как упоминалось @Даниил Коротин, 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, если это возможно. enter image description here

Шрифты

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

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

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

enter image description here

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

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

Что-то не в тему

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

Sketch design Дизайн эскиза

Export assets to different sizes Экспорт активов разных размеров

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

Ответ 3

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 по ширине базы дает вам пропорцию. Затем вы просто умножаете все размеры и поля с той пропорцией (1.29375 в нашем случае для iPhone 6 Plus). Надеюсь, вы поняли эту идею.

P.S. Хорошее руководство для резолюций здесь.

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

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

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

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

Ответ 4

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

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

Снимок экрана - ваше приложение имеет этот набор

Снимок экрана из WeatherApp

Ответ 5

программно (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)

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

Ответ 6

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

Ответ 7

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

enter image description here

enter image description here

Ответ 8

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

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

И у вас будет тот же результат на iPhone 5/5s, iPhone 6/6 +.