UIView之全屏幕可拖放——Swfit_swift ios 开发 uiview 拖动 move

本次主要描述的是在Swfit移动APP开发中，如何在界面上添加一个自定义的View并且可以屏幕上随处放置位于左/右侧，类似苹果手机的圆圈点击进行操作。

如下操作：（两步实现）

1. 定义UIView
2. UIView添加点击事件(一个判断到移动，一个判断到点击)
3. 代理传递到控制层
4. 获取到屏幕的高度/宽度，逻辑处理

一：cell层

		var drapBtnView:UIView?

        drapBtnView = UIView()
        drapBtnView!.layer.cornerRadius = 30.0
        drapBtnView!.backgroundColor = UIColor.gray
        self.addSubview(drapBtnView!)
        
        drapBtnView!.snp.makeConstraints{(make)->Void in
            make.top.equalTo(self).offset(90)
            make.right.equalTo(self).offset(0)
            make.height.equalTo(60)
            make.width.equalTo(60)
        }
        
        //点击事件			
        drapBtnView!.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(dragMoving(pan:))))
        
        drapBtnView!.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(tap(tap:))))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

cell代理的实现

	protocol CookEditViewProtocol:NSObjectProtocol {
	  
	  func dragMoving(pan: UIPanGestureRecognizer)
	  
	  func tap(tap:UITapGestureRecognizer)
	  
	}
	
	class CookEditView: BaseView {
		weak var delegate:CookEditViewProtocol?
	
	  @objc func dragMoving(pan: UIPanGestureRecognizer){
	      if delegate != nil {
	          delegate!.dragMoving(pan:pan)
	      }
	  }
	  
	  @objc func tap(tap: UITapGestureRecognizer){
	      if delegate != nil {
	          delegate!.tap(tap:tap)
	      }
	  }
	  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

二:Controller控制层

1.继承到cell的代理CookEditViewProtocol
2.定义private var cookEditView = CookEditView
3.初始化cookEditView.delegate = self
1
2
3

class CookEditViewController: BaseViewController,UITableViewDelegate,UITableViewDataSource,UITextFieldDelegate,UITextViewDelegate,UIGestureRecognizerDelegate,CookEditViewProtocol{

    let HEIGHT = UIScreen.main.bounds.size.height
    let WIDTH = UIScreen.main.bounds.size.width

	//这就是cell传递过来的移动监听事件
    func dragMoving(pan: UIPanGestureRecognizer) {
        
        let point = pan.translation(in: view)
        
        if pan.state == .began {
            
            pan.view?.alpha = 0.8   
        }
        
        pan.view?.center = CGPoint(x: pan.view!.center.x + point.x, y: pan.view!.center.y + point.y)
        
        pan.setTranslation(.zero, in: view)
        
        if pan.state == .ended {
            
            if let v = pan.view{
                
                // 计算 当前view 距离屏幕上下左右的距离
                
                let top = v.frame.minY - 120;
                let left = v.frame.minX ; v.alpha = 1

                let bottom = view.frame.height - v.frame.maxY
                let right = WIDTH - v.frame.maxX

                // 计算出 view 距离屏幕边缘距离的最小值
                let temp = [top,left,bottom,right].sorted().first
                
                // 平移动画
                UIView.animate(withDuration: 0.3, delay: 0.3, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseInOut, animations: {
                    
                    if temp == top{
                        
                        v.transform = v.transform.translatedBy(x: 0, y: -top)
                        
                    }else if temp == left{
                        
                        v.transform = v.transform.translatedBy(x: -left, y: 0)
                        
                    }else if temp == bottom{
                        
                        v.transform = v.transform.translatedBy(x: 0, y: bottom)
                        
                    }else{
                        
                        v.transform = v.transform.translatedBy(x: right, y: 0)
                        
                    }
                    
                }, completion: { (finish) in
                    
                })
            }
        }
    }

    func tap(tap: UITapGestureRecognizer) {
		print("这就是uiview的点击")
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

三：结束：以上两个方法直接挪用就可以，很直观很炫酷。