I am new to swiftUI and I have been trying to place images in a Rounded rectangle but every time I use scaledToFill() The corners of the rectangle disappear.
This is my code :
Image("img_6").resizable()
.scaledToFill()
.clipShape(RoundedRectangle(cornerRadius: 55,
style: .continuous))
.shadow(radius: 9)
.frame(height: 550).clipped()
Modifiers order is important. In your case just move .clipShape after .frame, as
tall:
wide:
Color.clear
.frame(height: 550)
.overlay(Image("img")
.resizable()
.scaledToFill())
.clipShape(RoundedRectangle(cornerRadius: 55,
style: .continuous))
.shadow(radius: 9)
Note: .clipped not needed, because .clipShape already performs clipping
Related
I have to fix a problem with Images on SwiftUI. I currently have to fill the images I receive in a certain vertical container, which are the cells of a LazyVGrid, but the problem is that the tappable area expands over the designated one.
I used the Accessibility Inspector, and I found out that the area in excess is due the Images. (screenshot attached)
The code I'm using is something similar to the following:
Image(uiImage: image.image)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(
maxWidth: width,
maxHeight: height
)
.clipped()
I thought that by having the frames and the clipped method I could get rid of this problem, but that's not the case unless I'm using some squared images. Any idea of what could work to fix this problem? Thanks!
Just add .contentShape(Rectangle()) at the bottom:
Image(uiImage: image.image)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(
maxWidth: width,
maxHeight: height
)
.clipped()
.contentShape(Rectangle()) // <- Here!
Wrap content in Geometry Reader and you need to know the aspect ratio like I set 720/460 below
GeometryReader { gr in
Image(uiImage: image.image)
.resizable()
.aspectRatio(720/460, contentMode: .fit)
}
.clipped()
.aspectRatio(720/460, contentMode: .fit)
I am trying to have a circle on my screen with two circles behind it in a ZStack that ease in and out with the ScaleEffect(), and change opacity. I made this in a separate SwiftUI file, where there seemed to be no issues, but once I put it in my ContentView() it this weird bug seemed to occur.
Please ignore the circles in the background, that's just my background view. But see those two circles of slightly different shades of blue? They keep entering and exiting the screen, coming behind the dark blue "plus" icon and then leaving again. Meanwhile, I'd like them to simply be behind the "plus" circle.
enter image description here
enter image description here
enter image description here
Is this because of some kind of XCode bug? Or did I write something wrong in my code?
I would really appreciate it if somebody could clarify :)
Here is my code. I made an #State private var buttonIsAnimating and defaulted it to false, and said that once the button appears, the circles should start animating. Is something wrong with the code?
ZStack {
Group {
Circle()
.fill(Color("Background2").opacity(self.buttonIsAnimating ? 0.6 : 0))
.frame(width: 75, height: 75, alignment: .center)
.scaleEffect(self.buttonIsAnimating ? 1 : 0)
Circle()
.fill(Color("Background3").opacity(self.buttonIsAnimating ? 0.7 : 0))
.frame(width: 89, height: 89, alignment: .center)
.scaleEffect(self.buttonIsAnimating ? 1 : 0)
}
.animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true))
Button(action: {
self.showingAddANewToDoView.toggle()
}) {
Image(systemName: "plus.circle.fill")
.resizable()
.scaledToFit()
.background(Circle().fill(Color("Background")))
.foregroundColor(Color("Background4"))
.frame(width: 60, height: 60)
.padding(5)
}//: Button
.onAppear {
self.buttonIsAnimating.toggle()
}
}
Try with link animation to state, like
Group {
Circle()
.fill(Color("Background2").opacity(self.buttonIsAnimating ? 0.6 : 0))
.frame(width: 75, height: 75, alignment: .center)
.scaleEffect(self.buttonIsAnimating ? 1 : 0)
Circle()
.fill(Color("Background3").opacity(self.buttonIsAnimating ? 0.7 : 0))
.frame(width: 89, height: 89, alignment: .center)
.scaleEffect(self.buttonIsAnimating ? 1 : 0)
}
.animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true),
value: self.buttonIsAnimating)
I'm using a TextEditor that I'd like to include horizontal padding for, so that the text doesn't stick to either edge. However, the problem is if I include it, and the text within is scrollable, then the scrollbar is not positioned to the far-right, but has instead been moved inside by the padding amount.
TextEditor(text: $text)
.background(Color.white)
.foregroundColor(Color.black)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.customFont(.body)
.lineSpacing(8)
.padding(.leading)
.padding(.trailing)
You added padding to external frame, but need to indent internal text container. The possible solution (as TextEditor is actually UITextView) to use appearance. So the solution would be to add the following in parent view of TextEditor
init() {
UITextView.appearance().textContainerInset =
UIEdgeInsets(top: 0, left: 12, bottom: 0, right: 12) // << !!
}
// ... other code
TextEditor(text: $text)
.background(Color.white)
.foregroundColor(Color.black)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.customFont(.body)
.lineSpacing(8)
Tested with Xcode 12 / iOS 14
I've a list of video, the image of these video are loaded in async way. In the mosaic I can see the activity indicator if is still loading, after the image was loaded, I can see the image preview. I've added an icon with play button.
When I scroll the list, it is not fluid. I've tried to change all async process, but without success. After some time I've tried to delete the Circle() function and was exactly it to decreases the performance.
Even if I solved the issue by changing the icon, I'd like to know if also you have this problem with circle function. It sounds like SKShapeNode in sprite kit.
Bad performance:
ZStack {
Circle()
.fill(Color.white)
.frame(width: 55, height: 55)
.opacity(0.7)
Image(systemName: "play.fill")
.font(Font.system(size: 33))
.opacity(0.7)
.foregroundColor(.black)})
}
Good performance:
Image(systemName: "play.circle.fill")
.resizable()
.frame(width: 50, height: 50)
.opacity(0.7)
.foregroundColor(Color.white)
Is there a way to modify a Text view to have an underline? For example like this text below:
y͟o͟u͟r͟ t͟e͟x͟t͟
Text(Constants.chooseText)
.font(Font.system(size: 26))
.foregroundColor(Color.white)
.padding(.bottom, 80)
Add the underline modifier, on the Text View
Text("Hello, world!")
.underline()
UPDATE adding underline() as the first modifier solved the issue.
Text(Constants.chooseText)
.underline()
.font(Font.system(size: 26))
.foregroundColor(Color.white)
.padding(.bottom, 80)
You may use below like:
Text("Forget User ID")
.underline(true, color: .gray)
iOS 16
You can set background and in bg you can set height, offset and color of underline.
Sample Code:
Text("Gurjinder Singh")
.font(.largeTitle)
.fontWeight(.heavy)
.background(
Color.accentColor
.frame(height: 6) // underline's height
.offset(y: 24) // underline's y pos
)
Output