iOS 滑动控件自定义UISegmentedControl实现
我们经常会用到滑动控件,但是系统自带的UISegmentedControl一般不满足需求,自己写了一个滑动控件,可以实现拖拽滑动的功能
初始化一些基本视图 JWSegmentControl
class JWSegmentControl: UIView {
//根据自己的需要可以改变下面的值
var defaultSegment = 1 //默认选择第一个
var segmentSpace = 4 //tab间距
var selectedColor:UIColor = .white //选中的背景色
var backColor:UIColor = .gray //未选中背景色
var title:[String] = ["第一个","第二个","第三个","第四个"] //tab标题
var selectIndex:((_ button:UIButton)->())?
var segmentCount:Int{
get{
return title.count
}
}
var segmentBackView:UIView?
var segmentBtnBackView:UIView?
var segmentBtn:UIButton?
var segSliderBtn:UIButton?
var segments = [UIButton]()
var canDrag:Bool = true
var segmentBtnW:Int{
get{
return Int((self.frame.size.width - CGFloat(segmentSpace) * CGFloat(segmentCount 1)) / CGFloat(segmentCount))
}
}
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = .clear
self.isUserInteractionEnabled = true
}
override func willMove(toSuperview newSuperview: UIView?) {
superview?.willMove(toSuperview: newSuperview)
if newSuperview != nil{
self.setupUI()
}
}
func setupUI() {
segmentBackView = UIView.init(frame: self.bounds)
segmentBackView?.backgroundColor = backColor
segmentBackView!.layer.cornerRadius = CGFloat(self.frame.height/2)
segmentBackView!.layer.masksToBounds = true
self.addSubview(segmentBackView!)
//滑动button
let h = Int(self.frame.height) - segmentSpace*2
segSliderBtn = UIButton.init(type: .custom)
segSliderBtn!.layer.cornerRadius = CGFloat(h/2)
segSliderBtn!.layer.masksToBounds = true
segSliderBtn!.backgroundColor = selectedColor
segmentBackView!.addSubview(segSliderBtn!)
segmentBtnBackView = UIView.init(frame: segmentBackView!.bounds)
segmentBtnBackView?.backgroundColor = .clear
segmentBtnBackView!.layer.cornerRadius = CGFloat(self.frame.height/2)
segmentBtnBackView!.layer.masksToBounds = true
segmentBtnBackView?.isUserInteractionEnabled = true
segmentBackView?.addSubview(segmentBtnBackView!)
//添加滑动手势
let getsture = UIPanGestureRecognizer.init(target: self, action: #selector(panGesture(geture:)))
self.addGestureRecognizer(getsture)
//创建tab
for i in 0..<segmentCount {
let button = UIButton.init(type: .custom)
let x = segmentSpace (i%segmentCount)*(segmentBtnW segmentSpace)
let h = Int(self.frame.height) - segmentSpace*2
button.frame = CGRect.init(x:x, y: segmentSpace, width: segmentBtnW, height:h)
button.setTitle(title[i], for: .normal)
button.setTitleColor(.black, for: .normal)
button.layer.cornerRadius = CGFloat(h/2)
button.layer.masksToBounds = true
button.isUserInteractionEnabled = true
button.addTarget(self, action: #selector(tabAction(sender:)), for: .touchUpInside)
button.tag = 1000 i
button.backgroundColor = .clear
segmentBtnBackView!.addSubview(button)
segments.append(button)
}
//创建tab之后改变滑动buttom的frame
segSliderBtn?.frame = segments[defaultSegment - 1].frame
}
具体实现拖拽切换的步骤
@objc func panGesture(geture:UIPanGestureRecognizer){
let pointA = geture.location(in: self.segmentBackView)
if geture.state == .began{
if(!(self.segSliderBtn?.frame.contains(pointA))!){
canDrag = false
return
}
}
if geture.state == .changed{
if canDrag == false{
return
}
//改变滑动button的位置
for i in 0..<segments.count {
let button = segments[i]
if pointA.x > button.frame.minX && pointA.x < button.frame.maxX{
UIView.animate(withDuration: 0.1) {[weak self] in
self!.segSliderBtn?.center = self!.segments[i].center
self!.defaultSegment = i;
}
break;
}
}
}
geture.setTranslation(.zero, in: self.segmentBackView)
if geture.state == .ended{
canDrag = true
if let selectIndex = selectIndex{
selectIndex(segments[defaultSegment])
}
}
}
/**
点击切换到其他按钮
*/
@objc func tabAction(sender:UIButton){
let button = segments[sender.tag - 1000]
UIView.animate(withDuration: 0.2) { [weak self] in
self!.segSliderBtn!.center = button.center
}
defaultSegment = sender.tag - 1000 1
if let selectIndex = selectIndex{
selectIndex(sender)
}
}
}
调用方式
let jwSegment = JWSegmentControl.init(frame: CGRect.init(x: 0, y: 200, width: UIScreen.main.bounds.width, height: 40))
jwSegment.defaultSegment = 1 //默认显示第几个tab
jwSegment.selectedColor = .white //选中的背景色
jwSegment.backColor = .gray //未选中的背景色
jwSegment.title = ["第一个","第二个","第三个","第四个"] //tab标题
jwSegment.selectIndex = { (button:UIButton) ->Void in
print(button.tag - 1000)
}
self.view.addSubview(jwSegment)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgcafgg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01