Code Monkey home page Code Monkey logo

jxpopupview's Introduction

JXPopupView

一个轻量级的自定义视图弹出框架,可灵活配置动画、背景风格。

特性

  • 默认提供丰富的动画效果,而且可以灵活的扩展配置,只要遵从并实现PopupViewAnimator协议即可;
  • 使用范围更广,通过view封装,可以在任何view上面展示,并不局限于UIViewController;
  • 弹框背景配置灵活,借鉴了MBProgressHUD对背景视图的处理逻辑;
  • 交互细节可配置,提供了isDismissibleisInteractiveisPenetrable属性进行配置;

预览

动画效果

动画效果 GIF
渐隐渐现 GIF
缩放 GIF
往左 GIF
往右 GIF
往下 GIF
往上 GIF
弹性动画 GIF
完全自定义动画 GIF

Layout布局方式

动画效果 GIF
Top顶部 GIF
Bottom底部 GIF
Leading前部 GIF
Trailing尾部 GIF
Center 居中(无示意图)
Frame 自定义frame(无示意图)

背景风格

背景风格 GIF
固定色值 GIF
blur light GIF
blur dark GIF

指定containerView

指定containerView GIF
Window GIF
UIViewController.view GIF
CustomView GIF

要求

iOS: 9+ XCode: 12.1+ swift: 5.0+

安装

CocoaPods

在Podfile文件里面添加

pod 'JXPopupView'

然后再pod install(最好先pod update)

使用

//- 确定contentView的布局方式
enum Layout {
    case center(Center)
    case top(Top)
    case bottom(Bottom)
    case leading(Leading)
    case trailing(Trailing)
    case frame(CGRect)
}
//如果contentView重载了intrinsicContentSize属性并返回其内容的CGSize,就无需再设置width、height值。
let layout: BaseAnimator.Layout = .center(.init(offsetY: 0, offsetX: 0, width: 200, height: 200))
//- 确定动画效果
let animator = FadeInOutAnimator(layout: layout)
//- 初始化JXPopupView
let contentView = TestAlertView()
let popupView = JXPopupView(containerView: containerView, contentView: contentView, animator: animator)
//- 配置交互
popupView.isDismissible = true
popupView.isInteractive = true
popupView.isPenetrable = false
//- 配置背景
popupView.backgroundView.style = self.backgroundStyle
popupView.backgroundView.blurEffectStyle = self.backgroundEffectStyle
popupView.backgroundView.color = self.backgroundColor
//- 展示popupView
popupView.display(animated: true, completion: nil)
//- 消失popupView
//通过extension提供的popupView方法,获取JXPopupView进行操作,可以不用全局持有JXPopupView属性
contentView.popupView()?.dismiss(animated: true, completion: nil)

动画自定义

PopupViewAnimator协议方法

    /// 初始化配置动画驱动器
    ///
    /// - Parameters:
    ///   - popupView: PopupView
    ///   - contentView: 自定义的弹框视图
    ///   - backgroundView: 背景视图
    /// - Returns: void
    func setup(popupView: PopupView, contentView: UIView, backgroundView: PopupView.BackgroundView)containerView: UIView)

    /// 处理展示动画
    ///
    /// - Parameters:
    ///   - contentView: 自定义的弹框视图
    ///   - backgroundView: 背景视图
    ///   - animated: 是否需要动画
    ///   - completion: 动画完成后的回调
    /// - Returns: void
    func display(contentView: UIView, backgroundView: JXBackgroundView, animated: Bool, completion: @escaping ()->())

    /// 处理消失动画
    ///
    /// - Parameters:
    ///   - contentView: 自定义的弹框视图
    ///   - backgroundView: 背景视图
    ///   - animated: 是否需要动画
    ///   - completion: 动画完成后的回调
    func dismiss(contentView: UIView, backgroundView: JXBackgroundView,animated: Bool, completion: @escaping ()->())

自定义动画建议

  • 完全自定义动画 可以继承BaseAnimator或者自己新建一个类,遵从PopupViewAnimator协议,实现对应方法即可。参考demo工程的BaseAnimator

证书

JXPopupView is available under the MIT license. See the LICENSE file for more info.

jxpopupview's People

Contributors

pujiaxin33 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

jxpopupview's Issues

有OC版本吗

看起来很好用,可以项目用的swift3,有OC版本就好了

旁白点击dismiss issue

没明白 public var didDismissCallback: (()->())? 这几个变量的作用。我的一个比较重要的需求是这样的:点击旁白dismiss PopupView,我想监听到这个事件,然后做一些处理。请问有什么办法实现吗?

无法获取backgroundViewClicked回调方法

不好意思,还是没明白如何调用didDismissCallback,来监听backgroundViewClicked然后dismiss回调,能不能给个示例?
let popupView = JXPopupView(containerView: containerView, contentView: contentView, animator: animator!)
//配置交互
popupView.isDismissible = true
popupView.isInteractive = true
//可以设置为false,再点击弹框中的button试试?
// popupView.isInteractive = false
popupView.isPenetrable = false
//- 配置背景
popupView.backgroundView.style = self.backgroundStyle
popupView.backgroundView.blurEffectStyle = self.backgroundEffectStyle
popupView.backgroundView.color = self.backgroundColor
popupView.display(animated: true, completion: nil)

就比如你这个demo方法displayPopupView(),如何才能监听到由backgroundViewClicked触发的dismiss?不甚感谢!

有输入框的Bug

当View里面有输入框时 ,使用了IQBordManager ,输入框不会跟着键盘往上移

加在tableView上会随tableView滚动

作者好,一般常规的需求:如京东、美团等,是导航栏底部会有一行或者多行操作区域,里面不同的按钮会弹不同的框,这种为了效果,试过就只有加在tableView效果好一些,不过发现这个时间tableView滚动,不会收遮罩,弹框整体会随tableView滚动;
有些建议:

  1. 框架可以加一个是否弹出的状态,如isPresent,这样一个是可以在多个按钮都会触发弹框的时候,做判断是否当然有弹出,可以先收起旧的弹框再弹出新的;
  2. 关于前面加在tableView上会随着滚动,可以在scrollViewDidScoroll代理方法中也判断,有弹出,就一滚动就隐藏,但不能开启animated,不然遮罩隐藏效果会比较差,关掉animated还凑合,但是不够完美.

Present时会消失,Dismiss后又显示,而不是一直显示

1、先在KeyWindow上显示一个Popup
2、获取TopController 来Present一个ControllerA
3、Dismiss ControllerA

整个过程中,在2步时Popup会消失,3的时候又重新显示
理想状态下因该是 Present Dismiss都一直显示,Popup不会消失
这问题出现的原因是什么?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.