iOS OC swift 自定义 popover 泡泡

2018-11-21 11:57:23 浏览数 (1)

环境：

代码语言：javascript复制
Xcode：Xcode 8.2

Swift：swift3

git 地址：https://github.com/TieShanWang/KKPopover

pod 集成：pod 'KKPopover'

【注意】pod 版本，swift 3 支持，以 3. 开头，同理 swift4 以 4. 开头

首先先看效果：

popover.gif

  • 灰色区域 底层视图
  • 棕色 popover 泡泡不能超出的区域，popover 是不能超出屏幕或者离屏幕太近，否则效果不好。棕色区域是可以设置的
  • 红色 底层箭头视图的边框
  • 白色 底层箭头视图的背景颜色
  • 蓝色 自定义内容区域，在此区域（contentView）可以添加希望展示的内容
  • 加号按钮 模拟了 sourceView 所在的位置。可以看到当 sourceView（加号按钮） 在不同地方的时候，popover 自动更改方向、调整箭头方向、位置以适应不同的 sourceView

类说明

open class KKPopover: UIView

  • 此视图是底层视图，一般是添加到 window 上，与屏幕宽高一致
  • touchThrough: Bool
代码语言：javascript复制
/// 点击穿透
/// 设置为 true 点击空白地方，穿透点击
  • touchDismiss: Bool
代码语言：javascript复制
/// 是否点击空白地方自动消失
/// 设置为 true 的时候，空白地方可以处理触摸事件
/// 当 touchThrough 为 true 的时候，此字段不起作用
  • arrowDirection: UIPopoverArrowDirection
代码语言：javascript复制
/// 箭头方向
/// 当设置为 .any 时，采用智能查找方向，设置一个比较合适的方向
  • perferArrowDirection: [UIPopoverArrowDirection]
代码语言：javascript复制
/// 指定箭头方向查找顺序
/// 如果 arrowDirection 设置为 any（按照此顺序查找合适的方向，如果查找不到，则按照最合适(智能)的方向）
/// 相当于增加了方向的优先级
  • minScreenEdg: CGFloat = 10
代码语言：javascript复制
/// 到屏幕边缘的最小距离，上图片中的棕色区域
  • contentInset: CGFloat
代码语言：javascript复制
contentView 缩进，contentView 在底层箭头视图中四周的缩进。防止内容覆盖圆角
  • targetSize: CGSize
代码语言：javascript复制
/// 需要展示内容的大小，此字段一定需要重新设置
/// 并且宽高大小加上 minScreenEdg contentInset 不能大于屏幕宽高
  • contentView: UIView
代码语言：javascript复制
/// 自定义内容请在此视图上增加
  • arrowView: KKPopoverArrowView
代码语言：javascript复制
箭头视图
  • delegate: KKPopoverDelegate
  • func showInView(view: UIView?, sourceView: UIView)
代码语言：javascript复制
/// 根据 sourceView 展示在指定视图中
/// - Parameters:
///   - view: 添加到的视图，不传则添加到 window 上
///   - sourceView: 视图来源，箭头指向的视图
  • func dismiss()
代码语言：javascript复制
消失
  • func getBestDirection(sourceRect: CGRect, size: CGSize) -> UIPopoverArrowDirection
代码语言：javascript复制
/// sourceRect： sourceView 相对于 self (KKPopover) 的位置
/// size：self 的 size
/// 当 arrowDirection 为 .any 时，调用此方法获最合适方向
/// 智能计算出最好的方向
/// 重写此方法可以自定义最合适方向
  • func isDirectionOk(sourceRect: CGRect, size: CGSize, direction: UIPopoverArrowDirection) -> Bool
代码语言：javascript复制
/// sourceRect： sourceView 相对于 self (KKPopover) 的位置
/// size：self 的 size
/// 确定指定方向是否合适
/// 当 arrowDirection 为 .any 并且设置 perferArrowDirection 时，查找 perferArrowDirection 内部合适的方向使用

open class KKPopoverArrowView: UIView

箭头视图的配置项

代码语言：javascript复制
    /// 边角弧度
    open var borderRadius: CGFloat = 5;
    
    /// 线条宽度
    open var lineWidth: CGFloat = 1
    
    /// 填充颜色
    open var fillColor: UIColor = UIColor.white
    
    /// 边沿线条颜色
    open var lineColor: UIColor = UIColor.white
    
    /// 箭头方向
    open var arrowDirection: UIPopoverArrowDirection = .any
    
    /// 箭头顶尖半径
    open var arrowTipRadius: CGFloat = 0
    
    /// 箭头底部基座宽度
    open var arrowBaseWidth: CGFloat = 17
    
    /// 箭头高度，从顶部中心点到基座距离
    open var arrowHeight: CGFloat = 10
    
    /// 箭头边缘到边框最小的距离
    open var minArrowEdg: CGFloat = 20
    
    /// 线条交接处风格
    open var lineJoin: CGLineJoin = CGLineJoin.round

待完善

  • 增加支持设置背景图片，以适应各种UI
  • 增加自带毛玻璃效果（可以取消）
  • 增加可以自定义智能选择方向的回调
ios swift xcode git http

0 人点赞