I have a google image stored that have transparent background. Because the blue part of the logo is almost the same as the background (as the 1st image) where is at, I want to add a white circle behind it.
To do it, this is what I did:
ZStack{
Circle().frame(width: 40, height: 40)
.background(Color.white)
Image("Google")
.renderingMode(.original)
.resizable()
.frame(width: 35, height: 35)
.padding(.all, 3)
}
But, what I'm getting is this, as if the center of the image doesn't " recognizes" there's a white circle (its also displaying a square instead of a circle) in front of the blue background :
How can I solve this problem?
You can use clipShape to make it a circle like this:
ZStack{
Circle().frame(width: 40, height: 40)
.background(Color.white)
.clipShape(Circle())
Image("Google")
.renderingMode(.original)
.resizable()
.frame(width: 35, height: 35)
.padding(.all, 3)
}
If you want to get ride of the circle background and keep just it's line, you can use .stroke() as shown below:
ZStack{
Circle()
.stroke()
.frame(width: 40, height: 40)
.background(Color.white)
.clipShape(Circle())
Image("Google")
.renderingMode(.original)
.resizable()
.frame(width: 35, height: 35)
.padding(.all, 3)
}
After reading the answers given, I got an easier way to solve it. I just changed .background(Color.white) to .foregroundcolor(.white)
Related
I'm trying to create some tiles in my swiftUI project.
The tiles will need to look like this:
Basically, I need to place the caption on the left and the texts under the image.
I can create the image and I can overlay the texts on the image but I cannot place them under the image and I cannot place the caption to the left.
This is my current code:
Image("flower")
.resizable()
//.aspectRatio(contentMode: .fill)
.frame(width: 160, height: 200)
// Overlay is a very simple way to add content on top of your view ! 😁
.clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
.shadow(color: Color.black.opacity(0.3), radius: 6, x: 0, y: 3)
VStack(alignment: .trailing, spacing: 6) {
Text("sit amet")
.background(Color.gray.opacity(0.2))
.font(.caption)
}.onTapGesture {
// Handle the action when the card is touched
}
can someone please advice on this?
Put the Image and text both under VStack as follows:
VStack(alignment: .leading, spacing: 6) {
Image("flower")
.resizable()
//.aspectRatio(contentMode: .fill)
.frame(width: 160, height: 200)
// Overlay is a very simple way to add content on top of your view ! 😁
.clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
.shadow(color: Color.black.opacity(0.3), radius: 6, x: 0, y: 3)
Text("sit amet")
.background(Color.gray.opacity(0.2))
.font(.caption)
}.onTapGesture {
// Handle the action when the card is touched
}
Text("Some Info goes here")
}
I notice when i use an overlay on a rounded rectangle that there are some parts that are not overlayed, or maybe i'm doing it wrong
and then i tried to switch the view to a regular Iphone SE display, and i notice something that i really dislike, the top is not convered by red
Is there a way to fix it?? or any keyword for me to search? cuz there's probably someone with the same question as i am
Thanks
RoundedRectangle(cornerRadius:25)
.frame(height: 350, alignment:.center)
.foregroundColor(Color("Kolor1"))
.overlay(
ZStack {
Text("Makan")
HStack {
Spacer().frame(width:80)
VStack {
Spacer()
Image("Labtek")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 360, height: 260, alignment:.center)
}
}
}
)
.edgesIgnoringSafeArea(.top)
The code:
VStack(alignment: .trailing) {
Image("Useful")
.resizable()
.ignoresSafeArea()
.scaledToFill()
.frame(width: 105, height: 105)
.padding(.trailing, -60.0)
}
The problem is that image is not at the side and has a small gap near the image and widget as shown in the photo.
How to make this little gap disappear
:)
If I correctly understood your concern, here is possible solution
var body: some View {
Color.clear.overlay(
Image("plant")
.resizable()
.scaledToFill()
.frame(width: 105, height: 105)
, alignment: .bottomTrailing)
}
I try to put a circle-shaped frame around a text view, but I just can't get it properly aligned and I can't see where the problem is. As you can see in the picture below, the text is sometimes offset to left, while it should be centred. Any ideas on how to fix it?
struct ContentView: View {
let result = getDate();
var body: some View {
VStack {
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .top, spacing: 5) {
ForEach(result, id: \.self) {
day in
Text(day.name!)
.frame(width: 35, height: 35, alignment: .center)
.padding()
.overlay(
Circle()
.size(width: 35, height: 35)
.offset(x: 17.5,y: 17.5)
.scale(1.4)
.stroke(Color.orange, lineWidth: 4)
)
}
}
}
Spacer()
}.background(Color.white)
}
}
The circle is offset by half of the size of the frame, so its origin should be in the centre. The Text should be centered as well in .frame(width: 35, height: 35, alignment: .center).
Thanks a lot for helping! :)
.overlay already has size of container with Text an Circle centred in it, so it is just needed to operate with insets of circle not shifting it, like below
Text(day.name!)
.frame(width: 35, height: 35, alignment: .center)
.padding()
.overlay(
Circle()
.stroke(Color.orange, lineWidth: 4)
.padding(6)
)
I am trying to set alignment on my text inside of the Text struct but I can't find any property that does that. Code example (Updated):
VStack(alignment: .center) {
Text(optionItem.title)
.fontWeight(.heavy)
.color(optionItem.color)
.font(.system(size: 64))
.frame(width: bounds.width, height: 100, alignment: .center)
.padding(.top, 60)
Text(optionItem.description)
.lineLimit(nil)
.padding([.leading, .trailing], 40)
.frame(width: bounds.width, height: 120, alignment: .center)
.font(.system(size: 16))
}
.padding(.bottom, bounds.height * 0.55)
The Text "object" is centered but not the text inside. Image:
You should use the .multilineTextAlignment(_:) method on the Text element.
This works fine for me:
Text("[...]")
.lineLimit(nil)
.multilineTextAlignment(.center)
.padding(.horizontal, 40)