摘要

在学习小程序时，看到小程序中的一个样式属性hover-class,通过设置这个属性，就可以给点击的控件添加一个高亮效果。所以也就萌生了在 Swift 也实现一个类似的功能的想法，开干。

下面代码是给 view 控件添加一个高亮效果，高亮时，页面的背景颜色会 0.8 的透明度显示

// html 页面{{title}}

// css 页面.hover {opacity: .8;}

设置 Button

先敲定一个简单的需求，设置一个按钮的背景颜色，当按钮高亮状态时，背景颜色 0.8 透明度显示。

看 UIButton 类中，setBackgroundImage(, for: )函数，可以让按钮在默认状态（.normal）和高亮状态（.highlighted）下，显示不同的背景图片，这里可以通过 color 来创建纯色的图片处理。

// MARK: - 设置按钮高亮/// 设置按钮背景和高亮状态颜色////// 设置的 color 是按钮背景颜色，高亮状态下，背景颜色会有 0.8 的 alpha////// - Parameter color: 背景颜色funcsetBackgroundAndHighlighted(withcolor: UIColor) {self.btn.setBackgroundImage(getImageFrom(color: color),for: .normal)self.btn.setBackgroundImage(getImageFrom(color: color.withAlphaComponent(0.8)),for: .highlighted)
}

实现代码的时候，使用了函数withAlphaComponent,它属于 UIColor 类的，达到的效果是，将 color 颜色设置它的 alpha，返回一个新的 color 对象。

这个方法专门测试一下啊，比如 0.8 的 white，使用这个函数设置成 0.6 时，返回的是 0.6 的 white，而不是 0.8×0.6 的 white。

创建单色 image

下面代码是创建单色 image，给到按钮，这里使用的是UIGraphics框架处理图片。

/// 设置单色图片/// - Parameter color: 颜色/// - Returns: 返回该颜色图片funcgetImageFrom(color: UIColor)->UIImage?{letrect =CGRect(x:0, y:0, width:1, height:1)UIGraphicsBeginImageContext(rect.size)guardletcontext =UIGraphicsGetCurrentContext()else{print(" UIGraphicsGetCurrentContext 不存在")UIGraphicsEndImageContext()returnnil}
     context.setFillColor(color.cgColor)
     context.fill(rect)letimg =UIGraphicsGetImageFromCurrentImageContext()UIGraphicsEndImageContext()returnimg
 }

Highlighted（高亮）

需求是实现完了，接下来看一下Highlighted是什么：

highlighted是控件的高亮显示，这里首先明确了它属于UIControl类。那么怎么理解高亮显示呢？释义这样说，当触摸事件进入控件的边界时，控件会高亮显示；当触摸事件离开（比如点击按钮时，松开按钮，touch-up）或者超出控件的边界时，控件会失去高亮显示。并且可以通过isHighlighted属性查看控件是否高亮状态，也可以设置它，让控件保持高亮或者非高亮状态。

Event（事件）

看highlighted的释义中多次提到触摸事件，那么顺势看看能影响到高亮的几个触摸事件，先上总结:

• touchDown是手指按到控件的操作;
• touchDrag是手指在控件中拖动的操作；
• touchUp是手指从控件中松开的操作；
• 最后一个touchCancle就是关闭操作。

如果理解，就简单过一下代码块

///点击事件publicstaticvartouchDown: UIControl.Event {get}///重复点击事件publicstaticvartouchDownRepeat: UIControl.Event {get}///被拖动到控件边界内事件publicstaticvartouchDragInside: UIControl.Event {get}///被拖动到控件边界外事件publicstaticvartouchDragOutside: UIControl.Event {get}///被拖动到控件边界事件publicstaticvartouchDragEnter: UIControl.Event {get}///手指从控件内拖动到它的边界外事件publicstaticvartouchDragExit: UIControl.Event {get}///当手指在控件边界内的事件publicstaticvartouchUpInside: UIControl.Event {get}///当手指超出控件边界中的事件publicstaticvartouchUpOutside: UIControl.Event {get}///取消当前触摸的系统事件publicstaticvartouchCancel: UIControl.Event {get}

依据heighlighted释义并多次测试之后，推断当touchDown时候heighlighted高亮， 当touchDrageOutside、touchUpInside或者touchDragExit时，heightlighted没有高亮效果。

之后就可以设置这几个点击事件，去自定义是否高亮事件，以及做对应的事件处理。

Button 为什么可以设置高亮？

看代码结构，UIButton 是继承自 UIControl 的，而 UIButton 类中只是设置样式等函数，关于 Event 事件都在 UIControl 类中。

那么就可以大致梳理一下，UIControl 中有监听 Event 事件的方法，通过监听 Event 的不同 State，设置isHighlighted，然后isHighlighted的属性监听检测到变化时，处理 UIButton 中提前设置的代码。

由此可以总结，UIButton 就是一个对 UIControl 和 View 的封装，只要是继承 UIControl 类的子类，都可以使用它的高亮属性，或者自定义高亮监听相关事件。

声明：本文部分素材转载自互联网，如有侵权立即删除 。