「OC」KLCPopup使用详情

前言：很多时候需要用到一个小弹窗进行信息的中心展示，或者在底部需要弹出一个弹窗进行二次确认，在寻找过程中发现一个第三方库KLCPopup，使用起来非常方便，可以自定义弹窗视图，可以在屏幕的不同位置、不同方向、不同动效的方式进行弹出和消失，这里简单说一说使用方式吧。

github原地址：KLCPopup

引入Podfile

objectivec 复制代码

pod 'KLCPopup'

引入项目

在终端中cd到项目目录下，进行pod install将KLCPopup引入项目

创建Popup

objectivec 复制代码

/// 默认创建Popup方式
+ (KLCPopup*)popupWithContentView:(UIView*)contentView;

/// 创建自定义Popup方式
/// - Parameters:
///   - contentView: 弹窗View
///   - showType: 展示方式
///   - dismissType: 消失方式
///   - maskType: 弹窗背后蒙层样式
///   - shouldDismissOnBackgroundTouch: 点击背景蒙层弹窗是否消失
///   - shouldDismissOnContentTouch: 点击弹窗视图弹窗是否消失
+ (KLCPopup*)popupWithContentView:(UIView*)contentView
						 showType:(KLCPopupShowType)showType
					  dismissType:(KLCPopupDismissType)dismissType
						 maskType:(KLCPopupMaskType)maskType
		 dismissOnBackgroundTouch:(BOOL)shouldDismissOnBackgroundTouch
			dismissOnContentTouch:(BOOL)shouldDismissOnContentTouch;

建议使用自定义Popup创建方式，这样可以更加方便的创建出满足需求的弹窗，包括展示、消失方式以及交互方式等需求。

设置Popup弹窗展示（位置、时间）

objectivec 复制代码

/// 弹窗出现（如果没有设置Layout则展示在屏幕中心）
- (void)show {
  [self showWithLayout:KLCPopupLayoutCenter];
}

/// 设置弹窗Layout
- (void)showWithLayout:(KLCPopupLayout)layout {
  [self showWithLayout:layout duration:0.0];
}

/// 设置弹窗展示时间
- (void)showWithDuration:(NSTimeInterval)duration {
  [self showWithLayout:KLCPopupLayoutCenter duration:duration];
}

/// 设置弹窗Layout和展示时间
- (void)showWithLayout:(KLCPopupLayout)layout duration:(NSTimeInterval)duration {
  NSDictionary* parameters = @{@"layout" : [NSValue valueWithKLCPopupLayout:layout],
                               @"duration" : @(duration)};
  [self showWithParameters:parameters];
}

/// 设置弹窗的中心点，在view视图上的位置
- (void)showAtCenter:(CGPoint)center inView:(UIView*)view {
  [self showAtCenter:center inView:view withDuration:0.0];
}

/// 设置弹窗的中心点，在view视图上的位置和展示时间
- (void)showAtCenter:(CGPoint)center inView:(UIView *)view withDuration:(NSTimeInterval)duration {
  NSMutableDictionary* parameters = [NSMutableDictionary dictionary];
  [parameters setValue:[NSValue valueWithCGPoint:center] forKey:@"center"];
  [parameters setValue:@(duration) forKey:@"duration"];
  [parameters setValue:view forKey:@"view"];
  [self showWithParameters:[NSDictionary dictionaryWithDictionary:parameters]];
}

建议使用showWithLayout方法来修改弹窗展示位置

Popup弹窗属性

objectivec 复制代码

KLCPopupShowType：展示属性
// KLCPopupShowType: Controls how the popup will be presented.
typedef NS_ENUM(NSInteger, KLCPopupShowType) {
  KLCPopupShowTypeNone = 0, /// 无动画
  KLCPopupShowTypeFadeIn, /// 褪色动画
  KLCPopupShowTypeGrowIn, /// 扩大动画
  KLCPopupShowTypeShrinkIn, /// 缩小动画
  KLCPopupShowTypeSlideInFromTop, /// 从顶部平滑进入
  KLCPopupShowTypeSlideInFromBottom, /// 从底部平滑进入
  KLCPopupShowTypeSlideInFromLeft, /// 从左边平滑进入
  KLCPopupShowTypeSlideInFromRight, /// 从右边平滑进入
  KLCPopupShowTypeBounceIn, /// 从中间弹入
  KLCPopupShowTypeBounceInFromTop, /// 从上面弹入
  KLCPopupShowTypeBounceInFromBottom, /// 从底面弹入
  KLCPopupShowTypeBounceInFromLeft, /// 从左边弹入
  KLCPopupShowTypeBounceInFromRight, /// 从右边弹入
};

KLCPopupShowType：消失属性
// KLCPopupDismissType: Controls how the popup will be dismissed.
typedef NS_ENUM(NSInteger, KLCPopupDismissType) {
  KLCPopupDismissTypeNone = 0,
  KLCPopupDismissTypeFadeOut,
  KLCPopupDismissTypeGrowOut,
  KLCPopupDismissTypeShrinkOut,
  KLCPopupDismissTypeSlideOutToTop,
  KLCPopupDismissTypeSlideOutToBottom,
  KLCPopupDismissTypeSlideOutToLeft,
  KLCPopupDismissTypeSlideOutToRight,
  KLCPopupDismissTypeBounceOut,
  KLCPopupDismissTypeBounceOutToTop,
  KLCPopupDismissTypeBounceOutToBottom,
  KLCPopupDismissTypeBounceOutToLeft,
  KLCPopupDismissTypeBounceOutToRight,
};

KLCPopupMaskType：弹窗背景类型
// KLCPopupMaskType
typedef NS_ENUM(NSInteger, KLCPopupMaskType) {
	KLCPopupMaskTypeNone = 0, // Allow interaction with underlying views.
	KLCPopupMaskTypeClear, // Don't allow interaction with underlying views.
	KLCPopupMaskTypeDimmed, // Don't allow interaction with underlying views, dim background.
};

KLCPopupHorizontalLayout： 横向位置
// KLCPopupHorizontalLayout: Controls where the popup will come to rest horizontally.
typedef NS_ENUM(NSInteger, KLCPopupHorizontalLayout) {
  KLCPopupHorizontalLayoutCustom = 0,
  KLCPopupHorizontalLayoutLeft,
  KLCPopupHorizontalLayoutLeftOfCenter,
  KLCPopupHorizontalLayoutCenter,
  KLCPopupHorizontalLayoutRightOfCenter,
  KLCPopupHorizontalLayoutRight,
};

KLCPopupVerticalLayout： 纵向位置
// KLCPopupVerticalLayout: Controls where the popup will come to rest vertically.
typedef NS_ENUM(NSInteger, KLCPopupVerticalLayout) {
  KLCPopupVerticalLayoutCustom = 0,
  KLCPopupVerticalLayoutTop,
  KLCPopupVerticalLayoutAboveCenter,
  KLCPopupVerticalLayoutCenter,
  KLCPopupVerticalLayoutBelowCenter,
  KLCPopupVerticalLayoutBottom,
};

Popup使用实例

objectivec 复制代码

- (void)clickAlertAction {
CommonAlertView *alertView = [[CommonAlertView alloc] initWithFrame:CGRectMake(0, 0, Common.screenWidth, ([@130 fit] + Common.safeAreaBottom)) withContent:@"确认支付订单？"];
KLCPopup *popup = [KLCPopup popupWithContentView:alertView showType:KLCPopupShowTypeSlideInFromBottom dismissType:KLCPopupDismissTypeSlideOutToBottom maskType:KLCPopupMaskTypeDimmed dismissOnBackgroundTouch:YES dismissOnContentTouch:NO];
[popup showWithLayout:KLCPopupLayoutMake(KLCPopupHorizontalLayoutCenter, KLCPopupVerticalLayoutBottom)];

/// 点击取消按钮
alertView.cancelButtonAction = ^{
	///	弹窗消失
    [popup dismiss:YES];
};

/// 点击确认按钮
alertView.confirmButtonAction = ^{
	///	弹窗消失
    [popup dismiss:YES];
    
    /// 执行自定义操作
    /// xxxx
};

[popup show];
}

动画展示

ps：动画第一次点击了取消，第二次点击了确定

整理不易，望大家多多点赞收藏，希望对大家有所帮助！

如果有误，请各位大佬指点！谢谢大家！！！