详解开源项目：MMPopupView（弹出框组件）

来源：互联网发布：手机屏幕画笔软件编辑：程序博客网时间：2024/05/27 09:49

前言

弹出框组件应该是绝大多数应用都少不了的(只有极少数精心设计的APP会用不到) 当然我们的APP也不例外之前我们APP的弹出框组件是我用pop写的可是后来发现与系统原生动画有些冲突(pop内部用到了CATransaction 导致跟系统动画同时发生时会有问题) 所以上周花了大半天时间重写了一下MMPopupView这个组件

因为新写的组件完全是用Masonry写的我觉得是个非常好的示例教程结合之前我写的Masonry入门教程应该可以更好的理解和运用Masonry/Autolayout 所以我又花了一点时间重新整理成了一个简单的开源库有兴趣的朋友可以研究一下

运行的demo可以在这里查看

介绍

整体的组成大概就是这个样子

MMPopupWindow就是用来显示所有弹出框的容器相对直接显示在当前UIWindow上来说弄个独立的Window出来当容器的会更好

MMPopupView就是弹出框的基类所有的弹出框只要继承自这个类就具备了显示的能力用户只要关注于弹出框本身的表现就行了

MMAlertView和MMSheetView都是我提供的基于MMPopupView的简单组件可以直接拿来用而且都是高度可定制的(这个稍后会介绍) 　　　

MMPopupWindow

MMPopupWindow的定义如下

@interface MMPopupWindow : UIWindow@property (nonatomic, assign) BOOL touchWildToHide; // default is NO. When YES, popup views will be hidden when user touch the translucent background.+ (MMPopupWindow *)sharedWindow;/** *  cache the window to prevent the lag of the first showing. */- (void) cacheWindow;/** *  show the translucent background */- (void) showDimBackground;/** *  hide the translucent background */- (void) hideDimBackground;@end

很简单只有一个属性touchWildToHide用来控制是否可以点击非弹出框的地方来使弹出框消失还有一个cacheWindow的方法来预加载MMPopupWindow 防止第一次使用的时候顿卡

另外还有两个用于显示和隐藏背景色的方法这个在自定义动画的时候会用到

- (void) showDimBackground;- (void) hideDimBackground;

MMPopupView

MMPopupView的定义如下

typedef NS_ENUM(NSUInteger, MMPopupType) {    MMPopupTypeAlert,    MMPopupTypeSheet,    MMPopupTypeCustom,};@class MMPopupView;typedef void(^MMPopupBlock)(MMPopupView *);@interface MMPopupView : UIView@property (nonatomic, assign) MMPopupType    type;                  // default is MMPopupTypeAlert.@property (nonatomic, assign) NSTimeInterval animationDuration;     // default is 0.3 sec.@property (nonatomic, assign) BOOL           withKeyboard;          // default is NO. When YES, alert view with be shown with a center offset (only effect with MMPopupTypeAlert).@property (nonatomic, copy  ) MMPopupBlock   showCompletionBlock;   // show completion block.@property (nonatomic, copy  ) MMPopupBlock   hideCompletionBlock;   // hide completion block@property (nonatomic, copy  ) MMPopupBlock   showAnimation;         // custom show animation block (only effect with MMPopupTypeCustom).@property (nonatomic, copy  ) MMPopupBlock   hideAnimation;         // custom hide animation block (only effect with MMPopupTypeCustom)./** *  override this method to show the keyboard if with a keyboard */- (void) showKeyboard;/** *  override this method to hide the keyboard if with a keyboard */- (void) hideKeyboard;/** *  show the popup view */- (void) show;/** *  show the popup view with completiom block * *  @param block show completion block */- (void) showWithBlock:(MMPopupBlock)block;/** *  hide the popup view */- (void) hide;/** *  hide the popup view with completiom block * *  @param block hide completion block */- (void) hideWithBlock:(MMPopupBlock)block;@end

使用起来很简单定义好自己的view 然后调用下面的方法就好了

- (void) show;- (void) hide;

默认提供了三种类型对应三种动画效果

typedef NS_ENUM(NSUInteger, MMPopupType) {    MMPopupTypeAlert,   //中间隐出    MMPopupTypeSheet,   //向上滑出    MMPopupTypeCustom,  //向下掉落};

当然你也可以自己定义想要的动画效果只要重载下面两个block就行了

@property (nonatomic, copy) MMPopupBlock   showAnimation;@property (nonatomic, copy) MMPopupBlock   hideAnimation;

同时提供了动画的回调可以直接指定block或者直接调用方法

@property (nonatomic, copy  ) MMPopupBlock   showCompletionBlock;@property (nonatomic, copy  ) MMPopupBlock   hideCompletionBlock;- (void) showWithBlock:(MMPopupBlock)block;- (void) hideWithBlock:(MMPopupBlock)block;

MMAlertView

MMAlertView就是UIAlertView的替代品接口如下

typedef void(^MMPopupInputHandler)(NSString *text);@interface MMAlertView : MMPopupView@property (nonatomic, assign) NSUInteger maxInputLength;    // default is 0. Means no length limit.- (instancetype) initWithInputTitle:(NSString*)title                             detail:(NSString*)detail                        placeholder:(NSString*)inputPlaceholder                            handler:(MMPopupInputHandler)inputHandler;- (instancetype) initWithConfirmTitle:(NSString*)title                               detail:(NSString*)detail;- (instancetype) initWithTitle:(NSString*)title                        detail:(NSString*)detail                         items:(NSArray*)items;@end

分别对应下面三种形式

同时提供一个全局的配置类可以充分的自定义

@interface MMAlertViewConfig : NSObject+ (MMAlertViewConfig*) globalConfig;@property (nonatomic, assign) CGFloat width;                // Default is 275.@property (nonatomic, assign) CGFloat buttonHeight;         // Default is 50.@property (nonatomic, assign) CGFloat innerMargin;          // Default is 25.@property (nonatomic, assign) CGFloat cornerRadius;         // Default is 5.@property (nonatomic, assign) CGFloat titleFontSize;        // Default is 18.@property (nonatomic, assign) CGFloat detailFontSize;       // Default is 14.@property (nonatomic, assign) CGFloat buttonFontSize;       // Default is 17.@property (nonatomic, strong) UIColor *backgroundColor;     // Default is #FFFFFF.@property (nonatomic, strong) UIColor *titleColor;          // Default is #333333.@property (nonatomic, strong) UIColor *detailColor;         // Default is #333333.@property (nonatomic, strong) UIColor *splitColor;          // Default is #CCCCCC.@property (nonatomic, strong) UIColor *itemNormalColor;     // Default is #333333. effect with MMItemTypeNormal@property (nonatomic, strong) UIColor *itemHighlightColor;  // Default is #E76153. effect with MMItemTypeHighlight@property (nonatomic, strong) UIColor *itemPressedColor;    // Default is #EFEDE7.@property (nonatomic, strong) NSString *defaultTextOK;      // Default is "好".@property (nonatomic, strong) NSString *defaultTextCancel;  // Default is "取消".@property (nonatomic, strong) NSString *defaultTextConfirm; // Default is "确定".@end

MMAlertView

MMAlertView就是UIAlertView的替代品接口如下

@interface MMSheetView : MMPopupView- (instancetype) initWithTitle:(NSString*)title                         items:(NSArray*)items;@end

呈现如下

同时提供一个全局的配置类可以充分的自定义

@interface MMSheetViewConfig : NSObject+ (MMSheetViewConfig*) globalConfig;@property (nonatomic, assign) CGFloat buttonHeight;         // Default is 50.@property (nonatomic, assign) CGFloat innerMargin;          // Default is 19.@property (nonatomic, assign) CGFloat titleFontSize;        // Default is 14.@property (nonatomic, assign) CGFloat buttonFontSize;       // Default is 17.@property (nonatomic, strong) UIColor *backgroundColor;     // Default is #FFFFFF.@property (nonatomic, strong) UIColor *titleColor;          // Default is #666666.@property (nonatomic, strong) UIColor *splitColor;          // Default is #CCCCCC.@property (nonatomic, strong) UIColor *itemNormalColor;     // Default is #333333. effect with MMItemTypeNormal@property (nonatomic, strong) UIColor *itemDisableColor;    // Default is #CCCCCC. effect with MMItemTypeDisabled@property (nonatomic, strong) UIColor *itemHighlightColor;  // Default is #E76153. effect with MMItemTypeHighlight@property (nonatomic, strong) UIColor *itemPressedColor;    // Default is #EFEDE7.@property (nonatomic, strong) NSString *defaultTextCancel;  // Default is "取消"@end

MMPopupItem

MMPopupItem是用于MMAlertView和MMSheetView的动作对象(对应按钮) 定义如下

typedef void(^MMPopupItemHandler)(NSInteger index);@interface MMPopupItem : NSObject@property (nonatomic, assign) BOOL     highlight;@property (nonatomic, assign) BOOL     disabled;@property (nonatomic, strong) NSString *title;@property (nonatomic, strong) UIColor  *color;@property (nonatomic, copy)   MMPopupItemHandler handler;@endtypedef NS_ENUM(NSUInteger, MMItemType) {    MMItemTypeNormal,    MMItemTypeHighlight,    MMItemTypeDisabled};NS_INLINE MMPopupItem* MMItemMake(NSString* title, MMItemType type, MMPopupItemHandler handler){    MMPopupItem *item = [MMPopupItem new];        item.title = title;    item.handler = handler;        switch (type)    {        case MMItemTypeNormal:        {            break;        }        case MMItemTypeHighlight:        {            item.highlight = YES;            break;        }        case MMItemTypeDisabled:        {            item.disabled = YES;            break;        }        default:            break;    }        return item;}

使用方式如下

//MMAlertViewNSArray *items =@[MMItemMake(@"Done", MMItemTypeNormal, block),  MMItemMake(@"Save", MMItemTypeHighlight, block),  MMItemMake(@"Cancel", MMItemTypeNormal, block)];[[[MMAlertView alloc] initWithTitle:@"AlertView"                             detail:@"each button take one row if there are more than 2 items"                              items:items] showWithBlock:completeBlock];             //MMSheetViewNSArray *items =@[MMItemMake(@"Normal", MMItemTypeNormal, block),  MMItemMake(@"Highlight", MMItemTypeHighlight, block),  MMItemMake(@"Disabled", MMItemTypeDisabled, block)];[[[MMSheetView alloc] initWithTitle:@"SheetView"              items:items] showWithBlock:completeBlock];

自定义

除了使用MMAlertView和MMSheetView之外比如我们的应用中会用到输入验证码的提示框和日期的选择框都可以用MMPopupView来轻松实现

小结

源码和Demo请点这里

0 0