Поваренная книга SwiftUI: изображения и иконки — Часть 1

Показ изображения в SwiftUI

Изображения являются неотъемлемой частью любого пользовательского интерфейса, а SwiftUI предоставляет простой способ загрузки и отображения изображений в ваших приложениях. Чтобы загрузить изображение в SwiftUI, вам нужно создать новое представление Image и передать ему имя файла изображения, которое вы хотите отобразить.

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

Вот пример того, как загрузить изображение в SwiftUI:

struct ContentView: View {
  var body: some View {
    Image("HedgehogInClover")
      .resizable()
      .aspectRatio(contentMode: .fit)
      .frame(maxWidth: .infinity, maxHeight: .infinity)
      .padding()
  }
}

Используйте представление Image в SwiftUI для показа изображений на экране.

В приведенном выше примере вы создаете новое представление Image и передаете ему имя файла изображения HedgehogInClover. Модификаторы представления работают вместе, чтобы привлекательно представить изображение следующим образом:

• .resizable() позволяет представлению Image динамически изменять свой размер в зависимости от доступного пространства. Это гарантирует, что изображение может быть увеличено или уменьшено без потери соотношения сторон.
• .aspectRatio(contentMode: .fit) устанавливает соотношение сторон изображения. В данном случае используется режим содержимого .fit, который масштабирует изображение так, чтобы оно помещалось в доступное пространство, сохраняя при этом соотношение сторон. Это гарантирует, что все изображение будет видно без искажений.
• .frame(maxWidth: .infinity, maxHeight: .infinity) устанавливает максимальную ширину и высоту представления Image, чтобы оно занимало максимальное доступное пространство в родительском представлении или контейнере. Значение .infinity означает, что рамка может расширяться настолько, насколько это возможно. Это помогает изображению занять как можно больше места, не выходя за границы родительского представления.
• .padding() добавляет подложку вокруг представления Image. Вызов padding без параметров применяет стандартный отступ. Это помогает создать некоторое расстояние между изображением и окружающими представлениями или элементами макета.

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

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

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

Чтобы обеспечить аккуратное размещение представления Image в родительском представлении или контейнере, можно применить соответствующие ограничения по рамке или размеру, например, использовать модификатор frame для указания фиксированной ширины и высоты или использовать другие методы компоновки, например GeometryReader.

Показ изображений с различным соотношением сторон в SwiftUI

В SwiftUI представление Image отображает одно изображение или последовательность анимированных изображений. По умолчанию изображение отображается с исходным соотношением сторон. Однако модификатор .aspectRatio позволяет настроить соотношение сторон изображения в соответствии с нашими потребностями.

Модификатор .aspectRatio принимает два аргумента: aspectRatio и contentMode. aspectRatio — это CGFloat, представляющий соотношение между шириной и высотой изображения. contentMode определяет, как изображение должно быть изменено по размеру и размещено в доступном пространстве. Доступные варианты режима содержимого: .fit — изменение размера изображения, чтобы оно поместилось в доступное пространство, сохраняя при этом соотношение сторон, или .fill — заполнение, чтобы изображение заполнило все доступное пространство.

В следующем примере вы отображаете изображение с соотношением сторон 2:1, то есть ширина изображения будет ровно в два раза больше его высоты:

struct ContentView: View {
  var body: some View {
    Image("HelloHedgy")
      .resizable()
      .aspectRatio(2, contentMode: .fit)
  }
}

Предварительный просмотр должен выглядеть следующим образом:

SwiftUI позволяет легко изменять соотношение сторон изображения.

Вот что происходит в этом коде:

• Image("HelloHedgy") отображает изображение в представлении. Предполагается, что в каталоге активов вашего проекта есть изображение с именем HelloHedgy.
• .resizable() делает изображение изменяемым, позволяя ему увеличиваться или уменьшаться в зависимости от заданных рамок.

.aspectRatio(2, contentMode: .fit) устанавливает соотношение сторон изображения. Первый параметр, 2, представляет собой соотношение ширины и высоты 2:1. Это означает, что ширина изображения будет в два раза больше высоты. Параметр contentMode имеет значение .fit, благодаря чему изображение сохраняет соотношение сторон и помещается в доступное пространство.

Комбинируя эти модификаторы, код отображает изображение HelloHedgy с изменяемым размером и соотношением сторон 2:1, где ширина в два раза больше высоты. Изображение будет увеличиваться или уменьшаться, сохраняя соотношение сторон и помещаясь в доступное пространство.

К сожалению, при таких настройках маленький мультяшный ежик выглядит немного сжатым. Чтобы отобразить изображение с другим соотношением сторон, просто измените значения, переданные модификатору .aspectRatio. Например, чтобы отобразить это изображение с соотношением сторон 1:1, вы можете использовать:

struct ContentView: View {
  var body: some View {
    Image("HelloHedgy")
      .resizable()
      .aspectRatio(1, contentMode: .fit)
  }
}

Предварительный просмотр должен выглядеть следующим образом:

Установка соотношения сторон в 1 создает квадратное изображение в SwiftUI.

Намного лучше!

Используя модификатор .aspectRatio и доступные опции режима содержимого, вы можете легко отображать в SwiftUI изображения с различным соотношением сторон.

Обрезка изображения в SwiftUI

Иногда вам может потребоваться отобразить не все изображение, а только его часть. К счастью, SwiftUI позволяет легко обрезать изображение с помощью модификатора clipped.

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

Исходное изображение для кадрирования.

Начните с добавления представления Image с изображением в качестве источника. Затем примените модификатор clipped к представлению и установите его рамку на нужные размеры обрезанного изображения. И наконец, добавьте границу вокруг нашего изображения с помощью модификатора border, просто для визуальной ясности.

Вот реализация:

struct ContentView: View {
  var body: some View {
    VStack {
      Text("Cropping With Clipped")
        .font(.title)
      Image("WinterPup") // Load the image
        .resizable()
        .scaledToFill()
        .frame(width: 200, height: 200) // Set the frame size
        .clipped() // Crop the image to the frame size
        .border(.black, width: 2) // Add a border for visual clarity
    }
  }
}

Предварительный просмотр должен выглядеть следующим образом:

Используйте модификатор clipped для обрезки изображений в SwiftUI.

Этот код делает следующее:

• Text("Cropping With Clipped") создает представление Text, а .font(.title) устанавливает его шрифт на встроенный стиль .title.
• Image("WinterPup") создает представление изображения с именем WinterPup.
• Функция .resizable() делает изображение изменяемым по размеру, то есть его можно увеличить или уменьшить, чтобы оно поместилось в рамку.
• .scaledToFill() масштабирует изображение так, чтобы оно заполнило рамку, сохраняя при этом соотношение сторон. Если соотношение сторон изображения и его рамки разное, части изображения будут выходить за рамки.
• .frame(width: 200, height: 200) устанавливает размер рамки представления Image 200 точек на 200 точек.
• .clipped() обрезает содержимое, выходящее за границы представления. В данном случае обрезается часть изображения, выходящая за рамки 200×200.
• .border(.black, width: 2) добавляет двухточечную черную границу вокруг представления иИзображения.

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

В целом, обрезка изображения в SwiftUI проста благодаря модификатору clipped. С помощью всего нескольких строк кода вы можете легко настроить изображения в соответствии с потребностями пользовательского интерфейса.