Optimizing an image in a horizontal scrollview

Question

Hi all I'm trying to create a horizontal image slider using swiftui. I'm having trouble viewing the images because they don't fit properly and I don't know why.

As you can see from the image it appears that the first photo is not as wide as the device. In a nutshell it looks as if the photo is eventually cropped from the next photo .. Where am I wrong?

struct FeaturedWorksModel: Identifiable {
    var id = UUID()
    var image: String
    var title: String
}

var featuredWorksItems: [FeaturedWorksModel] = [
    FeaturedWorksModel(image: "slider1", title: "TAGLIO CREATIVO"),
    FeaturedWorksModel(image: "slider4", title: "LOREM IPSUM"),
    FeaturedWorksModel(image: "slider3", title: "NEQUE EST DOLOR"),
    FeaturedWorksModel(image: "slider2", title: "CONSECTETUR, INTEGER ERAT AUGUE ")
]

struct FeaturedWorksItemView: View {
    let featuredWorks: FeaturedWorksModel
    var body: some View {
        Image(featuredWorks.image)
            .resizable()
            .scaledToFill()
    }
}

struct HomeView: View {
    var body: some View {
        ZStack(alignment: .top) {
            Color.background.edgesIgnoringSafeArea(.all)
            ScrollView(.vertical, showsIndicators: false) {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 0) {
                        ForEach(featuredWorksItems) { works in
                            FeaturedWorksItemView(featuredWorks: works)
                        }.frame(width: screen.width)
                    }
                }
            }
            .edgesIgnoringSafeArea(.all)
        }
    }
}

extension View {
    var screen: CGRect { UIScreen.main.bounds }
}

UPDATE

I tried to change .frame (width: screen.width) to .frame (maxWidth: .infinity) as per the suggestion but now as you can see from the photo, now I get a larger width of the device

https://stackoverflow.com/questions/56487323/make-a-vstack-fill-the-width-of-the-screen-in-swiftui ? I guess `.frame(width: screen.width)` could be changed with some of the answers of the linked question — Larme, Jan 19 '22 at 17:58
@Larme I tried to change `.frame (width: screen.width)` to `.frame (maxWidth: .infinity)` as per the suggestion but now as you can see from the photo, now I get a larger width of the device — kAiN, Jan 19 '22 at 18:08
Are these images all going to be the same size? Do they have the same aspect ratio? Do you want them the same width as the enclosing `ScrollView`? — Yrb, Jan 19 '22 at 18:46
@Yrb the original images have different sizes and I would like each image to be as wide as the device and height of 300 — kAiN, Jan 19 '22 at 18:47
@Yrb in the first image of my question, the less wide images of the device, in the second image of my post instead the widths are greater than the screen of the device .. I can not understand how to set a width equal to the device .. I do not understand where I am wrong this time — kAiN, Jan 19 '22 at 18:48
You realize that the heights will be different? Generally with a `ScrollView`, you constrain the non-scrolling direction so that things are equal. I just want to make sure you are fine with different heights. — Yrb, Jan 19 '22 at 18:56
@Yrb do i have to work with original images with the same widths and heights? even if I use `.scaledToFill ()`? — kAiN, Jan 19 '22 at 19:09
now work.. I used .clipped() with .frame(width: screen.width) — kAiN, Jan 19 '22 at 19:21
Not at all. I am just trying to get an understanding of what your criteria are. So you are good with different heights, as long as the widths are the same, correct? You can’t have both unless the images all have the same aspect ratio. — Yrb, Jan 19 '22 at 19:21
@Yrb Perfect now I understand what you wanted to tell me .. anyway it seems that I managed to get what I wanted even with different aspect ratios of the images. I used .clipped () defining a fixed width of uiscreen.main.bounds.size.width — kAiN, Jan 19 '22 at 19:26

Optimizing an image in a horizontal scrollview

0 Answers0