效果图：
image
使用方式
UIView，UIImageView，UIButton 一样
let mView = MView()
//是否开启水波纹效果，默认开启
mView.rippleEnable = true
//设置水波纹可以扩散至view外
mView.setRippleStyle(.unbounded)
mView.onClick {
//点击事件
}
UIView
import MaterialComponents
class MView :UIView {
//水波纹效果view
private var rippleView : MDCRippleView?
//是否开启水波纹效果
var rippleEnable = true
var onClick :(()->())?
// @objc func click(){
// onClick?()
// }
//设置点击事件
func onClick(todo : @escaping () ->()){
self.onClick = todo
self.isUserInteractionEnabled = true
//使用此方法设置点击事件会拦截触摸事件，无法显示水波纹效果
// let tapGesture = UITapGestureRecognizer(target: self, action: #selector(self.click))
// tapGesture.numberOfTapsRequired = 1
// self.addGestureRecognizer(tapGesture)
if rippleEnable {
//加入rippleview
if rippleView == nil {
rippleView = MDCRippleView(frame: self.bounds)
}
addSubview(rippleView!)
}
}
/**
扩散效果
.bounded - 扩散在view内
.unbounded - 可扩散至view外
*/
func setRippleStyle(_ style:MDCRippleStyle){
if rippleView == nil {
rippleView = MDCRippleView(frame: self.bounds)
}
rippleView?.rippleStyle = style
}
/**
触摸事件 - 开始触摸
*/
override func touchesBegan(_ touches: Set, with event: UIEvent?) {
super.touchesBegan(touches, with: event)
if rippleEnable {
//触摸位置
let point = ((touches as NSSet).anyObject() as AnyObject).location(in:self)
//设置rippleview的圆角 = 父view的圆角
rippleView?.layer.cornerRadius = self.layer.cornerRadius
//.unbounded 时，扩散的半径
rippleView?.maximumRadius = sqrt(self.bounds.width*self.bounds.width + self.bounds.height*self.bounds.height)/2
//开始扩散动画
rippleView?.beginRippleTouchDown(at: point, animated: true, completion: nil)
}
}
/**
触摸结束
*/
override func touchesEnded(_ touches: Set, with event: UIEvent?) {
super.touchesEnded(touches, with: event)
if rippleEnable {
//收回扩散
rippleView?.beginRippleTouchUp(animated: true, completion: nil)
}
onClick?()
}
/**
触摸取消
*/
override func touchesCancelled(_ touches: Set, with event: UIEvent?) {
super.touchesCancelled(touches, with: event)
if rippleEnable {
//收回扩散
rippleView?.beginRippleTouchUp(animated: true, completion: nil)
}
}
}
UIImageView
import MaterialComponents
class MImageView :UIImageView {
//同UIView
}
UIButton
import MaterialComponents
class MButton: UIButton {
private var rippleView : MDCRippleView?
var rippleEnable = true
private var onClick :(()->())?
@objc func click(){
onClick?()
}
func onClick(todo : @escaping () ->()){
self.onClick = todo
//添加点击事件
self.addTarget(self, action: #selector(self.click), for: .touchUpInside)
//取消点击图片高亮
adjustsImageWhenHighlighted = false
if rippleEnable {
if rippleView == nil {
rippleView = MDCRippleView(frame: self.bounds)
}
addSubview(rippleView!)
}
}
func setRippleStyle(_ style:MDCRippleStyle){
if rippleView == nil {
rippleView = MDCRippleView(frame: self.bounds)
}
rippleView?.rippleStyle = style
}
override func touchesBegan(_ touches: Set, with event: UIEvent?) {
super.touchesBegan(touches, with: event)
if rippleEnable {
let point = ((touches as NSSet).anyObject() as AnyObject).location(in:self)
rippleView?.layer.cornerRadius = self.layer.cornerRadius
rippleView?.maximumRadius = sqrt(self.bounds.width*self.bounds.width + self.bounds.height*self.bounds.height)/2
rippleView?.beginRippleTouchDown(at: point, animated: true, completion: nil)
}
}
override func touchesEnded(_ touches: Set, with event: UIEvent?) {
super.touchesEnded(touches, with: event)
if rippleEnable {
rippleView?.beginRippleTouchUp(animated: true, completion: nil)
}
}
override func touchesCancelled(_ touches: Set, with event: UIEvent?) {
super.touchesCancelled(touches, with: event)
if rippleEnable {
rippleView?.beginRippleTouchUp(animated: true, completion: nil)
}
}
}
水波纹效果开源库 点击这里
同理，cell中同样可以使用，以UICollectionViewCell为例，代码如下：
UICollectionViewCell
import MaterialComponents
class MCollectionViewCell: UICollectionViewCell {
private var rippleView : MDCRippleView!
//是否开启水波纹效果
var rippleEnable = true
override init(frame: CGRect) {
super.init(frame: frame)
//加入view
rippleView = MDCRippleView(frame: bounds)
addSubview(rippleView)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//设置要显示水波纹效果的view，不设置的话默认扩散至整个cell
func setRippleView(_ view:UIView){
rippleView.frame = view.bounds
view.addSubview(rippleView)
}
//触摸事件
override func touchesBegan(_ touches: Set, with event: UIEvent?) {
super.touchesBegan(touches, with: event)
if rippleEnable {
let point = ((touches as NSSet).anyObject() as AnyObject).location(in:self)
rippleView?.beginRippleTouchDown(at: point, animated: true, completion: nil)
}
}
override func touchesEnded(_ touches: Set, with event: UIEvent?) {
super.touchesEnded(touches, with: event)
if rippleEnable {
rippleView?.beginRippleTouchUp(animated: true, completion: nil)
}
}
override func touchesCancelled(_ touches: Set, with event: UIEvent?) {
super.touchesCancelled(touches, with: event)
if rippleEnable {
rippleView?.beginRippleTouchUp(animated: true, completion: nil)
}
}
}
android水波纹加光圈扩散效果 swift UIView优雅的添加点击事件 android Material Design 水波纹扩散效果...
