How to Resize Uiview by Dragging from Its Edges

How to resize UIView by dragging from its edges?

I'm guessing your UI involves some kind of handles on the sides of the view, and attaching a simple UIPanGestureRecognizer to those handle controls makes the whole problem pretty easy.

In the action method from the gesture recognizer, just get the -translationInView: relative to the view you're resizing, save off the original frame when the gesture recognizer's state is UIGestureRecognizerStateBegan, and adjust the view's frame continually while the state is UIGestureRecognizerStateChanged.

Resizable UIView

After applying transform you can not use frame

You have two options

1) First Calculate everything using center of your view

2) As you know apply identity and change frame

for point 2 I have added example that might helpful to you

    let transform = imageView.transform
    imageView.transform = CGAffineTransform.identity
    var rect: CGRect = imageView.frame

    rect = // Change Rect here       

    imageView.frame = rect // Assign it 
    imageView.transform = transform // Apply Transform 

Increase/Decrease the size of a view horizontally by dragging the edges of it

import SwiftUI

struct ContentView: View {
    let minWidth: CGFloat = 100
    @State var width: CGFloat?

    var body: some View {
        HStack(alignment: .center) {
            Spacer()
            RedRectangle(width: width ?? minWidth)
            Resizer()
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            width = max(minWidth, width! + value.translation.width)
                        }
                )
            Spacer()
        }
        .onAppear {
            width = minWidth
        }
    }
}

struct RedRectangle: View {
    let width: CGFloat

    var body: some View {
        Rectangle()
            .fill(Color.red)
            .frame(width: width, height: 100)
    }
}

struct Resizer: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 8, height: 75)
            .cornerRadius(10)
    }
}

Resizing uiview from its corners

You can do it by changing the view.layer anchor point.

You can read about it here:
Layer Geometry

To get the UIView corners you can use -

CGRect topLeftCorner = CGRectMake(CGRectGetMinX(self.view),CGRectGetMinY(self.view),20,20); //Will define the top-left corner of the view with 20 pixels inset. you can change the size as you wish.

CGRect topRightCorner  =  CGRectMake(CGRectGetMaxX(self.view),CGRectGetMinY(self.view),20,20); //Will define the top-right corner.

CGRect bottomRightCorner  =   CGRectMake(CGRectGetMinX(self.view),CGRectGetMaxY(self.view),20,20); //Will define the bottom-right corner.

CGRect bottomLeftCorner  = CGRectMake(CGRectGetMinX(self.view),CGRectGetMinY(self.view),20,20); //Will define the bottom-left corner.

Then You can cheek if the touch point is inside one of the corners. and set the layer.anchorPoint according.

  BOOL isBottomLeft =  CGRectContainsPoint(bottomLeftCorner, point);
  if(isLeft) view.layer.anchorPoint = CGPoint(0,0);
   //And so on for the others (off course you can optimize this code but I wanted to make the explanation simple).

Then when you will resize the view it will resize from the anchor point.

Good Luck

---

Related Topics