SwiftUI keep background view stationary as main view resized

Question

Created Sep ’24

Replies 1

Boosts 0

Participants 2

I have implemented a sample video editing timeline using SwiftUI and am facing issues. So I am breaking up the problem in chunks and posting issue each as a separate question. In the code below, I have a simple timeline using an HStack comprising of a left spacer, right spacer(represented as simple black color) and a trimmer UI in the middle. The trimmer resizes as the left and right handles are dragged. The left and right spacers also adjust in width as the trimmer handles are dragged.

Problem: I want to keep the background thumbnails (implemented currently as simple Rectangles filled in different colors) in the trimmer stationary as the trimmer resizes. Currently they move along as the trimmer resizes as seen in the gif below. How do I fix it?

import SwiftUI

struct SampleTimeline: View {
 
 let viewWidth:CGFloat = 340 //Width of HStack container for Timeline

 @State var frameWidth:CGFloat = 280 //Width of trimmer
 
 var minWidth: CGFloat {
     2*chevronWidth + 10
 } //min Width of trimmer
 
 @State private var leftViewWidth:CGFloat = 20
 @State private var rightViewWidth:CGFloat = 20
 
 var chevronWidth:CGFloat {
     return 24
 }
 
 var body: some View {
     
     HStack(spacing:0) {
         Color.black
             .frame(width: leftViewWidth)
             .frame(height: 70)
         
         HStack(spacing: 0) {
         
             Image(systemName: "chevron.compact.left")
                 .frame(width: chevronWidth, height: 70)
                 .background(Color.blue)
                 .gesture(
                     DragGesture(minimumDistance: 0)
                         .onChanged({ value in
                             leftViewWidth = max(leftViewWidth + value.translation.width, 0)
                             
                             if leftViewWidth > viewWidth - minWidth - rightViewWidth {
                                 leftViewWidth = viewWidth - minWidth - rightViewWidth
                             }
                                
                             frameWidth = max(viewWidth - leftViewWidth - rightViewWidth, minWidth)
                             
                         })
                         .onEnded { value in
                            
                         }
                 )
     
             Spacer()
             
             Image(systemName: "chevron.compact.right")
                 .frame(width: chevronWidth, height: 70)
                 .background(Color.blue)
                 .gesture(
                     DragGesture(minimumDistance: 0)
                         .onChanged({ value in
                             rightViewWidth = max(rightViewWidth - value.translation.width, 0)
                             
                             if rightViewWidth > viewWidth - minWidth - leftViewWidth {
                                 rightViewWidth = viewWidth - minWidth - leftViewWidth
                             }
                             
                             frameWidth = max(viewWidth - leftViewWidth - rightViewWidth, minWidth)
                         })
                         .onEnded { value in
                           
                         }
                 )
              
         }
         .foregroundColor(.black)
         .font(.title3.weight(.semibold))
       
         .background {
             
             HStack(spacing:0) {
                 Rectangle().fill(Color.red)
                     .frame(width: 70, height: 60)
                 Rectangle().fill(Color.cyan)
                     .frame(width: 70, height: 60)
                 Rectangle().fill(Color.orange)
                     .frame(width: 70, height: 60)
                 Rectangle().fill(Color.brown)
                     .frame(width: 70, height: 60)
                 Rectangle().fill(Color.purple)
                     .frame(width: 70, height: 60)
             }
             
         }
         .frame(width: frameWidth)
         .clipped()
         
         Color.black
             .frame(width: rightViewWidth)
             .frame(height: 70)
     }
     .frame(width: viewWidth, alignment: .leading)
 }
}

#Preview {
 SampleTimeline()
}

Boost

Answer 1

DTS Engineer OP

Apple

Oct ’24

@testinstadev Try overlaying the trimmer over the background thumbnails.

For example:

import SwiftUI

struct ContentView: View {
 
    let viewWidth: CGFloat = 340 // Width of HStack container for Timeline

    @State var frameWidth: CGFloat = 280 // Width of trimmer

    var minWidth: CGFloat {
        2 * chevronWidth + 10
    }
    @State private var leftViewWidth: CGFloat = 20
    @State private var rightViewWidth: CGFloat = 20

    var chevronWidth: CGFloat {
        return 24
    }

    var body: some View {
            HStack(spacing: 0) {
                Rectangle().fill(Color.red)
                    .frame(width: 70, height: 60)
                Rectangle().fill(Color.cyan)
                    .frame(width: 70, height: 60)
                Rectangle().fill(Color.orange)
                    .frame(width: 70, height: 60)
                Rectangle().fill(Color.brown)
                    .frame(width: 70, height: 60)
                Rectangle().fill(Color.purple)
                    .frame(width: 70, height: 60)
            }
            .frame(width: viewWidth)
            .overlay {
                ///Trimmer
            }
    }
}

0