文档章节

开源项目:MMPopupView

hejunbinlan
 hejunbinlan
发布于 2015/10/09 13:40
字数 1724
阅读 288
收藏 3

shoes-770420_640.jpg

作者:里脊串 授权本站转载。

前言

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

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

运行的demo可以在这里查看

1.jpg

介绍

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

2.jpg

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

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

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

MMPopupWindow

MMPopupWindow的定义如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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;

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

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

1
2
3
- (void) showDimBackground;
- (void) hideDimBackground;
     

MMPopupView

MMPopupView的定义如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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 然后调用下面的方法就好了

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

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

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

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

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

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

1
2
3
4
5
@property (nonatomic, copy  ) MMPopupBlock   showCompletionBlock;
@property (nonatomic, copy  ) MMPopupBlock   hideCompletionBlock;
- (void) showWithBlock:(MMPopupBlock)block;
- (void) hideWithBlock:(MMPopupBlock)block;
     

MMAlertView

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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

分别对应下面三种形式

blob.png

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@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的替代品 接口如下

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

呈现如下

blob.png

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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的动作对象(对应按钮) 定义如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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;
}

使用方式如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//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来轻松实现

blob.png

小结

源码和Demo请点这里

更多的细节欢迎运行demo 或者查看源代码 有任何问题欢迎提出来大家一起讨论研究 :)

本文转载自:http://www.cocoachina.com/ios/20150929/13417.html

hejunbinlan
粉丝 42
博文 596
码字总数 21569
作品 0
浦东
高级程序员
私信 提问
iOS 弹出框的基类 - MMPopupView

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

adad184
2015/09/14
925
0
MMPopupView

pod 'MMPopupView', '~> 1.3' 好用

Yukimura_
2015/10/23
1
0
牛客网 iOS 题 21-41

牛客网 iOS 题 21-41 21.Objective-C 有私有方法吗?有私有变量吗? 答案:没有私有方法,有私有变量 在 interface 里定义变量默认是保护的,在 plementation 里定义变量默认是私有的 Object...

木佥
2018/05/12
0
0
iOS 第三方库收藏以及相关iOS开发工具

1.autolayout :Swift: SnapKit ,OC: Masonry 1.1.YYKit,YYKit 是一组庞大、功能丰富的 iOS 组件 1.2 MJExtension 以及 MJFresh 2.达到 60 FPS 的滚动帧率 :Swift :AsyncDisplayKit 3.swift加......

樗同学
2016/08/10
45
0
欲先攻其事必先利其器 (第三方资源篇)

一:源代码实例 1:快速搭建项目源代码 地址:https://github.com/wujunyang/MobileProject 2:高仿美团iOS版 地址:https://github.com/lookingstars/meituan 3:模仿网易新闻做的精仿网易新闻...

杭城小刘
2016/07/20
80
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 7 搭建源码包搭建LNMP环境

1,安装epel源 yum install -y epel-release 2, 安装需要的软件 yum install -y gcc automake autoconf libtool make gcc-c++ glibc libxslt-devel \libjpeg libjpeg-devel libpng libpng......

hansonwong
45分钟前
6
0
基于 K8s 做应用发布的工具那么多, 阿里为啥选择灰姑娘般的 Tekton ?

作者 | 邓洪超,阿里云容器平台工程师, Kubernetes Operator 第二人,云原生应用标准交付与管理领域知名技术专家 导读:近年来,越来越多专门给 Kubernetes 做应用发布的工具开始缤纷呈现,...

阿里巴巴云原生
46分钟前
3
0
ZStack的普惠云计算到底是“随大流”还是真功夫?(转自社区)

作为一名深耕技术圈的“老男人”,也算是经历过云计算领域的成长。近些年云计算技术不断成熟,百行百业开始云上之路,各大云计算厂商开始逐渐意识到云计算是一项“普惠”技术。 我一直很看好...

ZStack社区版
47分钟前
4
0
一个备份MySQL数据库的简单Shell脚本

Shell脚本是我们写不同类型命令的一种脚本,这些命令在这一个文件中就可以执行。我们也可以逐一敲入命令手动执行。如果我们要使用shell脚本就必须在一开始把这些命令写到一个文本文件中,以后...

旺仔大战肥五花
52分钟前
2
0
TiDB Binlog 源码阅读系列文章(四)Pump server 介绍

作者: satoru 在 上篇文章 中,我们介绍了 TiDB 如何通过 Pump client 将 binlog 发往 Pump,本文将继续介绍 Pump server 的实现,对应的源码主要集中在 TiDB Binlog 仓库的 pump/server.go...

TiDB
56分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部