本次主要描述的是在Swfit移动APP开发中,如何在界面上添加一个自定义的View并且可以屏幕上随处放置位于左/右侧,类似苹果手机的圆圈点击进行操作。
如下操作:(两步实现)
- 定义UIView
- UIView添加点击事件(一个判断到移动,一个判断到点击)
- 代理传递到控制层
- 获取到屏幕的高度/宽度,逻辑处理
一: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:))))
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)
}
}
}
二:Controller控制层
1.继承到cell的代理CookEditViewProtocol
2.定义private var cookEditView = CookEditView
3.初始化cookEditView.delegate = self
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的点击")
}
}
三:结束:以上两个方法直接挪用就可以,很直观很炫酷。


本文介绍如何在Swift中创建自定义UIView,并实现拖动和平滑移动到屏幕边缘的功能。通过简单的两步实现,使得UIView可以在屏幕上自由移动并最终平滑停靠在边缘。

被折叠的 条评论
为什么被折叠?



