DRAG AND DROP UILABELS IN TO UITEXTVIEW
THE BELOW SCREENSHOTS ARE TAKEN FROM FROM MY APP TO SHOW YOU AN EXAMPLE.
HERE IN MY PROJECT I HAVE TO REASSEMBLE THE WORDS IN TO CORRECT SENTENCE BY DRAG AND DROP METHODHERE MULTIPLE UILABELS ARE CREATED WITH USERINTERACTION ENABLED TO IT AND A UITEXTVIEW TO DROP LABELS
AFTER DROPING THE LABELS IN TO REQUIRED VIEW I AM DISABLING THE DROPPED LABELS AND CHANGING THE STYLE.
HERE I AM WRITING THE CODE ONLY FOR DRAGLABELS AND DROPVIEW:
FIND THE CODE BELOW:
class jumbleViewController: ViewController, UITextViewDelegate{
var dragObject = UILabel()
var touchOffset = CGPoint()
var homePosition = CGPoint()
var sampleY: CGFloat = 0
var sampleX: CGFloat = 0
var crosstextIcon = UIButton()
var selectedRadionButtonIndex = 0
let dropBoxView = UIView()
let dragTextBox = UITextView()
let hideText = UITextField()
let words = ["delhi", "is", "from", "sagar"]
override func viewDidLoad() {
super.viewDidLoad()
dropBoxView.frame = CGRectMake(20, 0, self.view.frame.width - 40, 60)
dropBoxView.backgroundColor = UIColor.grayColor()
dropBoxView.layer.cornerRadius = 7
let textParentView = UIView()
textParentView.frame = CGRectMake(7, 7, dropBoxView.frame.width - 14, dropBoxView.frame.height - 14)
textParentView.backgroundColor = UIColor.whiteColor()
dropBoxView.addSubview(textParentView)
let textParentView = UIView()
textParentView.frame = CGRectMake(7, 7, dropBoxView.frame.width - 14, dropBoxView.frame.height - 14)
textParentView.backgroundColor = UIColor.whiteColor()
dropBoxView.addSubview(textParentView)
dragTextBox.frame = CGRectMake(0, 0, textParentView.frame.width - (crossBtn.frame.width + 10), textParentView.frame.height)
self.styleTextField(dragTextBox)
textParentView.addSubview(dragTextBox)
hideText.frame = CGRectMake(0, 0, textParentView.frame.width, textParentView.frame.height)
let dragPlaceText = "Drag Here"
hideText.placeholder = " \(dragPlaceText)"
hideText.enabled = false
hideText.backgroundColor = UIColor.whiteColor()
textParentView.addSubview(hideText)
self.view.addSubview(dropBoxView)
var pos_x: CGFloat = 20
var pos_y: CGFloat = 30
for word in words{
let draglabel = UILabel()
draglabel.frame = CGRectMake(pos_x, pos_y, 0, 0)
draglabel.text = "\(word)"
draglabel.backgroundColor = UIColor.greenColor()
draglabel.textColor = UIColor.whiteColor()
draglabel.font = UIFont(name: "Lato", size: 15)
draglabel.numberOfLines = 0
draglabel.sizeToFit()
draglabel.layer.cornerRadius = 5
draglabel.layer.masksToBounds = true
draglabel.frame.size.height = 30
draglabel.frame.size.width += 10
draglabel.textAlignment = .Center
let labWidth = draglabel.frame.origin.x + draglabel.frame.width
let pViewWidth = self.view.frame.width - 40
if(labWidth > pViewWidth){
pos_x = 20
pos_y = pos_y + draglabel.frame.height + 10
draglabel.frame.origin.x = pos_x
draglabel.frame.origin.y = pos_y
pos_x = pos_x + draglabel.frame.width + 15
}
else{
draglabel.frame.origin.x = pos_x
draglabel.frame.origin.y = pos_y
pos_x = pos_x + draglabel.frame.width + 15
pos_y = draglabel.frame.origin.y
}
draglabel.userInteractionEnabled = true // It is must and should for label
self.view.addSubview(draglabel)
dropBoxView.frame.origin.y = draglabel.frame.origin.y + draglabel.frame.height + 20
}
}
func textViewDidBeginEditing(textView: UITextView) {
self.view.endEditing(true)
}
/* ------------------------------ Delegate Touch Methods -----------------------------*/
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
if touches.count == 1{
if let touch = touches.first {
let touchPoint = touch.locationInView(self.view)
for iView in self.view.subviews{
if ((iView as? UILabel) != nil){
if (touchPoint.x > iView.frame.origin.x + sampleX &&
touchPoint.x < iView.frame.origin.x + iView.frame.size.width + sampleX &&
touchPoint.y > iView.frame.origin.y + sampleY &&
touchPoint.y < iView.frame.origin.y + iView.frame.size.height + sampleY)
{
self.dragObject = (iView as? UILabel)!
self.touchOffset = CGPointMake(touchPoint.x - iView.frame.origin.x + sampleX,
touchPoint.y - iView.frame.origin.y + sampleY);
self.homePosition = CGPointMake(sampleX + iView.frame.origin.x,
iView.frame.origin.y + self.sampleView.frame.origin.y + sampleY)
self.view.bringSubviewToFront(self.dragObject)
}
}
}
}
}
}
override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
let touchPoint = touches.first?.locationInView(self.view)
if(self.dragObject.text == "" || self.dragObject.text == nil || self.dragObject.backgroundColor == UIColor.lightGrayColor()){
return
}
let newDragObjectFrame = CGRectMake(touchPoint!.x - touchOffset.x,
touchPoint!.y - touchOffset.y,
self.dragObject.frame.size.width,
self.dragObject.frame.size.height)
self.dragObject.frame = newDragObjectFrame
}
IN THIS LAST "TOUCHESENDED" FUNCTION
I AM CHECKING WHETHER DISABLE DRAG LABEL IS TOUCHED OR NOT IF TOUCHED THEN BREAK IT
THIS IS IMPORTANT HERE I WILL BE TAKING THE X , Y, WIDTH AND HEIGHT VALUES OF DRAG OBJECT AND COMPARE WITH DROP VIEW WHETHER IT IS IN OR OUT OR UP ON IT
IF IT IS IN OR UP ON DROP VIEW I AM ALLOWING IN TO IF LOOP
- I AM COMBINING THE DRAGOBJECT TEXT AND TEXTVIEW TEXT
- AS DATA IN TEXTVIEW INCREASES THE TEXTVIEW ALSO INCREASES
- THE HIDE TEXTBOX IS HIDDEN WHICH IS USED FOR PLACEHOLDER
- REQUIRED DRAGLABEL IS STYLED
ELSE IF IT IS OUT OF DROP VIEW I AM NOT ALLOWING IN TO IF LOOP
FINALLY I AM MAKING THE DRAGGED LABEL TO ITS ORIGINAL POSITION (HOME POSITION)
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
let touchPoint = touches.first?.locationInView(self.view)
if(self.dragObject.text == "" || self.dragObject.text == nil || self.dragObject.backgroundColor == UIColor.lightGrayColor()){
return
}
if (touchPoint!.x > self.dropBoxView.frame.origin.x + sampleX &&
touchPoint!.x < self.dropBoxView.frame.origin.x + self.dropBoxView.frame.size.width + sampleX &&
touchPoint!.y > self.dropBoxView.frame.origin.y + sampleY &&
touchPoint!.y < self.dropBoxView.frame.origin.y + self.dropBoxView.frame.size.height + sampleY)
{
let text = self.dragObject.text!
let trimedText = text.stringByTrimmingCharactersInSet(NSCharacterSet.whitespaceCharacterSet())
self.dragTextBox.text = self.dragTextBox.text + " " + trimedText
let DesFixedWidth = self.dragTextBox.frame.size.width
self.dragTextBox.sizeThatFits(CGSize(width: DesFixedWidth, height: CGFloat.max))
let newSize = self.dragTextBox.sizeThatFits(CGSize(width: DesFixedWidth, height: CGFloat.max))
var newFrame = self.dragTextBox.frame
newFrame.size = CGSize(width: max(newSize.width, DesFixedWidth), height: newSize.height)
self.dragTextBox.frame = newFrame;
self.dragTextBox.scrollEnabled = false
self.dragTextBox.userInteractionEnabled = false
if(dragTextBox.frame.height < 50){
dragTextBox.frame.size.height = 50
}
dragTextBox.superview!.frame.size.height = dragTextBox.frame.height
dropBoxView.frame.size.height = dragTextBox.superview!.frame.height + 14
if(self.dragTextBox.text != "" && self.dragTextBox.text != nil){
hideText.hidden = true
}
self.dragObject.backgroundColor = UIColor.lightGrayColor()
self.dragObject.userInteractionEnabled = false
}
self.dragObject.frame = CGRectMake(self.homePosition.x, self.homePosition.y,
self.dragObject.frame.size.width,
self.dragObject.frame.size.height);
}
}
HERE IF YOU UNDERSTAND THE CODE I AM JUST WRITTEN A LOGIC BY USING X,Y,WIDTH AND HEIGHT VALUES AND WHEN IT IS REQUIRED I JUST TAKEN THE TEXT OF DRAG LABEL, CHANGED THE COLORS OF DRAGLABEL AND AGAIN MOVING TO ITS HOME POSITION
No comments:
Post a Comment