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

最新推荐文章于 2024-05-21 09:37:32 发布

浩羽科技

最新推荐文章于 2024-05-21 09:37:32 发布

阅读量2.4k

点赞数 1

分类专栏： iOS开发-随笔文章标签： ios开发

iOS开发-随笔专栏收录该内容

78 篇文章 0 订阅

订阅专栏

开源项目:MMPopupView

前言

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

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

介绍

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

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 防止第一次使用的时候顿卡

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

1 2	- (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, 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 然后调用下面的方法就好了

1 2	- (void) show; - (void) hide;

你也可以指定显示在某个UIView之上

1	@property (nonatomic, strong ) UIView *attachedView;

1 2	- (void) show; - (void) hide;

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

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

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

1 2	@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

MMSheetView

MMSheetView就是UISheetView的替代品接口如下

@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;

@end

typedef 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;
}

使用方式如下

//MMAlertView
NSArray *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];
             
//MMSheetView
NSArray *items =
@[MMItemMake(@"Normal", MMItemTypeNormal, block),
  MMItemMake(@"Highlight", MMItemTypeHighlight, block),
  MMItemMake(@"Disabled", MMItemTypeDisabled, block)];

[[[MMSheetView alloc] initWithTitle:@"SheetView"
              items:items] showWithBlock:completeBlock];

自定义

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

浩羽科技

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详解开源项目：MMPopupView（弹出框组件）

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

扫一扫