Как изменить размер изображения с помощью SwiftUI?


97

У меня в Assets.xcassets есть большое изображение. Как изменить размер этого изображения с помощью SwiftUI, чтобы сделать его маленьким?

Я пытался установить фрейм, но не получается:

Image(room.thumbnailImage)
    .frame(width: 32.0, height: 32.0)

Ответы:


217

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

Image(room.thumbnailImage).resizable()
.frame(width: 32.0, height: 32.0)

4
А как изменить размер изображения, сохранив соотношение сторон?
Марк Канг

@MarkKang Я не пробовал, но есть метод под названиемaspectRatio(_:contentMode:)
rraphael

4
Image ("image01") .resizable () .aspectRatio (UIImage (named: "image01") !. size, contentMode: .fit)
Марк Канг

1
Это было бы чудесно. Но думаю, с подгонкой есть баг. hackingwithswift.com/swiftui/…
Марк Кан

17
Image("name").resizable().scaledToFit()но не прослушивается. Таким образом, вы можете обернуть свое изображение в виде, настроить рамку вида до любого необходимого размера, а scaledToFit()затем сделать изображение максимально большим, сохраняя при этом соотношение сторон.
jemmons

38

Как насчет этого:

struct ResizedImage: View {
    var body: some View {

            Image("myImage")
                .resizable()
                .scaledToFit()
                .frame(width: 200.0,height:200)

    }
}

размер изображения составляет 200x200, но изображение сохраняет исходное соотношение сторон (масштабирование в пределах этого кадра)


В моем случае это решение не сохраняет исходное соотношение сторон.
pm89

@ pm89 какого размера ваше исходное и окончательное изображение / просмотр?
Confused

1
Исходное соотношение сторон составляет 3/2, а результат становится 1/1, что растягивает изображение. Похоже, это ошибка SwiftUI. В итоге я использовал метод, предложенный Марком Кангом в комментариях к принятому ответу, Image(uiImage: image!).resizable().aspectRatio(image!.size, contentMode: .fill)где imageимеет тип, UIImageпотому что Imageтип не предоставляет никакого свойства размера.
pm89

Для меня это работает, включая сохранение соотношения сторон, спасибо 👍
laka

17

Расширение ответа и комментариев @rraphael:

Начиная с Xcode 11 beta 2, вы можете масштабировать изображение до произвольных размеров, сохраняя при этом исходное соотношение сторон, заключая изображение в другой элемент.

например

struct FittedImage: View
{
    let imageName: String
    let width: CGFloat
    let height: CGFloat

    var body: some View {
        VStack {
            Image(systemName: imageName)
                .resizable()
                .aspectRatio(1, contentMode: .fit)
        }
        .frame(width: width, height: height)
    }
}


struct FittedImagesView: View
{
    private let _name = "checkmark"

    var body: some View {

        VStack {

            FittedImage(imageName: _name, width: 50, height: 50)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 100, height: 50)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 50, height: 100)
            .background(Color.yellow)

            FittedImage(imageName: _name, width: 100, height: 100)
            .background(Color.yellow)

        }
    }
}

Полученные результаты

Подогнанные изображения с сохранением соотношения сторон

(По какой-то причине изображение выглядит немного размытым. Будьте уверены, что на самом деле изображение получается резким.)


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

1
Это сохраняет исходное соотношение сторон только потому, что соотношение сторон исходного изображения равно 1 (изображение квадратное), и вы используете .aspectRatio(1, ....
Нельзя

10

В SwiftUI используйте этот .resizable()метод для изменения размера изображения. Используя .aspectRatio()и указав ContentMode, вы можете «По размеру» или «Заполнить» изображение в зависимости от ситуации.

Например, вот код, который изменяет размер изображения путем подгонки:

Image("example-image")
.resizable()
.aspectRatio(contentMode: .fit)

3
struct AvatarImage: View {
    var body: some View {

            Image("myImage")
                .resizable()
                .scaledToFill() // <=== Saves aspect ratio
                .frame(width: 60.0, height:60)
                .clipShape(Circle())

    }
}

3

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

 VStack(alignment: .leading, spacing: 1) {
                        //Image Logo Start
                        Image("img_Logo")
                            .resizable()
                            .padding(.all, 10.0)
                            .frame(width: UIScreen.main.bounds.width * 0.4, height: UIScreen.main.bounds.height * 0.2)
                        //Image Logo Done
                    }

Я очень рекомендую вам написать краткий текст вместе с кодом, какое-то объяснение.
Ознакомьтесь

2

Если вы хотите использовать соотношение сторон с изменением размера, вы можете использовать следующий код:

Image(landmark.imageName).resizable()
                .frame(width: 56.0, height: 56.0)
                .aspectRatio(CGSize(width:50, height: 50), contentMode: .fit)

2

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

Image("ImageName Here")
       .resizable()
       .frame(minWidth: 60.0, idealWidth: 75.0, maxWidth: 95.0, minHeight: 80.0, idealHeight: 95.0, maxHeight: 110.0, alignment: .center)
       .scaledToFit()
       .clipShape(Capsule())
       .shadow(color: Color.black.opacity(5.0), radius: 5, x: 5, y: 5)


1

Если вы хотите изменить размер изображения в swiftUI, просто используйте следующий код:

import SwiftUI

    struct ImageViewer : View{
        var body : some View {
            Image("Ssss")
            .resizable()
            .frame(width:50,height:50)
        }
    }

Но вот с этим проблема. Если вы добавите это изображение внутри кнопки, изображение не будет отображаться, будет только блок синего цвета. Чтобы решить эту проблему, просто сделайте следующее:

import SwiftUI

struct ImageViewer : View{
    var body : some View {
        Button(action:{}){
        Image("Ssss")
        .renderingMode(.original)
        .resizable()
        .frame(width:50,height:50)
    }
   }
}

1

Что ж, это кажется довольно простым в SwiftUI / После демонстрации, которую они дали: https://developer.apple.com/videos/play/wwdc2019/204

struct RoomDetail: View {
     let room: Room
     var body: some View {

     Image(room.imageName)
       .resizable()
       .aspectRatio(contentMode: .fit)
 }

Надеюсь, это поможет.


1

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

   Image("\(Image Name)")
   .resizable() // Let you resize the images
   .frame(width: 20, height: 20) // define frame size as required
   .background(RoundedRectangle(cornerRadius: 12) // Set round corners
   .foregroundColor(Color("darkGreen"))      // define foreground colour 

1

Очень важно понимать логическую структуру кода. Как и в SwiftUI, размер изображения по умолчанию не изменяется. Таким образом, чтобы изменить размер любого изображения, вы должны сделать его изменяемым, применив модификатор .resizable () сразу после объявления представления изображения.

Image("An Image file name")
    .resizable()

1

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

Image("example-image")
    .resizable()

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

Если вы хотите сохранить его соотношение сторон, вам следует добавить модификатор aspectRatio, используя .fill или .fit, например:

Image("example-image")
    .resizable()
    .aspectRatio(contentMode: .fit)
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.