Site icon AppTractor

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

AppTractor
SwiftUI

Показ изображения в 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. Модификаторы представления работают вместе, чтобы привлекательно представить изображение следующим образом:

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

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

Если вы не укажете рамку или ограничения на размер для представления 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 позволяет легко изменять соотношение сторон изображения.

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

.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.

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

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

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

Exit mobile version