想做出与iOS系统音量调节条的效果，可以顺畅地滑动，调节百分比，结果在网上找轮子，没有找到合适的。只好自己动手撸一个
最终效果如下：
voiceBar.gif
- 封装一个自定义的View，满足需求
- 最好水平方向，竖直方向都能使用
- 当前进度要回调给外面使用
正题
封装一个类：MyCustomSliderView，有用到第三方常用布局库SnapKit，做iOS的小伙伴，应该不会陌生
//
// MyCustomSliderView.swift
// MySliderDemo
//
// Created by ZZ on 2022/5/28.
//
import UIKit
enum MyDirection {
case horizontal
case vertical
}
class MyCustomSliderView: UIView {
var currentProgressBlock:((_ currentProgress:CGFloat)->Void)?
var tempDirection : MyDirection = .horizontal
var direction :MyDirection {
get {
return tempDirection
}
set {
tempDirection = newValue
foregroundView.snp.makeConstraints { make in
make.leading.trailing.equalTo(self)
make.bottom.equalTo(self.snp.bottom)
make.top.equalTo(self.snp.bottom).offset(-self.progress*self.frame.size.height)
}
}
}
var tempProgress:CGFloat = 0.0
var progress:CGFloat {
get {
return tempProgress
}
set {
tempProgress = newValue
if tempProgress > 1.0 {
tempProgress = 1.0
} else if tempProgress<0.0 {
tempProgress = 0.0
}
if self.direction == .horizontal {
foregroundView.snp.remakeConstraints { make in
make.top.bottom.equalTo(self)
make.leading.equalTo(self)
make.trailing.equalTo(self.snp.leading).offset(tempProgress*self.frame.size.width)
}
}else {
foregroundView.snp.remakeConstraints { make in
make.leading.trailing.equalTo(self)
make.bottom.equalTo(self.snp.bottom)
make.top.equalTo(self.snp.bottom).offset(-tempProgress*self.frame.size.height)
}
}
}
}
var tempMyBackgroundColor: UIColor = .lightGray
var myBackgroundColor: UIColor {
get{
return tempMyBackgroundColor
}
set{
tempMyBackgroundColor = newValue
backgroundView.backgroundColor = tempMyBackgroundColor
}
}
var tempForegroundColor: UIColor = .orange
var foregroundColor: UIColor {
get{
return tempForegroundColor
}
set{
tempForegroundColor = newValue
foregroundView.backgroundColor = tempForegroundColor
}
}
var tempCornerRadius:CGFloat = 10.0
var cornerRadius: CGFloat {
get {
return tempCornerRadius
}
set {
tempCornerRadius = newValue
self.backgroundView.layer.cornerRadius = newValue
self.foregroundView.layer.cornerRadius = newValue
}
}
private var backgroundView : UIView!
private var foregroundView : UIView!
override init(frame: CGRect) {
super.init(frame: frame)
setUI()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setUI() {
backgroundView = UIView()
backgroundView.backgroundColor = self.myBackgroundColor
backgroundView.layer.cornerRadius = self.cornerRadius
backgroundView.layer.masksToBounds = true
let tapSingle = UIPanGestureRecognizer(target: self, action: #selector(pan(_:)))
backgroundView.addGestureRecognizer(tapSingle)
self.addSubview(backgroundView)
backgroundView.snp.makeConstraints { make in
make.top.equalToSuperview()
make.bottom.equalToSuperview()
make.leading.equalToSuperview()
make.trailing.equalToSuperview()
}
foregroundView = UIView()
foregroundView.backgroundColor = self.foregroundColor
foregroundView.isUserInteractionEnabled = false
foregroundView.layer.cornerRadius = self.cornerRadius
foregroundView.layer.masksToBounds = true
self.addSubview(foregroundView)
if self.direction == .horizontal {
foregroundView.snp.makeConstraints { make in
make.top.bottom.equalTo(self)
make.leading.equalTo(self)
make.trailing.equalTo(self.snp.leading).offset(self.progress*self.frame.size.width)
}
} else {
foregroundView.snp.makeConstraints { make in
make.leading.trailing.equalTo(self)
make.bottom.equalTo(self.snp.bottom)
make.top.equalTo(self.snp.bottom).offset(-self.progress*self.frame.size.height)
}
}
}
@objc func pan(_ cognizer:UIPanGestureRecognizer) {
let location = cognizer.location(in: self)
print("location x= \(location.x)")
switch cognizer.state {
case .began:
break
case .changed:
let speed = cognizer.velocity(in: self)
print("speed = \(speed)")
if self.direction == .horizontal {
let detal = speed.x/100.0
self.progress += detal/100.0
print("progress = \(self.progress)")
if self.currentProgressBlock != nil {
self.currentProgressBlock!(progress)
}
}else {
let detal = speed.y/100.0
self.progress -= detal/100.0
print("progress = \(self.progress)")
if self.currentProgressBlock != nil {
self.currentProgressBlock!(progress)
}
}
break
case .ended:
break
default:
break
}
}
}
有提供常用的属性
- direction //当前方向
- progress //初始时刻的进度
- myBackgroundColor// 背景条的颜色
- foregroundColor// 前景色
- cornerRadius//控件的圆角
- currentProgressBlock//一个闭包的回调
如何使用
//
// ViewController.swift
// MySliderDemo
//
// Created by ZZ on 2022/5/27.
//
import UIKit
class ViewController: UIViewController {
var progress = 0.0
override func viewDidLoad() {
super.viewDidLoad()
let label = UILabel()
label.backgroundColor = .orange
label.textAlignment = .center
view.addSubview(label)
label.snp.makeConstraints { make in
make.centerX.equalTo(view.snp.centerX)
make.width.equalTo(100.0)
make.height.equalTo(50)
make.top.equalTo(view.snp.top).offset(300.0)
}
let customView = MyCustomSliderView()
customView.cornerRadius = 25.0
customView.myBackgroundColor = .red
view.addSubview(customView)
customView.snp.makeConstraints { make in
make.center.equalToSuperview()
make.leading.equalTo(view).offset(20)
make.trailing.equalTo(view).offset(-20)
make.height.equalTo(50)
}
customView.currentProgressBlock = { progress in
label.text = "\(Int(100.0*progress))%"
}
DispatchQueue.main.asyncAfter(deadline: .now()+0.0001) {
customView.progress = 0.5
label.text = "\(Int(0.5*100.0))%"
}
let label2 = UILabel()
label2.backgroundColor = .orange
label2.textAlignment = .center
view.addSubview(label2)
label2.snp.makeConstraints { make in
make.centerX.equalTo(view)
make.top.equalTo(view.snp.centerY).offset(50)
make.width.equalTo(100)
make.height.equalTo(50)
}
let customView2 = MyCustomSliderView()
customView2.foregroundColor = .purple
customView2.direction = .vertical
view.addSubview(customView2)
customView2.snp.makeConstraints { make in
make.centerX.equalTo(view)
make.top.equalTo(view.snp.centerY).offset(150)
make.width.equalTo(50)
make.height.equalTo(200)
}
customView2.currentProgressBlock = { progress in
label2.text = "\(Int(100.0*progress))%"
}
DispatchQueue.main.asyncAfter(deadline: .now()+0.0001) {
customView2.progress = 0.8
label2.text = "\(Int(0.8*100.0))%"
}
}
}
结尾
2022年还在更新iOS技术文章，实属不易，小伴们,觉得有点用的话，或者已经看到这里面来的请点赞加关注吧~~
后续分享更多iOS原生技术及物联网技术相关文章。如果有任何疑问的话，欢迎在下方留言~
网友评论