I'm developing an app where users can select items to add to a screen, similar to creating a Canva presentation or choosing blocks in Minecraft. However, I'm encountering an issue with energy usage. When users click the arrows to browse different items, the energy use spikes significantly. Although it returns to normal after a while, continuous clicking causes the energy use to skyrocket. The images I'm using are 500x500 pixels. Ideally, I would like to avoid caching all the images, as the app might have up to 500 items and caching them all would consume too much memory. I have tried numerous way to avoid this but I just can’t seem to make it work. Would anyone know how to avoid such problem?
I have included a picture of the energy use when just opened, and one after like 10 seconds of continuously clicking on an arrow to see more items. Also a picture of how the app looks.
struct ContentView: View {
struct babyBackground {
var littleImage = ""
}
@State var firstSet: [babyBackground] = [
babyBackground(littleImage: "circle"),
babyBackground(littleImage: "square"),
babyBackground(littleImage: "triangle"),
babyBackground(littleImage: "anotherShape"),
babyBackground(littleImage: "circle"),
babyBackground(littleImage: "square"),
babyBackground(littleImage: "triangle"),
babyBackground(littleImage: "anotherShape")
]
@State var secondSet: [babyBackground] = [
babyBackground(littleImage: "circle"),
babyBackground(littleImage: "square"),
babyBackground(littleImage: "triangle"),
babyBackground(littleImage: "anotherShape"),
babyBackground(littleImage: "circle"),
babyBackground(littleImage: "square"),
babyBackground(littleImage: "triangle"),
babyBackground(littleImage: "anotherShape"),
babyBackground(littleImage: "circle")
]
@State var thirdSet: [babyBackground] = [
babyBackground(littleImage: "circle"),
babyBackground(littleImage: "square"),
babyBackground(littleImage: "triangle"),
]
let columns: [GridItem] = Array(repeating: .init(.flexible()), count: 4)
func createBackgroundGridView(for backgrounds: [babyBackground], columns: [GridItem] ) -> some View {
LazyVGrid(columns: columns, spacing: 10) {
ForEach(0..<backgrounds.count, id: \.self) { index in
Button(action: {
}, label: {
if let path = Bundle.main.path(forResource: backgrounds[index].littleImage, ofType: "png"), let uiImage = UIImage(contentsOfFile: path) {
Image(uiImage: uiImage)
.resizable()
.frame(width: 126, height: 96)
}
})
}
}
.padding()
}
@State var indexOn = 0
var body: some View {
HStack{
Button(action: {
indexOn = (indexOn == 0) ? 2 : indexOn - 1
}) {
Label("", systemImage: "arrowtriangle.left.fill")
.font(.system(size: 50))
}
Spacer()
ScrollView {
switch indexOn {
case 0: createBackgroundGridView(for: firstSet, columns: columns)
case 1: createBackgroundGridView(for: secondSet, columns: columns)
case 2: createBackgroundGridView(for: thirdSet, columns: columns)
case 3: createBackgroundGridView(for: thirdSet, columns: columns)
default: createBackgroundGridView(for: firstSet, columns: columns)
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
Spacer()
Button(action: {
indexOn = (indexOn == 2) ? 0 : indexOn + 1
}) {
Label("", systemImage: "arrowtriangle.right.fill")
.font(.system(size: 50))
}
}
}
}
Energy Use when app starts:
Energy use after clicking for about 10 seconds:
App UI:
lunar-serenade
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Post
Replies
Boosts
Views
Activity
This is a very simple code in which there is only one button to start with. After you click the button, a list of images appear. The issue I have is that when I click on the new button to hide the images, the memory stays the same as when all the images appeared for the first time. As you can see from the images below, when I start the app, it starts with 18.5 mb, when I show the images it jumps to 38.5 mb and remains like that forever. I have tried various way to try and reduce the memory usage but I just can't find a solution that works. Does anyone know how to solve this? Thank you!
import SwiftUI
struct ContentView: View {
@State private var imagesBeingShown = false
@State var listOfImages = ["ImageOne", "ImageTwo", "ImageThree", "ImageFour", "ImageFive", "ImageSix", "ImageSeven", "ImageEight", "ImageNine", "ImageTen", "ImageEleven", "ImageTwelve", "ImageThirteen", "ImageFourteen", "ImageFifteen", "ImageSixteen", "ImageSeventeen", "ImageEighteen"]
var body: some View {
if !imagesBeingShown {
VStack{
Button(action: {
imagesBeingShown = true
}, label: {
Text("Turn True")
})
}
.padding()
} else {
VStack {
Button(action: {
imagesBeingShown = false
}, label: {
Text("Turn false")
})
ScrollView {
LazyVStack {
ForEach(0..<listOfImages.count, id: \.self) { many in
Image(listOfImages[many])
}
}
}
}
}
}
}
struct ContentView: View {
@State var listOfImages: [String] = ["One", "Two", "Three", "Four"]
@State var counter = 0
var body: some View {
VStack {
Button(action: {
counter += 1
}, label: {
Text("Next Image")
})
}
.background(Image(listOfImages[counter]))
.padding()
}
}
When I click on the button, counter increases and the next image is displayed as the background. The memory usage of the app increases as each image changes. Is there anyway to maintain a steady memory use?