BLACK FRIDAY: Save 50% on all my Swift books and bundles! >>

Proyect 11: Custom star rating: rate 4 and a half stars ????

Forums > 100 Days of SwiftUI

In the example that he explains to get a star rating... how could I do to get half star instead of one star? (for example, give a rating of 4 and a half stars)

import SwiftUI

struct RatingView: View {

    @Binding var rating: Int

    var label = ""

    var maximumRating = 5

    var offImage: Image?
    var onImage = Image(systemName: "star.fill")

    var offColor = Color.gray
    var onColor = Color.yellow

    var body: some View {

        HStack {
            if label.isEmpty == false {
                Text(label)
            }

            ForEach(1..<maximumRating + 1, id: \.self) { number in
                Button {
                    rating = number
                } label: {
                    image(for: number)
                        .foregroundStyle(number > rating ? offColor : onColor)
                }
            }
        }
        .buttonStyle(.plain)
    }

    func image(for number: Int) -> Image {
        if number > rating {
            offImage ?? onImage
        } else {
            onImage
        }
    }
}

#Preview {
    RatingView(rating: .constant(3))
}

   

@Kitty asks:

how could I do to get half star instead of one star?

You own the Struct

This is the cool thing about structs. YOU get to decide what data you accept and how that data is displayed.

Take a close look at the RatingView struct's definition. You'll see that it accepts an integer that represents the rating. It also accepts two graphic images (onImage and offImage) to represent the on and off state.

struct RatingView: View {

    //                   👇🏼 Here! you accept an integer!
    @Binding var rating: Int

    var label = ""

    var maximumRating = 5

    //    👇🏼 Here! you accept an off image!
    var offImage: Image?
    //    👇🏼 Here! you accept an on image!
    var onImage = Image(systemName: "star.fill")

//.     ....... snip........

Your Challenge

You're asking the following:

How can I accept a Double value?
How can I represent THREE graphic images?
What logic do I need to change to display off, one-half, and whole images?

The first two questions should be easy for you to answer.
The third might be harder to answer.

Also, you may find that your users might find it easy to provide on and off graphics, but hard to find a half-filled graphic.

Keep Coding

   

Hello,

I agree with Obelix that in this project it is a bit difficult for the user to click on half a star. But I thought it was a bit fun to create a partially filled image/star. Attaching code on how I did it.

// Create one star, that fills partly
struct StarView: View {
    var fillAmount: Double  // Between 0 and 1 for each star

    // The base star image is gray, which represents the unfilled portion of the star.
    var starImage: some View {
        Image(systemName: "star.fill")
            .resizable()
            .foregroundColor(.gray)  // Set the default color for the unfilled part
    }

    var yellowRectangle: some View {
        //  GeometryReader gives you real-time size information, it’s used to determine the width of the star.
        GeometryReader { geometry in
            Rectangle()
                .fill(.yellow)
                .frame(width: geometry.size.width * fillAmount)  // Fill only partly based on fillAmount
        }
    }

    var body: some View {
        starImage
            //  Overlay with Mask: A yellow rectangle is overlaid on top, and we use a mask to make sure the yellow only appears inside the shape of the star.
            .overlay(
                yellowRectangle
                    .mask(starImage)
            )
    }
}

#Preview {
    StarView(fillAmount: 0.5)
        .frame(width: 150, height: 150) // <- Adjust star size as needed
}

   

Thanks for the answers...

I have seen that in the future proyects I have the GeometryReader and much more explained ...

I think I am leaving this like this now and try it in the future with more knowledge...

1      

Save 50% in my WWDC sale.

SAVE 50% All our books and bundles are half price for Black Friday, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.