I just started to use Kingfisher to display web images using SwiftUI. However, I seem to have a problem when the image is inside an animated view.
I have a side menu that slides in from the left with a user's profile picture on my app. When using SiftUI's default Image, the image follows the sidebar when appearing on the screen. However, when using Kingfisher, the picture directly appears at its final destination. It does not slide in with the rest of the view.
Example
Here is the code for my profile picture View
struct ProfilePictureView: View {
let user: User?
let size: CGFloat
var body: some View {
let hasProfilePicture = !(user?.profilePicture?.path?.isEmpty ?? true)
return VStack {
if (hasProfilePicture) {
KFImage.url(URL(string: (user?.profilePicture?.path)!))
.resizable()
.clipShape(Circle())
.aspectRatio(contentMode: .fit)
.frame(width: size, height: size)
} else {
Image("paw")
.resizable()
.clipShape(Circle())
.aspectRatio(contentMode: .fit)
.frame(width: size, height: size)
}
}
}
}
The side menu itself appears using the withAnimation function.
Would any of you have suggestions or solutions for the problem I'm having?
Just add .loadImmediately() to the images, this will make them animate smoothly like you want.
So for you it should look like this:
KFImage.url(URL(string: (user?.profilePicture?.path)!))
.loadImmediately()
.resizable()
.clipShape(Circle())
.aspectRatio(contentMode: .fit)
.frame(width: size, height: size)
Related
I'm struggling to show a SwiftUI Image correctly when creating it from UIImage with the initialiser Image(uiImage: UIImage).
The code I'm using is
private var rightViewImage: Image
public var body: some View {
....
rightViewImage
.resizable()
.renderingMode(.template)
.scaledToFit()
.foregroundColor(.blue)
.frame(width: 20, height: 20)
}
and setting the variable in a method with
if let image = UIImage(systemName: "mic") {
rightViewImage = Image(uiImage: image)
}
I get a stretched version of the image
instead of the correctly scaled one, which is this
It seems like the .scaledToFit() is not working, it renders it like a .fill.
Is this a bug?
UIImage(systemName:) provides a completely different image dimension and resolution from Image(systemName:).
For this case, you should this instead:
Image(systemName: "mic")
.resizable()
.renderingMode(.template)
.scaledToFit()
.foregroundColor(.blue)
.frame(width: 20, height: 20)
This is what rendered by Image():
This is what rendered by UIImage():
The other answer will get the job done.
But what if you can't use an SF Symbol and want to preserve the aspect ratio? In that case, use the .aspectRatio() modifier:
Image("my-custom-image")
.resizable()
.aspectRatio(contentMode: .fit)
That will give an image that is as large as can fit in the parent view without stretching.
It looks like the question might be about some text paired with an image though. The best way to handle that is not to use resizable() at all. SF Symbols have a bunch of variations that match the system font. And Image(systemName:) will give a size and weight based on the current font. So you can do something like this and the image will match the text:
HStack {
Text("Here's a label")
Image(systemName: "mic")
.foregroundColor(.blue)
}
.font(.title.bold())
That's a better bet than resizing by hand because it will match the iOS system design and look 'right.'
I'm new to SwiftUI, so I'm following a tutorial to get familiar with it. However, my app's content is getting cut off on smaller screens (both vertically and horizontally). How can I prevent this from happening?
Here's my code:
EDIT: I have added borders around my images and resized the images as suggested in your comments and answers, but as you can see, the images don't appear to be taking up any more space than they're supposed to.
struct ContentView: View {
var body: some View {
ZStack {
Image("background").ignoresSafeArea(.all)
VStack {
Spacer()
Image("logo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 100)
.border(Color.black)
Spacer()
HStack {
Spacer()
Image("card3").border(Color.black, width: 3)
Spacer()
Image("card4").border(Color.black, width: 3)
Spacer()
}
Spacer()
Image("dealbutton")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 100)
.border(Color.black)
Spacer()
HStack {
Spacer()
VStack {
Text("Player").padding(.bottom, 10)
Text("0").font(.largeTitle)
}
Spacer()
VStack {
Text("CPU").padding(.bottom, 10)
Text("0").font(.largeTitle)
}
Spacer()
}
.foregroundColor(.white)
Spacer()
}
}
}
}
And here's what the preview looks like on an iPod touch:
Try making Image("background") resizable or set it as the .background(:) of your ZStack. Currently the background image isn’t resizable and is larger than the screen, so it shows at its native size and stretches its parent ZStack beyond the bounds of the screen. Since your content is in that same ZStack, it also extends beyond the bounds of the screen
Your issue is related to your images that you have present on the view structure itself. Images are rendered at 100% their size, irrespective of their constraints. This will cause other views to be pushed away. The solution for that is to set a set size on the view itself that matches within the confines of your available space. Also you're resizing your ZStack which also resizes the content inside of the ZStack. For example.
Image("logo")
.resizeable()
.aspectRatio(contentMode: .fit)
.frame(width: 100)
Handling your image like this will ensure that it is set to the appropriate size when it is rendered. Then you can have the remaining views fall into place in a way that's expected. If you need it scaled on a % for the screen size you can use a GeometryReader to scale the view for different screen sizes.
GeometryReader { reader in
Image("logo")
.resizeable()
.aspectRatio(contentMode: .fit)
.frame(width: reader.size.width * 0.2)
}
Finally, remove your ZStack and set it up like this.
VStack {
//Your Content
}.background(
//Make sure to set the edgesIgnoring.. on this NOT the VStack
Image("background").edgesIgnoringSafeArea(.all)
)
Tip When Working with Stacks
Stacks, wether VStack, HStack, or ZStack's all ALWAYS have their frame set to the content that is held inside of them. If you had an object with a width of 100 and a height of 10,000 then the Stack would also have those dimensions, unless otherwise specified with a Modifier such as .frame(width...) or even, in your case, an Image that is resized.
Suppose your same stack then has a width: 10, height: 10 view added to it, it would still retain the same size as the largest content held within. This is of course handled differently with HStack and VStacks as they actually stack things in a 2D plane, whereas the ZStack works on the 3D plane.
I am trying to make an app with a background image using SwiftUI. However, the image is not the same aspect ratio as the screen, making me use .aspectRatio(contentMode: .fill) to fill the entire screen with it. This works completely fine until I start adding text. When adding text, it now goes off the screen instead of wrapping like it normally should do.
Here's my code:
struct FeaturesView: View
{
var body: some View
{
ZStack
{
Image("background")
.resizable()
.aspectRatio(contentMode: .fill)
.edgesIgnoringSafeArea(.all)
VStack(alignment: .leading)
{
Text("Hello this is some sample text that i am writing to show that this text goes off the screen.")
}
.foregroundColor(.white)
}
}
}
And this is the preview:
As you can see, the text goes off the screen. I have tried using ´.frame()´ and specifying a width and height to fix it, but that causes issues when using the view inside other views. I am using the Xcode 12 beta.
I'm new to Swift and SwiftUI, so all help is appreciated :)
Of course it goes, because image expands frame of container, ie ZStack, wider than screen width.
Here is a solution - make image to live own life in real background and do not affect others. Tested with Xcode 12 / iOS 14.
var body: some View
{
ZStack
{
// ... other content
VStack(alignment: .leading)
{
Text("Hello this is some sample text that i am writing to show that this text goes off the screen.")
}
.foregroundColor(.white)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(
Image("background")
.resizable()
.aspectRatio(contentMode: .fill)
.edgesIgnoringSafeArea(.all)
)
}
this happen because your ZStack using width that equal to your image, try to wrap your image using VStack and geometryReader .
GeometryReader { geometry in
ZStack {
Image() // your image
VStack(alignment: .leading) {
Text("Hello this is some sample text that i am writing to show that this text goes off the screen.")
}.foregroundColor(.white)
}.frame(maxWidth: geometry.size.width)
}
I'm write this on my windows it might some spelling error
I am trying to make the background of screen to be Image not color. I want to know what should be the image sizes, and what to change in these values.
GeometryReader { geometry in
ZStack {
Image("Home-BG")
.resizable()
.edgesIgnoringSafeArea(.all)
.aspectRatio(contentMode: .fill)
I want the image to be fit to screen in all iphone and ipad available devices.
Try
ZStack {
Image("BackGroundImage")
.resizable()
.edgesIgnoringSafeArea(.all)
}
I am working with VStack to show an image (they will be several with different sizes from a json)
I need to show it to occupy the screen width (the width of the vstack and maintaining aspect ratio) and to be properly resized, respecting the height according to the width of the screen.
I have tried in different ways, but I manage to display the image correctly.
My View is:
struct ContentView: View {
var body: some View {
VStack {
GeometryReader { geometry in
VStack {
Text("Width: \(geometry.size.width)")
Text("Height: \(geometry.size.height)")
}
.foregroundColor(.white)
}
.padding()
.frame(alignment: .topLeading)
.foregroundColor(Color.white) .background(RoundedRectangle(cornerRadius: 10) .foregroundColor(.blue))
.padding()
GeometryReader { geometry in
VStack {
Image("sample")
.resizable()
//.frame(width: geometry.size.width)
.aspectRatio(contentMode: .fit)
}
.foregroundColor(.white)
}
.frame(alignment: .topLeading)
.foregroundColor(Color.white) .background(RoundedRectangle(cornerRadius: 10) .foregroundColor(.blue))
.padding()
}
.font(.title)
}
}
When I use .frame (width: geometry.size.width) by assigning the width of the geometry, the width is shown to the entire screen but the height is not maintaining aspect ratio. (looks crushed)
How can I get the dimensions of the image and find its proportion to use it with .aspectRatio (myratio, contentMode: .fit)
There is another way to display the image correctly, any suggestions
You need to eliminate the second GeometryReader, because having two children in the VStack that both accept as much space as they are offered is going to make the VStack unable to give the Image the correct amount of space.
You also need to raise the layout priority of the Image so that the VStack offers it space first, so it can take as much as it needs.
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
GeometryReader { geometry in
VStack {
Text("Width: \(geometry.size.width)")
Text("Height: \(geometry.size.height)")
}.foregroundColor(.white)
}.padding()
.background(
RoundedRectangle(cornerRadius: 10)
.foregroundColor(.blue))
.padding()
Image(uiImage: UIImage(named: "sample")!)
.resizable()
.aspectRatio(contentMode: .fit)
.layoutPriority(1)
}
}
}
import PlaygroundSupport
let host = UIHostingController(rootView: ContentView())
host.preferredContentSize = .init(width: 414, height: 896)
PlaygroundPage.current.liveView = host
Result: