Swift-Button 的 highlighted(高亮)
2021-09-04 14:40
1271 查看
摘要
在学习小程序时,看到小程序中的一个样式属性
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 类的子类,都可以使用它的高亮属性,或者自定义高亮监听相关事件。
相关文章推荐
- 学习笔记(09):SwiftUI入门到实战课程-通过Button打开一个模态窗口
- 圆角高亮Button
- Swift01-设置button
- EasySwift/YXJLinksButton 比如注册协议,往往下面有一条横线。也是HTML种a标签的默认效果
- swift创建button、label、imgview、以及添加手势与动画
- 学习笔记(08):SwiftUI入门到实战课程-Button按钮控件的使用
- swift中UIBarButtonItem颜色不正确显示解决办法
- 颜色创建图片、Button的custom、system区别 selected、highlighted区别;
- swift 设置button中文字的位置
- ios关于button高亮不同背景的简单设置方法
- swift地图定位(十五)使用MKUserTrackingBarButtonItem
- swift4 防止button重复点击
- swift button点击事件
- Swift - 推送之本地推送(UILocalNotification)添加Button的点击事件
- iOS开发(Swift)——Button的使用
- Android Button background image pressed/highlighted and disabled states without
- 功能齐全的GridView!Asp.Net中GridView的自定义分页,带箭头的排序,鼠标高亮每一行,无数据时的提醒,点击Button弹出框!
- swift--button的简单实用
- BUG: button点击高亮延迟问题
- Swift-自定义控件之IndicatorButton(带动画的按钮)