iOS: SwiftUI suggestion to create a view

Question

I'm trying to make a view in SwiftUI as shown below using SwiftUI.

Below is the code I have written, but I'm not sure what will the best way to code this is. My code looks like below with hard-coded values.

    var body: some View {
    TestView {
        VStack {
            HStack {
                Image("profile")
                    .padding(.top, 30)
                    .padding(.leading, 30)
                Spacer()
            }
            
            HStack {
                Text("UserName")
                    .font(.system(size: 20, weight: .bold, design: .default))
                    .foregroundColor(.gray)
                    .padding(.leading, 30)
                Spacer()
            }
            .padding(.bottom, 1)
            HStack(spacing: 0) {
                Text("4")
                    .font(.system(size: 42, weight: .bold, design: .default))
                    .foregroundColor(.pink)
                
                VStack {
                    Text("/10")
                        .font(.system(size: 25, weight: .bold, design: .default))
                        .foregroundColor(.gray)
                    Spacer()
                    Spacer()
                    Spacer()
                    Spacer()
                }
            }
            
            Image("stars")
                .resizable()
                .padding(.leading, 20)
                .padding(.trailing, 20)
                .padding(.bottom, 5)
        }
    }
    .frame(width: 200, height: 250, alignment: .center)
}

the output looks like this

I believe this should not be the correct way to do this, with multiple spacers, too many adjustments.

I'm new to SwiftUI, though the same UI in xib/storyboard won't take me more than 10-15mins with constraints.

Can anyone suggest a better way?

P.S. please ignore color and font size

-----------------------------Updated code----------------------------

var body: some View {
    TestView {
        VStack(alignment: .leading) {
            Image("profile")    //Async-image
                .offset(x: 30)
            
            VStack(alignment: .center) {
                Text("UserName")
                    .font(Font(nameFont))
                
                ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) {
                    HStack(alignment: .firstTextBaseline) {
                        Text("4")
                            .font(Font(bigFont))
                            .foregroundColor(.pink)
                    }
                    HStack(alignment: .firstTextBaseline, spacing: 0) {
                        Text("4")
                            .font(Font(bigFont))
                            .opacity(0)
                        Text("/5")
                            .font(Font(smallFont))
                            .baselineOffset((bigFont.capHeight))
                            .foregroundColor(.gray)
                    }
                }
                
                Image("stars")  //view with rating logic
                    .resizable()
                    .frame(height: 30)
                    .padding(.leading, 20)
                    .padding(.trailing, 20)
                    .padding(.bottom, 5)
            }
        }
    }
    .frame(width: 200, height: 250, alignment: .center)
}

This answer should help. Essentially, you have used Constraints in SwiftUI, but you have to break out of that thinking. — Yrb
– Yrb, Commented Mar 10, 2022 at 15:00
That's a nice trick thanks @Yrb Do you think any other part I can enhance? — Abhishek
– Abhishek, Commented Mar 10, 2022 at 15:51
Other than remove every bit of hard coding and use named fantasizes so it properly reacts to dynamic type. If you want to use a custom font, you can make that properly react, but I think at this point in learning, standard font is fine. Also, if you have numbers that are changing(think stopwatch, etc.) there is a modifier .monospacedDigit that will keep the view from bouncing as you cycle through the numbers. Also, multiple Spacer() is no different than 1. If you get stuck, post a new question with the entire view struct. Variables matter. — Yrb
– Yrb, Commented Mar 10, 2022 at 16:02
@Yrb I have updated the code hope this looks good enough. can you move your comment to answer, so I can accept it? — Abhishek
– Abhishek, Commented Mar 11, 2022 at 4:23
Thank you for the offer, but I don't think the general info in the comment is worth posting as an answer. Glad it helped. — Yrb
– Yrb, Commented Mar 11, 2022 at 14:52

SMP · Accepted Answer · 2022-03-11 02:31:35Z

1

Could avoid Spacers and VStack

 HStack(spacing: 0) {
                Text("4")
                    .font(.system(size: 42, weight: .bold, design: .default))
                    .foregroundColor(.pink)
                
                
                Text("/10")
                    .font(.system(size: 25, weight: .bold, design: .default))
                    .foregroundColor(.gray)
             

   .offset(y: -20)
        }

answered Mar 11, 2022 at 2:31

SMP

1,66910 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

iOS: SwiftUI suggestion to create a view

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related