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:
