CODEWITHSUNDEEP
iosswiftswiftui
Chris Marshall
Chris Marshall

Reputation: 5332

Aligning Contained Views in SwiftUI

OK. I am working on reproducing this project as a pure SwiftUI View.

I have my work cut out for me. I know that the system is still pretty buggy. The first update helped a lot, but there's still issues.

Nevertheless, I still want most of the problems to be of my own making. Those, I can fix.

I am laying out the control in the same manner as with the original, with three layers: a background circle, a middle movable element (the spinner), and a top transparency mask.

The circle is done, and I'm working on mapping out the spinner layer.

I want it to look something like this:

What I Want

I currently have it looking like this:

What I Get

The issue is that I am having a devil of a time getting the image dimensions in order to inform the offset, but what I'd really like, is to simply make the image anchor point the top, so the offset is sorted.

I tried messing with the alignmentGuide and frame stuff, but I must not be understanding it well, as they seem to be ignored.

Here's the code snippet for one image radii, which is where this should happen:

struct RVS_SwiftUISpinner_ItemDisplayView: View {
    @State var itemImage: Image
    @State var size: CGSize

    var body: some View {
        return VStack(alignment: .center, spacing: 0) {
            self.itemImage
                .resizable()
                .aspectRatio(contentMode: .fit)
                .offset(y: -self.size.height)
                .frame(alignment: .top)
        }
        .frame(width: self.size.width,
               height: self.size.height,
               alignment: .bottom)
            .background(Color(red: 0, green: 1.0, blue: 1.0, opacity: 0.25))
        .offset(y: -self.size.height / 2.0)
    }
}

Does anyone see what I'm doing wrong? I will keep at this, and I WILL find and fix the issue eventually, but I'm still basically making this up as I go along.

Upvotes: 2

Views: 939

Answers (1)

Chris Marshall
Chris Marshall

Reputation: 5332

OK. I think I have it:

struct RVS_SwiftUISpinner_ItemDisplayView: View {
    @State var itemImage: Image
    @State var size: CGSize

    var body: some View {
        return VStack(alignment: .center, spacing: 0) {
            self.itemImage
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(alignment: .top)
        }
        .frame(width: self.size.width,
               height: self.size.height,
               alignment: .top)
        .background(Color(red: 0, green: 1.0, blue: 1.0, opacity: 0.25))
        .offset(y: -self.size.height / 2.0)
    }
}

You-Reek-Ah

I made the OUTER alignment .top.

Onward and upward...

Upvotes: 1

Related Questions