CODEWITHSUNDEEP
swiftuitogglelottie
user1233894
user1233894

Reputation: 1776

LottieSwitch height

Im trying to place LottieSwitches on top of each other in a VStack with SwiftUI and it's leaving a larger vertical gap between the switches. Using .frame(height: XX) is correctly changing the height of the switch but it doesn't eliminate the large gap between them

VStack(spacing: 0) {
                    HStack {
                        Text("XXX")
                            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
                        LottieSwitch(animation: .named("On-Toggle"))
                              .isOn($fictionToggleIsOff)
                              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
                              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
                              .frame(height: 55)
                        Spacer(minLength: 10)
                        Text("XXX")
                            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
                        LottieSwitch(animation: .named("On-Toggle"))
                              .isOn($nonfictionToggleIsOff)
                              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
                              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
                              .frame(height: 55)
                    }
                    .padding(.leading, 20)
                    .padding(.trailing, 20)
                    HStack {
                        Text("XXX")
                            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
                        LottieSwitch(animation: .named("On-Toggle"))
                              .isOn($paperbackToggleIsOff)
                              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
                              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
                              .frame(height: 55)
                        Spacer(minLength: 10)
                        Text("XXX")
                            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
                        LottieSwitch(animation: .named("On-Toggle"))
                              .isOn($hardcoverToggleIsOff)
                              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
                              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
                              .frame(height: 55)
                    }
                    .padding(.leading, 20)
                    .padding(.trailing, 20)
}

enter image description here

Upvotes: 0

Views: 62

Answers (2)

user1233894
user1233894

Reputation: 1776

The LottieFiles have a large padding around the animations. The solution was to use After Effects to crop any excess padding from the animations and re-save. An alternative is to use a bunch of ZStacks to deal with the excess padding

Upvotes: 0

Prachi Bharadwaj
Prachi Bharadwaj

Reputation: 19

Try vstack(spacing:0) to avoid spacing in between them . Or another way could be vstack(spacing:0){ spacer() lottieview Lottieview Spacer() } this is make sure you have the vstack and the images in center of the device

You said you want images on top of each other in that case you need zstack

Upvotes: -1

Related Questions