SwiftUI로 이미지 크기를 조정하는 방법은 무엇입니까?

Assets.xcassets에 큰 이미지가 있습니다. SwiftUI로이 이미지의 크기를 조정하여 작게 만드는 방법은 무엇입니까?

프레임을 설정하려고했지만 작동하지 않습니다.

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

에 .resizable()크기 수정을 적용하기 전에을 사용해야 합니다 Image.

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

이것은 어떤가요:

struct ResizedImage: View {
    var body: some View {

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

    }
}

이미지보기는 200x200이지만 이미지는 원래 종횡비를 유지합니다 (해당 프레임 내에서 크기 조정).

@rraphael의 답변과 의견을 확장합니다.

Xcode 11 베타 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)

        }
    }
}

결과

(어떤 이유로 이미지가 약간 흐릿하게 표시됩니다. 실제 출력은 선명하므로 안심하십시오.)

SwiftUI에서 .resizable()메서드를 사용하여 이미지 크기를 조정합니다. 를 사용 .aspectRatio()하고 지정하여 ContentMode적절하게 이미지를 "맞춤"또는 "채우기"할 수 있습니다.

예를 들어, 다음은 피팅하여 이미지 크기를 조정하는 코드입니다.

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

글쎄, 그것은 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)
 }

도움이 되었기를 바랍니다.

struct AvatarImage: View {
    var body: some View {

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

    }
}

참고 : 내 이미지 이름은 다음 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
                    }

또 다른 접근 방식은 scaleEffect수정자를 사용하는 것입니다 .

Image(room.thumbnailImage)
    .resizable()
    .scaleEffect(0.5)

크기 조정과 함께 종횡비 를 사용 하려면 다음 코드를 사용할 수 있습니다.

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

이미지 크기를 하드 코딩 / 수정해서는 안되기 때문입니다. 다른 장치에서 화면의 해상도에 따라 조정할 범위를 제공하는 더 좋은 방법은 다음과 같습니다.

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)

기본적으로 이미지보기는 내용에 맞게 자동으로 크기가 조정되므로 화면을 벗어날 수 있습니다. resizable () 수정자를 추가하면 사용 가능한 모든 공간을 채우도록 이미지 크기가 자동으로 조정됩니다.

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

그러나 공간을 채우는 데 필요한 양만큼 모든 크기로 늘어나 기 때문에 이미지의 원래 종횡비가 왜곡 될 수도 있습니다.

종횡비를 유지하려면 다음과 같이 .fill 또는 .fit을 사용하여 aspectRatio 수정자를 추가해야합니다.

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

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)
    }
   }
}

다음과 같이 이미지 속성을 정의 할 수 있습니다.

   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 

코드의 논리적 구조를 이해하는 것은 매우 중요합니다. SwiftUI와 마찬가지로 이미지는 기본적으로 크기를 조정할 수 없습니다. 따라서 이미지 크기를 조정하려면 이미지보기를 선언 한 직후 .resizable () 수정자를 적용하여 크기를 조정할 수 있도록해야합니다.

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