美文网首页swiftiOS DeveloperiOS 开发
iOS-小的Demo(Swift基础练习)--自定义进度条

iOS-小的Demo(Swift基础练习)--自定义进度条

作者: 云之君兮鹏 | 来源:发表于2016-08-06 18:04 被阅读439次
零落成泥碾作尘,唯有香如故!<蓝蟾蜍>

忙里偷闲练习一下 Swift
效果图:

自定义 barbutton.gif

效果分析: 其实这个效果就是就是类似一个 UISlider只是自定义了滑块,使用的是 UIProgress 进度条, 点击进度条的上点, 滑块自动滑到对应的点! 这里的滑块可以换成其他的控件.
思路: 我的思路就是在 UIProgress 进度条上添加一个 UIView 作为滑块, 然后进度上加点击手势根据点击的位置去调整进度条的进度值, 以及改变滑块的位置!

代码部分:

# 这个代理协议是为了在进度条改变的时候  让其代理执行方法  例如音频根据改变的进度去  相应的调整到对应的位置播放
protocol DDProgressViewDelegate
{
    func ddProgressView(ddProgressView: DDProgressView, changeProgress currenProgress:Float)
    
}

class DDProgressView: UIProgressView {
    
    // 进度条上的滑块
    let sliderView: UIView = UIView.init()
    // 代理
     var delegate:DDProgressViewDelegate?
    
# 代码初始化方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        // 设置一下  滑块的大小 位置 颜色 等属性
        sliderView.backgroundColor = UIColor.redColor()
        sliderView.bounds = CGRectMake(0, 0, 5, 5)
        // 让小滑块的中心点 在进度的端点位置
        sliderView.center = CGPointMake( CGFloat(self.progress) * self.bounds.size.width, self.bounds.size.height / 2);
        self.addSubview(sliderView)
        
        // 给滑条加一个手势 目的是为了点击滑条  进度端点就变成点击点位置
        self.userInteractionEnabled = true; // 开交互
        let tap: UITapGestureRecognizer = UITapGestureRecognizer.init(target: self, action: "tapAction:")
        self.addGestureRecognizer(tap)
    }
# 可视化编程 初始化  
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
 // 设置一下  滑块的大小 位置 颜色 等属性
        sliderView.backgroundColor = UIColor.redColor()
        sliderView.bounds = CGRectMake(0, 0, 5, 5)
        sliderView.center = CGPointMake( CGFloat(self.progress) * self.bounds.size.width, self.bounds.size.height / 2);
        self.addSubview(sliderView)
        
 // 给滑条加一个手势 目的是为了点击滑条  进度端点就变成点击点位置
        self.userInteractionEnabled = true; // 开交互
        let tap: UITapGestureRecognizer = UITapGestureRecognizer.init(target: self, action: "tapAction:")
        self.addGestureRecognizer(tap)
        
       
    }
  
// 点击进度条后执行的  手势事件
    func tapAction(tap : UITapGestureRecognizer)
    {
    let touchPoint: CGPoint = tap.locationInView(self)
    
// 设置进度条的进度  当前点击的点前面的长度  占整个宽度的百分比  就是当前的进度
    self.setProgress(Float(touchPoint.x / self.bounds.size.width) , animated: true)
    
// 进度条改变了 出发代理执行代理事件  让用的地方可以相应的改变  比如音频视频的播放进度调整
        self.delegate?.ddProgressView(self, changeProgress: self.progress)
    }
    
    
// 重新把 子控件的滑块  布局到端点位置
    override  func layoutSubviews()
    {
        super.layoutSubviews()
// 让小滑块的中心点 在进度的端点位置
        sliderView.center = CGPointMake( CGFloat(self.progress) * self.bounds.size.width, self.bounds.size.height / 2);
    }
    
}

相关文章

网友评论

本文标题:iOS-小的Demo(Swift基础练习)--自定义进度条

本文链接:https://www.haomeiwen.com/subject/xmwksttx.html