iOS實現自定義的彈出視圖(popView)

jopen 8年前發布 | 21K 次閱讀 iOS開發 移動開發

前段時間,在項目中有個需求是支付完成后,彈出紅包,實現這么一個發紅包的功能。做了最后,實現的效果大致如下:


效果圖

一、使用方法


整個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

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #4bd157}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #ffffff; min-height: 15.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #ff4647}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px 'PingFang SC'; color: #4bd157}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #ffffff}p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #de38a6}span.s1 {font-variant-ligatures: no-common-ligatures}span.s2 {font: 13.0px 'PingFang SC'; font-variant-ligatures: no-common-ligatures}span.s3 {font-variant-ligatures: no-common-ligatures; color: #eb905a}span.s4 {font: 13.0px Menlo; font-variant-ligatures: no-common-ligatures}span.s5 {font-variant-ligatures: no-common-ligatures; color: #de38a6}span.s6 {font-variant-ligatures: no-common-ligatures; color: #4bd157}span.s7 {font-variant-ligatures: no-common-ligatures; color: #8b87ff}span.s8 {font-variant-ligatures: no-common-ligatures; color: #00b1ff}span.s9 {font: 13.0px 'PingFang SC'; font-variant-ligatures: no-common-ligatures; color: #4bd157}span.s10 {font-variant-ligatures: no-common-ligatures; color: #ffffff}span.s11 {font-variant-ligatures: no-common-ligatures; color: #08fa95}

//
//  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這個方法,是關閉后的回調,比如說發送紅包以后,等pop view消失以后回到上一頁的這種。

由于注釋的基本都很清楚了,這里就不多說了,

三、最后


我一般寫博客的時候,貼代碼喜歡貼全部的代碼,我認為這樣會直觀一點(當然非常多的除外),最后,所有的代碼demo都可以在 這里 看到!

來自: http://www.jianshu.com/p/68b19be19738

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!