Xcode @ 2x суффикс изображения не отображается как Retina в iOS - PullRequest
3 голосов
/ 25 апреля 2019

У меня проблемы с изображениями сетчатки.

На снимке экрана ниже показано UICollectionView с UIImageView, содержащимся в каждом UICollectionViewCell.

В приложении у меня есть большое изображение 512x512 пикселей, которое называется travel.png.Зеленый кружок показывает, что отображается в приложении, когда я называю этот файл: travel.png.Синий кружок показывает то, что я вижу, когда я обновляю имя изображения на travel@2x.png (т. Е. Имя сетчатки).

Я надеялся из-за большого размера изображения (512x512), что просто добавляет@ 2x суффикса будет достаточно, чтобы преобразовать его в двойное определение (то есть сетчатку), но, как вы можете видеть из двух снимков экрана, оба изображения версии показаны как не-сетчатки.

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

travel.png: travel.png filename used

travel@2x.png: travel@2x.png filename used *Обновлено * После запроса в комментариях ниже:

Я загружаю это изображение, вызывая следующую функцию:

// Note - when this method is called: contentMode is set to .scaleAspectFit & imageName is "travel"
public func setImageName(imageName: String, contentMode: ContentMode) {

    self.contentMode = contentMode
    if let image = UIImage(named: imageName) {
        self.image = image
    }        
}

Вот как изображение появляется в XCode до того, как приложение его отображает (как видите, это достаточно высокое определение):

enter image description here

Ответы [ 6 ]

5 голосов
/ 30 апреля 2019

Причина, по которой вы видите некачественное изображение, - сглаживание .Когда вы предоставляете изображения больше, чем фактический кадр UIImageView (режим scaleAspectFit), система автоматически уменьшает их.Во время масштабирования некоторые эффекты сглаживания могут быть добавлены в кривые формы.Чтобы избежать эффекта, вы должны предоставить точный размер изображения, которое вы хотите отобразить на экране.

Чтобы определить, если UIImageView автоматически масштабирует изображение, вы можете включить Debug-> Color Misaligned Images в меню Simulator:

Color Misaligned Images

Теперь всемасштабированные изображения будут выделены на симуляторе желтым цветом.Каждое подсвеченное изображение может иметь артефакты сглаживания и влиять на использование ЦП для алгоритмов масштабирования:

Scaled images will highlight

Для решения проблемы следует использовать точные размеры.Таким образом, система будет использовать их напрямую без каких-либо дополнительных расчетов.Например, если ваша кнопка имеет размер 80x80px, вы должны добавить три изображения в каталог утверждений со следующими размерами и dpi: 80x80px (72 dpi), 160x160px (144 dpi) и 240x240px (216 dpi):

Assets catalog

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

The result

2 голосов
/ 30 апреля 2019

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

Шаги

  1. При нажатии на значок + вы увидите список действий,Выберите, чтобы создать New folder.create folder
  2. Выбрав новую созданную папку, снова щелкните значок + и нажмите New Image Set.
  3. Выберите набор изображений.И выберите инспектор атрибутов.
  4. Выберите Single Scale под Scales.enter image description here
  5. Перетащите изображение.
  6. Переименуйте имя изображения и имена папок по своему усмотрению.Теперь вы можете использовать это изображение, используя имя изображения для всех размеров экрана.
1 голос
/ 03 мая 2019

TL; DR;

Изменить вид слоя minificationFilter на .trilinear

imageView.layer.minificationFilter = .trilinear

как показано на скриншоте устройства ниже enter image description here

Как правильно заметил ответ Антона, эффект наложения имен, который вы наблюдаете, вызван большой разницей в размерах между исходным изображением и представлением изображения, в котором оно отображается. Добавление суффикса @2x ничего не изменит, если вы этого не сделаете изменить размеры самого исходного изображения.

При этом существует простой способ улучшить ситуацию без изменения размера исходного изображения: CALayer предлагает некоторый контроль над методом, используемым графическим интерфейсом для изменения размера изображений: minificationFilter и magnificationFilter. Первый уместен в вашем случае, так как размер изображения уменьшается. Значением по умолчанию является CALayerContentsFilter.linear, просто переключитесь на .trilinear для гораздо лучшего результата (больше информации на этих страницах википедии ). Это потребует большей мощности графического процессора (следовательно, батареи), особенно если вы применяете его на многих изображениях.

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

0 голосов
/ 29 апреля 2019

В iOS контент размещается на экране на основе системы координат iOS. для отображения изображения в системе стандартного разрешения с плотностью пикселей 1: 1 мы должны предоставить изображение с разрешением @ 1x. для дисплеев с более высоким разрешением плотность пикселей будет иметь масштабный коэффициент 2,0, 3,0, который в системе iOS обозначается как @ 2x и @ 3x соответственно. То есть дисплеи высокого разрешения требуют изображения с более высокой плотностью.

Например, если вы хотите отобразить изображение размером 128x128 в стандартном разрешении. Вы должны предоставить изображение размером @ 2x и @ 3x одинакового размера. т.е. 256x256 при версии @ 2x и изображение 384x384 при версии @ 3x.

На следующем снимке экрана я предоставил изображение размером 256x256 для версии 2x для отображения изображения 128x128 пикселей в iPhone 6s. iPhone 6s рендерит изображения в размере @ 2x. Использование трех версий изображений, таких как 1x, 2x и 3x с каталогом ресурсов, решит ваши проблемы. Таким образом, iPhone будет автоматически отображать изображение правильного размера автоматически с разрешением экрана.

Screen shot displaying image @128x

0 голосов
/ 29 апреля 2019

Я думаю, изображения без @2x и @3x отображаются для устройств с низким разрешением (например, iphone 4 и 3G).Решение, которое я думаю, состоит в том, чтобы всегда использовать файл .xcassets или добавить @2x or @3X в имена ваших изображений.

0 голосов
/ 29 апреля 2019

Я исправил проблему @DarshanKunjadiya.Убедитесь (если вы уже используете ресурсы):

  1. Убедитесь, что изображения не назначены
  2. Теперь используйте изображения в раскадровке или коде без расширений.(например, "image" NOT "image.png")

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

Демонстрационные проекты

Надеюсь, это поможет.Дайте мне знать о ваших отзывах.

...