详解开源项目:MMPopupView(弹出框组件)
来源:互联网 发布:阿里云账户注销 编辑:程序博客网 时间:2024/05/07 10:30
开源项目:MMPopupView
前言
弹出框组件应该是绝大多数应用都少不了的(只有极少数精心设计的APP会用不到) 当然我们的APP也不例外 之前我们APP的弹出框组件是我用pop写的 可是后来发现与系统原生动画有些冲突(pop内部用到了CATransaction 导致跟系统动画同时发生时会有问题) 所以上周花了大半天时间重写了一下MMPopupView这个组件
因为新写的组件完全是用Masonry写的 我觉得是个非常好的示例教程 结合之前我写的Masonry入门教程 应该可以更好的理解和运用Masonry/Autolayout 所以我又花了一点时间重新整理成了一个简单的开源库 有兴趣的朋友可以研究一下
介绍
整体的组成大概就是这个样子
MMPopupWindow就是用来显示所有弹出框的容器 相对直接显示在当前UIWindow上来说 弄个独立的Window出来当容器的会更好
MMPopupView就是弹出框的基类 所有的弹出框只要继承自这个类 就具备了显示的能力 用户只要关注于弹出框本身的表现就行了
MMAlertView和MMSheetView都是我提供的基于MMPopupView的简单组件 可以直接拿来用 而且都是高度可定制的(这个稍后会介绍)
MMPopupWindow
MMPopupWindow的定义如下
1234567891011121314151617181920212223
@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 防止第一次使用的时候顿卡
另外还有两个用于显示和隐藏背景色的方法 这个在自定义动画的时候会用到
12
- (void) showDimBackground;- (void) hideDimBackground;
MMPopupView
MMPopupView的定义如下
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
typedef NS_ENUM(NSUInteger, MMPopupType) { MMPopupTypeAlert, MMPopupTypeSheet, MMPopupTypeCustom,};@class MMPopupView;typedef void(^MMPopupBlock)(MMPopupView *);@interface MMPopupView : UIView@property (nonatomic, assign, readonly) BOOL visible; // default is NO.@property (nonatomic, strong ) UIView *attachedView; // default is MMPopupWindow. You can attach MMPopupView to any 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.@property (nonatomic, copy ) MMPopupBlock hideAnimation; // custom hide animation block./** * 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 然后调用下面的方法就好了
12
- (void) show;- (void) hide;
你也可以指定显示在某个UIView之上
1
@property (nonatomic, strong ) UIView *attachedView;
12
- (void) show;- (void) hide;
默认提供了三种类型 对应三种动画效果
12345
typedef NS_ENUM(NSUInteger, MMPopupType) { MMPopupTypeAlert, //中间隐出 MMPopupTypeSheet, //向上滑出 MMPopupTypeCustom, //向下掉落};
当然你也可以自己定义想要的动画效果 只要重载下面两个block就行了
12
@property (nonatomic, copy) MMPopupBlock showAnimation;@property (nonatomic, copy) MMPopupBlock hideAnimation;
同时提供了动画的回调 可以直接指定block或者直接调用方法
12345
@property (nonatomic, copy ) MMPopupBlock showCompletionBlock;@property (nonatomic, copy ) MMPopupBlock hideCompletionBlock;- (void) showWithBlock:(MMPopupBlock)block;- (void) hideWithBlock:(MMPopupBlock)block;
MMAlertView
MMAlertView就是UIAlertView的替代品 接口如下
123456789101112131415161718
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
分别对应下面三种形式
同时提供一个全局的配置类 可以充分的自定义
123456789101112131415161718192021222324252627
@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
MMSheetView
MMSheetView就是UISheetView的替代品 接口如下
123456
@interface MMSheetView : MMPopupView- (instancetype) initWithTitle:(NSString*)title items:(NSArray*)items;@end
呈现如下
同时提供一个全局的配置类 可以充分的自定义
12345678910111213141516171819202122
@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的动作对象(对应按钮) 定义如下
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
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;}
使用方式如下
12345678910111213141516171819
//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来轻松实现
- 详解开源项目:MMPopupView(弹出框组件)
- 详解开源项目:MMPopupView(弹出框组件)
- 一位前辈的作品 - MMPopupView(弹出框组件
- lhgdialog弹出框组件 参数详解
- lhgdialog弹出框组件 参数详解
- lhgdialog弹出框组件 参数详解
- lhgdialog弹出框组件 参数详解
- 弹出框组件
- 前端弹出框组件
- Android开源项目(非组件)
- Android开源项目(非组件)
- Android开源项目(非组件)
- ios开源项目组件
- 【js与jquery】javascript开源项目收藏(如:弹出框、日历控件)
- Android弹出框详解
- Flex左键单击弹出菜单--使用menu组件详解
- 开源项目之Android Calender(日历组件)
- bootstrap popover.js 弹出框组件
- ubuntu下查看tomcat运行状态
- P11 (*) Modified run-length encoding.
- 使用 CSS3 新属性 user-select 控制网页内容的选择范围
- 一键打电话
- Telegram传奇:俄罗斯富豪、黑客高手、极权和阴谋…
- 详解开源项目:MMPopupView(弹出框组件)
- 数据描述性分析
- 关于hashCode方法的作用
- 组合概率
- pyinstaller 生成单一的EXE文件之后获取当前目录的方法
- C++Primer第五版 练习11.14(解答)
- Navicat 数据库的导入导出
- java容器之Set,Map,List
- Mysql笔记