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)
Related
I use SwiftUI to display a .svg image. This is my code:
ZStack {
VStack {
HStack {
Spacer()
Image("logo_yf_head")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 70, height: 70)
.padding([.bottom, .horizontal], 16)
}
Spacer()
}
(...)
This is working in debug build and in a signed ad-hoc build.
But when uploaded and installed from testflight i have following problems on all devices:
the icon is shown as a purple square or is blurry. This changes at runtime. It even flickers sometimes.
My asset attributes look like this:
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 have the following code below:
ZStack {
VStack {
NavigationView {
VStack() {
Spacer()
image?
.resizable()
.clipShape(Circle())
.aspectRatio(contentMode: .fill)
.frame(width: 160, height: 160)
.overlay(Circle().stroke(Color.white, lineWidth: 4))
.overlay(
CameraButtonView(showActionSheet: $showActionSheet)
.offset(x: 50, y: 65)
)
.shadow(radius: 10)
Form {
....
}
}
}
.environment(\.horizontalSizeClass, .compact)
}
}
in essence it pretty simplistic were the above portion is an image with the camera button so that users can either select from camera roll or take a picture, which will be displayed by the image, and the rest is a form when the user will be able to fill in the form accrodingly.
What I have been trying to do is make the top part of the view (the image portion) scroll up or if possible scroll/sink into the navigation bar (almost like in the iphone contacts app), when the user starts to scroll the form portion of the view.
Currently the form portion scrolls under the image portion, which as you can imagine take a good portion of the view, so hiding that top image portion would make it easier to fill in the rest of the form.
Has anyone been able to do so in SwiftUI?
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
I need to have back button which looks like the one displayed on any App's page in Apple App Store, having banner image. See image below:
I have tried finding any possible system icon image name as guided here:
https://stackoverflow.com/a/58900114/1152014
But couldn't find any appropriate one. Please guide.
The system icon image name is chevron.left.circle.fill (the one with fill color) and chevron.left.circle (the one without fill color)
By default the fill color is black, which you can change using the foreground color option.
import SwiftUI
struct ContentView: View {
var body: some View {
List {
Image(systemName: "chevron.left.circle.fill")
.resizable()
.frame(width: 50, height: 50, alignment: .center)
.listRowBackground(Color.green)
Text("")
Image(systemName: "chevron.left.circle")
.resizable()
.frame(width: 50, height: 50, alignment: .center)
.listRowBackground(Color.green)
}
.foregroundColor(.white)
}
}