ios – SwiftUI shrink view on dragging edges

To ensure that the background body to alter in coordination with the drag gesture, you have to regulate the width of the background because the drag occurs. For the time being, the width is mounted, so no adjustments are seen.

I’d counsel the next adjustments:

• Use the GestureState variable to document the drag offset. That is routinely reset to 0 when the drag gesture ends, which is handy.

• Use the drag offset to regulate main padding, as an alternative of making use of an x-offset.

• The identical main padding must be utilized to the trimmer (chevron) in addition to to the crammed background.

• The crammed background might be drawn as a RoundedRectangle, as an alternative of utilizing a clip form. This makes it simpler to use the padding.

Right here is an up to date model:

struct SimpleTrimmer: View {
    let frameWidth:CGFloat = 300
    @State personal var leftPadding: CGFloat = 0
    @GestureState personal var dragOffset: CGFloat = 0

    personal var leadingPadding: CGFloat {
        max(0, leftPadding + dragOffset)
    }

    var physique: some View {
        HStack(spacing: 10) {
            Picture(systemName: "chevron.compact.left")
                .body(width: 30, peak: 70)
                .background(Colour.blue)
                .padding(.main, leadingPadding)
                .gesture(
                    DragGesture(minimumDistance: 0)
                        .updating($dragOffset) { worth, state, trans in
                            state = worth.translation.width
                        }
                        .onEnded { worth in
                            leftPadding = max(0, leftPadding + worth.translation.width)
                        }
                )

            Spacer()

            Picture(systemName: "chevron.compact.proper")
                .body(width: 30, peak: 70)
                .background(Colour.blue)
        }
        .foregroundColor(.black)
        .font(.title3.weight(.semibold))
        .padding(.horizontal, 7)
        .padding(.vertical, 3)
        .background {
            RoundedRectangle(cornerRadius: 7)
                .fill(.yellow)
                .padding(.main, leadingPadding)
        }
        .body(width: frameWidth)
    }
}

EDIT Following out of your remark, I attempted including a drag gesture to the trimmer (chevron) on the correct, hoping that the trailing padding may very well be adjusted in the identical manner because the main padding above.

After I tried it, the motion of the trimmer was jittery. I believe the rationale for it’s because there may be an inter-dependency between the dimensions of the spacer and the padding on the trimmers. Though it appeared to work for the case of the main padding, it would not work properly with trailing padding.

It really works higher should you set an x-offset on the trimmers, such as you had been initially utilizing. This implies discovering higher names for the state variables too!

Right here is an up to date model with drag gestures on each trimmers:

struct SimpleTrimmer: View {
    let frameWidth:CGFloat = 300
    @State personal var leftOffset: CGFloat = 0
    @State personal var rightOffset: CGFloat = 0
    @GestureState personal var leftDragOffset: CGFloat = 0
    @GestureState personal var rightDragOffset: CGFloat = 0

    personal var leftAdjustment: CGFloat {
        max(0, leftOffset + leftDragOffset)
    }

    personal var rightAdjustment: CGFloat {
        max(0, rightOffset - rightDragOffset)
    }

    var physique: some View {
        HStack(spacing: 10) {
            Picture(systemName: "chevron.compact.left")
                .body(width: 30, peak: 70)
                .background(Colour.blue)
                .offset(x: leftAdjustment)
                .gesture(
                    DragGesture(minimumDistance: 0)
                        .updating($leftDragOffset) { worth, state, trans in
                            state = worth.translation.width
                        }
                        .onEnded { worth in
                            leftOffset = max(0, leftOffset + worth.translation.width)
                        }
                )

            Spacer()

            Picture(systemName: "chevron.compact.proper")
                .body(width: 30, peak: 70)
                .background(Colour.blue)
                .offset(x: -rightAdjustment)
                .gesture(
                    DragGesture(minimumDistance: 0)
                        .updating($rightDragOffset) { worth, state, trans in
                            state = worth.translation.width
                        }
                        .onEnded { worth in
                            rightOffset = max(0, rightOffset - worth.translation.width)
                        }
                )
        }
        .foregroundColor(.black)
        .font(.title3.weight(.semibold))
        .padding(.horizontal, 7)
        .padding(.vertical, 3)
        .background {
            RoundedRectangle(cornerRadius: 7)
                .fill(.yellow)
                .padding(.main, leftAdjustment)
                .padding(.trailing, rightAdjustment)
        }
        .body(width: frameWidth)
    }
}