美文网首页iOS工作系列iOSios 进阶
iOS实现自定义的弹出视图(popView)

iOS实现自定义的弹出视图(popView)

作者: HenryCheng | 来源:发表于2016-01-11 17:39 被阅读13286次

    前段时间,在项目中有个需求是支付完成后,弹出红包,实现这么一个发红包的功能。做了最后,实现的效果大致如下:

    效果图

    一、使用方法


    整个ViewController的代码大致如下

    //
    //  SecondViewController.m
    //  HWPopTool
    //
    //  Created by HenryCheng on 16/1/11.
    //  Copyright © 2016年 www.igancao.com. All rights reserved.
    //
    
    #import "SecondViewController.h"
    #import "HWPopTool.h"
    
    @interface SecondViewController ()
    
    @property (strong, nonatomic) UIView *contentView;
    
    @end
    
    @implementation SecondViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.view.backgroundColor = [UIColor whiteColor];
        
        _contentView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 300)];
        _contentView.backgroundColor = [UIColor clearColor];
        
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame = CGRectMake(100, 200, 100, 50);
        btn.backgroundColor = [UIColor greenColor];
        [btn addTarget:self action:@selector(popViewShow) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:btn];
    }
    
    - (void)popViewShow {
        UIImageView *imageV = [[UIImageView alloc]initWithFrame:_contentView.bounds];
        imageV.image = [UIImage imageNamed:@"jei"];
        [_contentView addSubview:imageV];
        
        [HWPopTool sharedInstance].shadeBackgroundType = ShadeBackgroundTypeSolid;
        [HWPopTool sharedInstance].closeButtonType = ButtonPositionTypeRight;
        [[HWPopTool sharedInstance] showWithPresentView:_contentView animated:YES];
    
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    @end
    

    我们引入了HWPopTool.h,并且创建了一个button,点击button的方法是popViewShow,我们来看一下这里面的代码:

    - (void)popViewShow {
        UIImageView *imageV = [[UIImageView alloc]initWithFrame:_contentView.bounds];
        imageV.image = [UIImage imageNamed:@"jei"];
        [_contentView addSubview:imageV];
        
        [HWPopTool sharedInstance].shadeBackgroundType = ShadeBackgroundTypeSolid;
        [HWPopTool sharedInstance].closeButtonType = ButtonPositionTypeRight;
        [[HWPopTool sharedInstance] showWithPresentView:_contentView animated:YES];
    
    }
    

    这里在_contentView上放了一个imageView,然后我们设置了shadeBackgroundTypecloseButtonType以后,下面一句代码就是展示出来popView
    这里主要就是我们弹出一个view,至于这个view多大,上面放什么,都是由你自己决定的。

    二、关于HWPopTool里面的一些属性和方法


    先来看一下HWPopTool.h

    //
    //  HWPopTool.h
    //  HWPopTool
    //
    //  Created by HenryCheng on 16/1/11.
    //  Copyright © 2016年 www.igancao.com. All rights reserved.
    //
    
    #import <Foundation/Foundation.h>
    #import <UIKit/UIKit.h>
    /**
     *  关闭按钮的位置
     */
    typedef NS_ENUM(NSInteger, ButtonPositionType) {
        /**
         *  无
         */
        ButtonPositionTypeNone = 0,
        /**
         *  左上角
         */
        ButtonPositionTypeLeft = 1 << 0,
        /**
         *  右上角
         */
        ButtonPositionTypeRight = 2 << 0
    };
    /**
     *  蒙板的背景色
     */
    typedef NS_ENUM(NSInteger, ShadeBackgroundType) {
        /**
         *  渐变色
         */
        ShadeBackgroundTypeGradient = 0,
        /**
         *  固定色
         */
        ShadeBackgroundTypeSolid = 1 << 0
    };
    
    typedef void(^completeBlock)(void);
    
    @interface HWPopTool : NSObject
    
    @property (strong, nonatomic) UIColor *popBackgroudColor;//弹出视图的背景色
    @property (assign, nonatomic) BOOL tapOutsideToDismiss;//点击蒙板是否弹出视图消失
    @property (assign, nonatomic) ButtonPositionType closeButtonType;//关闭按钮的类型
    @property (assign, nonatomic) ShadeBackgroundType shadeBackgroundType;//蒙板的背景色
    
    /**
     *  创建一个实例
     *
     *  @return CHWPopTool
     */
    + (HWPopTool *)sharedInstance;
    /**
     *  弹出要展示的View
     *
     *  @param presentView show View
     *  @param animated    是否动画
     */
    - (void)showWithPresentView:(UIView *)presentView animated:(BOOL)animated;
    /**
     *  关闭弹出视图
     *
     *  @param complete complete block
     */
    - (void)closeWithBlcok:(void(^)())complete;
    
    @end
    

    由于之前写的比较仓促,今天趁着空余时间又把代码整理了一遍,比如关闭之后的回调,之前用delegate实现的,今天又用block重新写的,简洁一点吧,另外基本上所有的方法、属性、枚举我都有注释,算是个个人习惯吧。
    这里面有几点需要说明的是:

    • 1.ShadeBackgroundType是蒙板的背景色属性,有固定的和渐变的(ShadeBackgroundTypeGradient),关于这个渐变,有兴趣的可以研究一下CAGradientLayer,还是很有趣的,在后来的文章中也会说到。
    • 2.tapOutsideToDismiss这个是设置点击蒙板,popView消失不消失的属性,默认的是YES
    • 3.- (void)closeWithBlcok:(void(^)())complete这个方法,是关闭后的回调,比如说发送红包以后,等popView消失以后回到上一页的这种。

    由于注释的基本都很清楚了,这里就不多说了,

    三、最后


    我一般写博客的时候,贴代码喜欢贴全部的代码,我认为这样会直观一点(当然非常多的除外),最后,所有的代码demo都可以在 这里 看到!

    相关文章

      网友评论

      • 太阳_eaa4:怎么联系你? 我想咨询一下我加了一个 UIScrollView 还是不能放大
      • 太阳_eaa4:楼主 你好非常喜欢你这个实用的demo, 我想请问一下 后续能加上图片缩放功能吗???
        HenryCheng:弹出来的图片可以缩放?
      • FengxinLi:楼主 HWPopTool *tool = [[HWPopTool alloc]init]; 这种方式创建的 不是同一个单例
      • Hello_kid:您好,这个弹出来点击空白处能关闭嘛?
        HenryCheng:@Ruiz678 可以设置的
      • 困惑困惑困惑:那个美女的图片为啥显示不出来了
      • 1ffdfbe42a4c:博主您好,我的HWPopTool.h为啥不能引入啊??引入的时候没有提示 如果硬引入的话就报错 QQ:946608155 坐等博主
      • 独爱ii:博主,看到请回复喔,怎么封装自定义的弹出提示框,我不会弄蒙版背景,还有动画,我QQ1315221709
      • 独爱ii:不错,非常好,我的所有弹出视图都是用博主的 :+1:
      • 薛一方: 如果要实现多级弹出视图的叠加,就是弹出一个,再弹出第二个的时候第一个不消失,能实现吗
        薛一方:@HenryCheng 你写的是单例呀
        HenryCheng:@薛一方 可能是可以的啊,只要第二个弹出第一个不移除就行了
      • lingzi2016:不错哦
      • 8f64fc6e6524:有源码不。。看着有点慌呀
        HenryCheng:@kotercy 下面有源码地址
      • 3ef3b64b75d7:66666
        HenryCheng:@小怪兽虫虫 :smile:
      • 常义:弹出视图Block
        HenryCheng:@常义 :smile:
      • a9b5ac92f7b3:猴子你好
        a9b5ac92f7b3:@HenryCheng 你猜
        a9b5ac92f7b3:@HenryCheng 你猜!我擦。回这么快
        HenryCheng:@杜晓晓 这是哪路神仙啊 :sweat:
      • 8a2bdac784e2:前端狗来围观一下 汪汪
        HenryCheng:@逗比小怪兽 😄
      • MrFanRG:不错
        HenryCheng:@ios码农学生 :blush:
      • Realank:文章不错,妹子也不错
        异乡有悟:@Realank ……亮点被你说全了
        HenryCheng:@Realank 😂😂😂
      • 曾樑::+1::+1:
        JohnHow:@编程的蚂蚁 终于解开了这个迷....
        编程的蚂蚁:@怕冷的冻物 因为他是简书的IT栏的编辑
        水墨九:@曾樑 :joy:怎么整天看见你

      本文标题:iOS实现自定义的弹出视图(popView)

      本文链接:https://www.haomeiwen.com/subject/vtnqkttx.html