0

I want to change UITextView / UIView frame width using pan gesture (Drag red dot to change frame width), as per the frame width number of line arrange accordingly. Anyone can please suggest how can I achieve this thing.

enter image description here

I have added pan gesture to both the red dot view and it's working fine to change width of UIview, but after rotate view it's not work properly.

func addCustomView() {
    myView = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 100))
    myView.backgroundColor = .yellow
    
    //Left Dot
    let leftDotView = UIView()
    leftDotView.backgroundColor = .red
    myView.addSubview(leftDotView)
    let panRecognizer = UIPanGestureRecognizer(target: self, action: #selector(leftDotMoveGesture(_:)))
    panRecognizer.delegate = self
    leftDotView.addGestureRecognizer(panRecognizer)

    leftDotView.translatesAutoresizingMaskIntoConstraints = false
    myView.addConstraint(NSLayoutConstraint(item: leftDotView, attribute: .leading, relatedBy: .equal, toItem: myView, attribute: .leading, multiplier: 1, constant: 0))
    myView.addConstraint(NSLayoutConstraint(item: leftDotView, attribute: .top, relatedBy: .equal, toItem: myView, attribute: .top, multiplier: 1, constant: 30))
    myView.addConstraint(NSLayoutConstraint(item: leftDotView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,multiplier: 1, constant: 40))
    myView.addConstraint(NSLayoutConstraint(item: leftDotView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,multiplier: 1, constant: 10))

    //Right Dot
    let rightDotView = UIView()
    rightDotView.backgroundColor = .red
    myView.addSubview(rightDotView)
    let rightDotPanRecognizer = UIPanGestureRecognizer(target: self, action: #selector(rightDotMoveGesture(_:)))
    rightDotPanRecognizer.delegate = self
    rightDotView.addGestureRecognizer(rightDotPanRecognizer)

    rightDotView.translatesAutoresizingMaskIntoConstraints = false
    myView.addConstraint(NSLayoutConstraint(item: rightDotView, attribute: .trailing, relatedBy: .equal, toItem: myView, attribute: .trailing, multiplier: 1, constant: 0))
    myView.addConstraint(NSLayoutConstraint(item: rightDotView, attribute: .top, relatedBy: .equal, toItem: myView, attribute: .top, multiplier: 1, constant: 30))
    myView.addConstraint(NSLayoutConstraint(item: rightDotView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,multiplier: 1, constant: 40))
    myView.addConstraint(NSLayoutConstraint(item: rightDotView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,multiplier: 1, constant: 10))
    
    //UItextView
    let txtView = UITextView()
    txtView.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    txtView.font = UIFont.systemFont(ofSize: 15.0)
    txtView.isUserInteractionEnabled = false
    txtView.backgroundColor = .clear
    myView.addSubview(txtView)
    txtView.translatesAutoresizingMaskIntoConstraints = false
    myView.addConstraint(NSLayoutConstraint(item: txtView, attribute: .leading, relatedBy: .equal, toItem: myView, attribute: .leading, multiplier: 1, constant: 10))
    myView.addConstraint(NSLayoutConstraint(item: txtView, attribute: .trailing, relatedBy: .equal, toItem: myView, attribute: .trailing, multiplier: 1, constant: -10))
    myView.addConstraint(NSLayoutConstraint(item: txtView, attribute: .top, relatedBy: .equal, toItem: myView, attribute: .top, multiplier: 1, constant: 10))
    myView.addConstraint(NSLayoutConstraint(item: txtView, attribute: .bottom, relatedBy: .equal, toItem: myView, attribute: .bottom, multiplier: 1, constant: -10))
    
    self.view.addSubview(myView)
    
    let panGesture = UIPanGestureRecognizer(target: self, action: #selector(draggedView(_:)))
    panGesture.delegate = self
    myView.isUserInteractionEnabled = true
    myView.addGestureRecognizer(panGesture)

    //add rotate gesture.
    let rotate = UIRotationGestureRecognizer.init(target: self, action: #selector(handleRotate(recognizer:)))
    rotate.delegate = self
    myView.addGestureRecognizer(rotate)

}

//MARK: Gesture Recognizer

@objc func handleRotate(recognizer : UIRotationGestureRecognizer) {
    if let view = recognizer.view {
        view.transform = view.transform.rotated(by: recognizer.rotation)
        recognizer.rotation = 0
    }
}

@objc func draggedView(_ sender:UIPanGestureRecognizer){
    self.view.bringSubviewToFront(myView)
    let translation = sender.translation(in: self.view)
    myView.center = CGPoint(x: myView.center.x + translation.x, y: myView.center.y + translation.y)
    sender.setTranslation(CGPoint.zero, in: self.view)
}
@objc func leftDotMoveGesture(_ recognizer: UIPanGestureRecognizer) {
        let touchLocation = recognizer.location(in: self.view)
        var getSuperView = myView.frame
        getSuperView.size.width = getSuperView.size.width + (getSuperView.origin.x - touchLocation.x)
        getSuperView.origin.x = touchLocation.x
        myView.frame = getSuperView
    }

@objc func rightDotMoveGesture(_ recognizer: UIPanGestureRecognizer) {
    let touchLocation = recognizer.location(in: self.view)
    var getSuperView = myView.frame
    getSuperView.size.width = touchLocation.x - getSuperView.origin.x
    myView.frame = getSuperView
}

func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
    return true
}

I have checked following but didn't got proper solutions for this functionality.

How to resize UIView by dragging from its edges?

https://github.com/ppoh71/resizeRectangleOnTouchDrag

https://newbedev.com/how-to-resize-uiview-by-dragging-from-its-edges

I will have to use rotate/pan gesture(to change position)/resize frame UIview also I need to add multiple n number of views as user wants.

AtulParmar
  • 4,358
  • 1
  • 24
  • 45
  • Could you post an image of how a rotated then resized view looks like now and how you wants it? – SamB Aug 27 '21 at 10:05
  • actually, I want to create a screen like write some n number of text on Image and text is movable rotatable and resizable etc. for add text and manage/arrange on the same screen, i want to create something like photo editor app. – AtulParmar Aug 27 '21 at 10:18

1 Answers1

0

The issue of strange behavior is due to you are resizing frame of the view. Since you are also rotating the views then resize, you need to resize the bounds of your view. When you rotate a view, it's frame keep getting changed but the bounds keep same.

SamB
  • 1,560
  • 1
  • 13
  • 19