Latest 3.0.0
Homepage https://github.com/TieShanWang/KKPopover
License MIT
Platforms ios 8.0
Frameworks UIKit
Authors

swift 自定义 popover 泡泡

环境:


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
    /// 点击穿透
    /// 设置为 true 点击空白地方,穿透点击
  • touchDismiss: Bool

    /// 是否点击空白地方自动消失
    /// 设置为 true 的时候,空白地方可以处理触摸事件
    /// 当 touchThrough 为 true 的时候,此字段不起作用
  • arrowDirection: UIPopoverArrowDirection

    /// 箭头方向
    /// 当设置为 .any 时,采用智能查找方向,设置一个比较合适的方向
  • perferArrowDirection: [UIPopoverArrowDirection]

    /// 指定箭头方向查找顺序
    /// 如果 arrowDirection 设置为 any(按照此顺序查找合适的方向,如果查找不到,则按照最合适(智能)的方向)
    /// 相当于增加了方向的优先级
  • minScreenEdg: CGFloat = 10

    /// 到屏幕边缘的最小距离,上图片中的棕色区域
  • contentInset: CGFloat

    contentView 缩进,contentView 在底层箭头视图中四周的缩进。防止内容覆盖圆角
  • targetSize: CGSize

    /// 需要展示内容的大小,此字段一定需要重新设置
    /// 并且宽高大小加上 minScreenEdg contentInset 不能大于屏幕宽高
  • contentView: UIView

    /// 自定义内容请在此视图上增加
  • arrowView: KKPopoverArrowView

    箭头视图
  • delegate: KKPopoverDelegate

  • func showInView(view: UIView?, sourceView: UIView)

    /// 根据 sourceView 展示在指定视图中
    /// - Parameters:
    ///   - view: 添加到的视图,不传则添加到 window 上
    ///   - sourceView: 视图来源,箭头指向的视图
  • func dismiss()

    消失
  • func getBestDirection(sourceRect: CGRect, size: CGSize) -> UIPopoverArrowDirection

    /// sourceRect: sourceView 相对于 self (KKPopover) 的位置
    /// size:self 的 size
    /// 当 arrowDirection 为 .any 时,调用此方法获最合适方向
    /// 智能计算出最好的方向
    /// 重写此方法可以自定义最合适方向
  • func isDirectionOk(sourceRect: CGRect, size: CGSize, direction: UIPopoverArrowDirection) -> Bool
    /// sourceRect: sourceView 相对于 self (KKPopover) 的位置
    /// size:self 的 size
    /// 确定指定方向是否合适
    /// 当 arrowDirection 为 .any 并且设置 perferArrowDirection 时,查找 perferArrowDirection 内部合适的方向使用

open class KKPopoverArrowView: UIView

箭头视图的配置项


    /// 边角弧度
    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
  • 增加自带毛玻璃效果(可以取消)
  • 增加可以自定义智能选择方向的回调

Latest podspec

{
    "name": "KKPopover",
    "version": "3.0.0",
    "swift_version": "3.0",
    "summary": "swift u81eau5b9au4e49 popover u6ce1u6ce1",
    "description": "swift u81eau5b9au4e49 popover u6ce1u6ce1uff0cu53efu4ee5u81eau5b9au4e49u7badu5934uff0cu80ccu666fuff0cu5185u5bb9nu3010u6ce8u610fu3011pod u7248u672cuff0cswift 3 u652fu6301uff0cu4ee5 3.+u5f00u5934uff0cu540cu7406 swift4 u4ee5 4.+ u5f00u5934",
    "homepage": "https://github.com/TieShanWang/KKPopover",
    "license": "MIT",
    "authors": {
        "wangtieshan": "[email protected]"
    },
    "platforms": {
        "ios": "8.0"
    },
    "source": {
        "git": "https://github.com/TieShanWang/KKPopover.git",
        "tag": "3.0.0"
    },
    "frameworks": "UIKit",
    "source_files": "KKPopover/KKPopover/**/*.{swift}"
}

Pin It on Pinterest

Share This