Swift-Button 的 highlighted（高亮）

2021-10-28 17:05:52

摘要

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

下面代码是给 view 控件添加一个高亮效果，高亮时，页面的背景颜色会 0.8 的透明度显示
// html 页面
<view class="tool-bar my-class" 
   hover-class="hover"
   hover-stay-time="50">
<image src="{{icon}}"/>
<text>{{title}}</text>
</view>
// css 页面
.hover {
opacity: .8;
}

设置 Button

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

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

// MARK: - 设置按钮高亮
/// 设置按钮背景和高亮状态颜色
///
/// 设置的 color 是按钮背景颜色，高亮状态下，背景颜色会有 0.8 的 alpha
/// 
/// - Parameter color: 背景颜色
func setBackgroundAndHighlighted(with color: 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.8x0.6 的 white。

创建单色 image

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

  /// 设置单色图片
  /// - Parameter color: 颜色
  /// - Returns: 返回该颜色图片
  func getImageFrom(color: UIColor) -> UIImage? {
      let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
      UIGraphicsBeginImageContext(rect.size)
      guard let context = UIGraphicsGetCurrentContext() else {
          print(" UIGraphicsGetCurrentContext 不存在")
          UIGraphicsEndImageContext()
          return nil
      }
      context.setFillColor(color.cgColor)
      context.fill(rect)
      let img = UIGraphicsGetImageFromCurrentImageContext()
      UIGraphicsEndImageContext()
      return img
  }

Highlighted（高亮）

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

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

Event（事件）

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

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

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

/// 点击事件
public static var touchDown: UIControl.Event { get }
/// 重复点击事件
public static var touchDownRepeat: UIControl.Event { get }
/// 被拖动到控件边界内事件
public static var touchDragInside: UIControl.Event { get }
/// 被拖动到控件边界外事件
public static var touchDragOutside: UIControl.Event { get }
/// 被拖动到控件边界事件
public static var touchDragEnter: UIControl.Event { get }
/// 手指从控件内拖动到它的边界外事件
public static var touchDragExit: UIControl.Event { get }
/// 当手指在控件边界内的事件
public static var touchUpInside: UIControl.Event { get }
/// 当手指超出控件边界中的事件
public static var touchUpOutside: UIControl.Event { get }
/// 取消当前触摸的系统事件
public static var touchCancel: 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 类的子类，都可以使用它的高亮属性，或者自定义高亮监听相关事件。