FFPopup 是一个轻量级的库,用于以弹出窗口的形式显示自定义视图。
从顶部弹起 并向底部弹起 | 从顶部弹起 并回到顶部 | 向内弹起 并向外弹起 | 变大 并缩小 | 从底部弹起 并滑向底部 | 从底部滑出 并滑向底部 |
---|---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
特性
-
支持多种弹出显示类型
- 无
- 淡入
- 放大进入
- 缩小进入
- 从顶部、底部、左侧、右侧滑入
- 从顶部、底部、左侧、右侧、中心弹入
- 支持自定义
-
支持多种弹出消失类型
- 无
- 淡出
- 放大消失
- 缩小消失
- 滑出到顶部、底部、左侧、右侧
- 弹出到顶部、底部、左侧、右侧、中心
- 支持自定义
-
水平方向布局弹出窗口
- 左侧
- 右侧
- 居中
- 中心左侧
- 中心右侧
- 支持自定义
-
垂直方向布局弹出窗口
- 顶部
- 底部
- 居中
- 上方中心
- 下方中心
- 支持自定义
-
控制是否允许与底层视图交互
- 允许与底层视图交互
- 不允许与底层视图交互
- 不允许与底层视图交互,模糊背景
- 不允许与底层视图交互,模糊背景
- 支持自定义
-
其他
- 完整文档
要求
- iOS 8.0+ / macOS 10.13.6+
- Xcode 10.1 (10B61) +
例子
要运行 "FFPopup
" 项目,请克隆仓库,并在 Xcode 中启动 "FFPopup
"。
$ git clone https://github.com/JonyFang/FFPopup.git
$ cd FFPopup
$ cd Shell && sh install-bundle.sh && sh install-pods.sh && cd ..
$ open FFPopup.xcworkspace
安装
有三种方式在您的项目中使用 FFPopup
CocoaPods
安装Carthage
安装- 手动安装
CocoaPods
CocoaPods 是一个依赖管理器,用于自动化并简化使用类似 "FFPopup
" 这样的第三方库的过程。首先,将以下行添加到您的 Podfile
pod 'FFPopup'
如果要使用 "FFPopup
" 的最新功能,请使用常规外部源依赖项。
pod 'FFPopup', :git => 'https://github.com/JonyFang/FFPopup.git'
这将从主分支直接获取。
其次,将 "FFPopup
" 安装到您的项目中
$ pod install
Carthage
Carthage 是一个去中心化的依赖管理器,它构建您的依赖并为您提供二进制框架。
您可以使用以下命令通过 Homebrew 来安装 Carthage
$ brew update
$ brew install carthage
要使用 Carthage 在 Xcode 项目中集成 "FFPopup
",请在您的 Cartfile
中指定它
github "JonyFang/FFPopup"
运行以下命令来构建框架
$ carthage update
将构建好的 "FFPopup.framework
" 二进制文件从 "Carthage/Build/iOS
" 拖动到您的 Xcode 项目中。
在您的应用程序目标 "构建阶段" 设置选项卡的 "Build Phases" 中,点击 "+ icon
" 并选择 "New Run Script Phase
"。创建一个 "Run Script
" 并指定您的 shell(例如:"/bin/sh
"),在 shell 下方添加以下内容到脚本区域
/usr/local/bin/carthage copy-frameworks
将以下路径添加到 "Input Files
" 中您想要使用的框架之下。
$(SRCROOT)/Carthage/Build/iOS/FFPopup.framework
有关详细介绍,请参阅 将框架添加到应用程序
手动
您还可以直接将 FFPopup.h
和 FFPopup.m
源文件添加到您的项目中。
- 下载最新代码版本或者将仓库作为git子模块添加到您受git跟踪的项目中。
- 在Xcode中打开您的项目,然后将
FFPopup.h
和FFPopup.m
拖放到项目中(使用"Product Navigator view"
)。如果您在项目外提取了代码存档,请确保选择Copy items
。 - 您可以通过添加
#import "FFPopup.h"
将FFPopup
包含到需要的地方。
Swift
虽然 FFPopup
是用 Objective-C 编写的,但使用起来毫不费力。如果您使用 CocoaPods,请在您的 Podfile 中添加以下行
use_frameworks!
如果您是手动添加的 FFPopup
,请添加一个 bridging header 文件到您的项目中并包含 FFPopup
头文件。
使用
在您想使用库的地方导入它。
- Objective-C
#import <FFPopup.h>
- (void)showPopup {
FFPopup *popup = [FFPopup popupWithContentView:self.contentView showType:FFPopupShowType_BounceIn dismissType:FFPopupDismissType_ShrinkOut maskType:FFPopupMaskType_Dimmed dismissOnBackgroundTouch:YES dismissOnContentTouch:NO];
FFPopupLayout layout = FFPopupLayoutMake(FFPopupHorizontalLayout_Center, FFPopupVerticalLayout_Center);
[popup showWithLayout:layout];
}
- Swift
import FFPopup
func showPopup() {
let popup = FFPopup(contentView: self.contentView, showType: .bounceIn, dismissType: .shrinkOut, maskType: .dimmed, dismissOnBackgroundTouch: true, dismissOnContentTouch: false)
let layout = FFPopupLayout(horizontal: .center, vertical: .center)
popup.show(layout: layout)
}
自定义
1.FFPopupShowType
余万元内容视图的动画过渡。控制弹出窗口如何展示。
默认值是 FFPopupShowType_BounceInFromTop
。
FFPopupShowType |
---|
FFPopupShowType_None |
FFPopupShowType_FadeIn |
FFPopupShowType_GrowIn |
FFPopupShowType_ShrinkIn |
FFPopupShowType_SlideInFromTop |
FFPopupShowType_SlideInFromBottom |
FFPopupShowType_SlideInFromLeft |
FFPopupShowType_SlideInFromRight |
FFPopupShowType_BounceIn |
FFPopupShowType_BounceInFromTop |
FFPopupShowType_BounceInFromBottom |
FFPopupShowType_BounceInFromLeft |
FFPopupShowType_BounceInFromRight |
2.FFPopupDismissType
内容视图消失时的动画过渡。控制弹出窗口如何消失。
默认值是 FFPopupDismissType_BounceOutToBottom
。
FFPopupDismissType |
---|
FFPopupDismissType_None |
FFPopupDismissType_FadeOut |
FFPopupDismissType_GrowOut |
FFPopupDismissType_ShrinkOut |
FFPopupDismissType_SlideOutToTop |
FFPopupDismissType_SlideOutToBottom |
FFPopupDismissType_SlideOutToLeft |
FFPopupDismissType_SlideOutToRight |
FFPopupDismissType_BounceOut |
FFPopupDismissType_BounceOutToTop |
FFPopupDismissType_BounceOutToBottom |
FFPopupDismissType_BounceOutToLeft |
FFPopupDismissType_BounceOutToRight |
3.FFPopupMaskType
遮罩防止背景触碰传递到底层视图。控制是否允许与底层视图交互。
默认值是 FFPopupMaskType_Dimmed
。
FFPopupMaskType |
---|
FFPopupMaskType_None |
FFPopupMaskType_Clear |
FFPopupMaskType_Dimmed |
4.其他属性
属性名称 | 描述 | 默认值 |
---|---|---|
dimmedMaskAlpha | 覆盖淡化遮罩的alpha值。 | 0.5 |
showInDuration | 覆盖显示动画的持续时间。 | 0.15 |
dismissOutDuration | 覆盖消失动画的持续时间。 | 0.15 |
shouldDismissOnBackgroundTouch | 如果为 YES ,则当背景被触碰时,弹出窗口将消失。 |
YES |
shouldDismissOnContentTouch | 如果为 YES ,则当内容视图被触碰时,弹出窗口将消失。 |
NO |
5 Blocks
/**
A block to be executed when showing animation started.
The default value is nil.
*/
@property (nonatomic, copy, nullable) void(^willStartShowingBlock)(void);
/**
A block to be executed when showing animation finished.
The default value is nil.
*/
@property (nonatomic, copy, nullable) void(^didFinishShowingBlock)(void);
/**
A block to be executed when dismissing animation started.
The default value is nil.
*/
@property (nonatomic, copy, nullable) void(^willStartDismissingBlock)(void);
/**
A block to be executed when dismissing animation finished.
The default value is nil.
*/
@property (nonatomic, copy, nullable) void(^didFinishDismissingBlock)(void);
6.便捷初始化器
使用自定义值创建一个新的弹出窗口。
/**
Convenience Initializers
Create a new popup with `contentView`.
*/
+ (FFPopup *)popupWithContentView:(UIView *)contentView;
/**
Convenience Initializers
Create a new popup with custom values.
@param contentView The view you want to appear in popup.
@param showType The default value is `FFPopupShowType_BounceInFromTop`.
@param dismissType The default value is `FFPopupDismissType_BounceOutToBottom`.
@param maskType The default value is `FFPopupMaskType_Dimmed`.
@param shouldDismissOnBackgroundTouch The default value is `YES`.
@param shouldDismissOnContentTouch The default value is `NO`.
*/
+ (FFPopup *)popupWithContentView:(UIView *)contentView
showType:(FFPopupShowType)showType
dismissType:(FFPopupDismissType)dismissType
maskType:(FFPopupMaskType)maskType
dismissOnBackgroundTouch:(BOOL)shouldDismissOnBackgroundTouch
dismissOnContentTouch:(BOOL)shouldDismissOnContentTouch;
7. 显示弹出窗口
/**
Show popup with center layout.
`FFPopupVerticalLayout_Center` & `FFPopupHorizontalLayout_Center`
Showing animation is determined by `showType`.
*/
- (void)show;
/**
Show popup with specified layout.
Showing animation is determined by `showType`.
*/
- (void)showWithLayout:(FFPopupLayout)layout;
/**
Show and then dismiss popup after `duration`.
If duration is `0.0` or `less`, it will be considered infinity.
*/
- (void)showWithDuration:(NSTimeInterval)duration;
/**
Show popup with specified `layout` and then dismissed after `duration`.
If duration is `0.0` or `less`, it will be considered infinity.
*/
- (void)showWithLayout:(FFPopupLayout)layout duration:(NSTimeInterval)duration;
/**
Show popup at point in view's coordinate system.
If view is nil, will use screen base coordinates.
*/
- (void)showAtCenterPoint:(CGPoint)point inView:(UIView *)view;
/**
Show popup at point in view's coordinate system and then dismissed after duration.
If view is nil, will use screen base coordinates.
If duration is `0.0` or `less`, it will be considered infinity.
*/
- (void)showAtCenterPoint:(CGPoint)point inView:(UIView *)view duration:(NSTimeInterval)duration;
8. 关闭弹出窗口
/**
Dismiss popup.
Use `dismissType` if animated is `YES`.
*/
- (void)dismissAnimated:(BOOL)animated;
/**
Dismiss all the popups in the app.
*/
+ (void)dismissAllPopups;
/**
Dismiss the popup for contentView.
*/
+ (void)dismissPopupForView:(UIView *)view animated:(BOOL)animated;
/**
Dismiss super popup.
Iterate over superviews until you find a `FFPopup` and dismiss it.
*/
+ (void)dismissSuperPopupIn:(UIView *)view animated:(BOOL)animated;
待办事项列表
这是 FFPopup
项目的待办事项列表。您可以加入我们,成为贡献者。
- 支持背景遮罩的模糊选项
- 支持按键显示/隐藏
- 支持拖动关闭
有关贡献指南,请参阅 CONTRIBUTING 文件。
实时演示
我的应用 时间卡 - 倒计时(永不忘记重要日子)正在使用 FFPopup
。您可以下载它并在多台设备上尝试,体验其效果。

贡献者
本项目的存在归功于所有贡献者。贡献
支持者
感谢所有我们的支持者!您的支持对这个项目至关重要,并激励我们继续前进。
赞助商
感谢所有我们的赞助商!成为赞助商
许可证
FFPopup
在 MIT 许可证 下可用。有关更多信息,请参阅 LICENSE 文件。