Question posted in 
I am just wondering what are a component to make a Ui design card.cause I saw a lot of these cool card design on pinterest and I was wondering how to make it. Like what are the component to make such a design with SwiftUI
i have tried it ! the further i have extended the image is this
import SwiftUI
struct RoundedCorners: Shape {
var radius: CGFloat = 25.0
var corners: UIRectCorner = .allCorners
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(
roundedRect: rect,
byRoundingCorners: corners,
cornerRadii: CGSize(width: radius, height: radius)
)
return Path(path.cgPath)
}
}
struct ContentView: View {
var body: some View {
Image("images")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 200, height: 200) // Set your desired image size
.clipShape(RoundedCorners(radius: 50, corners: [.topLeft, .bottomRight]))
.shadow(radius: 5)
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
i have tried this but can’t .If anyone knows how to make this with a standard.
2
Answers
The basic shape can be built by creating a path and adding arcs to it.
One approach is to create a custom
Shape, as you were doing originally. However, doing it this way, it will be difficult to reserve the correct amount of space for showing the label in the top-left corner, unless the size of the label is fixed of course.If you want to show a label that can contain text of varying size and also adapt to dynamic font sizes, then an alternative approach is to use a
Canvas. You can then pass in the label as a "symbol" for the canvas to use.A
Canvasreceives aGraphicsContextas parameter and this lets you measure the size of images and other symbols. So this makes it possible to build a path that fits exactly to the size of the label.An easy way to draw the curves is to use addArc(tangent1End:tangent2End:radius:transform:). Here you just pass in the points that you would use if you were drawing the shape with square corners, instead of rounded corners.
For the round button bottom-right, it is not possible to attach a tap gesture to a symbol that is passed to the
Canvas. Here is what the documentation says on this point:However, the size of this button is probably fixed, so the path can just be built using this fixed size (instead of passing the button as a symbol). Then the button itself can be shown as an overlay over the canvas, using alignment
.bottomTrailing.Here is an example to show it working this way:
As an alternative to the accepted answer, here’s another way to go about it.
Possibly because of my creative background, I thought this could be achieved using a shape to basically mask/stamp out the corners where needed. I got a little carried away in the process, but I think I ended up with something very flexible.
The key to this method is a simple round corner shape – basically an arc with a custom radius:
Using various blend modes, this shape can be used to either mask out a corner or fill a corner:
This is done through an
.overlaymodifier that:Using this method, we can apply it to an overlay text in a capsule aligned to the top left, to add and mask out corners as needed.
Then mask out the background behind the text capsule:
Fill in the bottom right corner:
Add two more corners, to the bottom left and the top right, on the outside:
Similarly, another label with the artist name can be added to the bottom right of the card, for the final result:
Because it is just overlaying views, the content can be anything, including a button:
Note that this method also allows for transparency, so that you don’t have to joggle the overlay colors to match the background color.
To recap:
The working code below includes some controls to play around with: