Created
February 6, 2024 21:07
-
-
Save DarrenHurst/b52862e88daa0f941cbaf21085ebc3b3 to your computer and use it in GitHub Desktop.
Rating Control
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Foundation | |
import SwiftUI | |
struct Rating: View { | |
@State var loadView = false | |
var value = 1.8 | |
var numberOf = 5 | |
var image = Image(systemName: "star") | |
var image2 = Image(systemName: "star") | |
var color: Color = .white | |
var fillColor: Color = .cyan | |
var width: CGFloat = 150.0 | |
var body: some View { | |
let ratingView = rating() | |
ratingView | |
} | |
fileprivate func rating() -> some View { | |
return ZStack { | |
let icon = HStack(spacing: 0) { | |
ForEach(0..<numberOf, id: \.self) { _ in | |
ZStack { | |
image | |
.resizable() | |
.aspectRatio(contentMode: .fit) | |
// .foregroundColor(.black.opacity(0.9)) | |
image2 | |
.resizable() | |
.aspectRatio(contentMode: .fit) | |
.foregroundColor(color.opacity(0.9)) | |
.background(.clear) | |
} | |
} | |
} | |
// apply ZStack | |
icon.overlay( | |
GeometryReader { g in | |
let width = value / CGFloat(numberOf) * g.size.width | |
ZStack(alignment: .leading) { | |
Rectangle() | |
.frame(width: width) | |
.foregroundColor(fillColor) | |
.offset(x: loadView ? 0: -500) | |
.animation(.easeIn(duration: 1).speed(1), value: loadView) | |
} | |
} | |
.mask(icon) | |
).frame(width: width) | |
.onAppear() { | |
loadView.toggle() | |
} | |
} | |
} | |
} | |
struct RatingPreview : PreviewProvider { | |
//Given | |
static var rating = 4.0 | |
//When | |
static var previews: some View { | |
VStack { | |
//stars with border | |
//1 | |
ZStack { | |
Rating(value:rating, image:Image(systemName: "star"), image2: Image(systemName: "star.fill")) | |
//.background(.black) | |
Rating(value:0, image2: Image(systemName: "star"), color:.black.opacity(0.6)) | |
//.background(.black) | |
} | |
//star without fill | |
//2 | |
Rating(value:3.6, image2: Image(systemName: "star"), color:.black.opacity(0.6)) | |
//star with fill no border | |
//3 | |
Rating(value:3.6, image2: Image(systemName: "star.fill"), color:.white) | |
} | |
//Then -> Preview 3 controls | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if detailsCardEvent { | |
Rating(value:3.6, image2: Image(systemName: "star"), color:.white.opacity(0.9)) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm currently coding on a M1, xcode 14, tools 5.7. This targets base ios16.