您的位置:首页 > 产品设计 > UI/UE

iOS学习笔记-090.彩票05——购彩大厅2_自定义蒙版、popMenu、UIView分类抽取

2017-08-25 00:50 501 查看
彩票05购彩大厅2_自定义蒙版popMenuUIView分类抽取
一图示

二自定义蒙版
1 分析

2 QWMCoverh

3 QWMCoverm

三自定义popMenu
1 分析

2 QWMPopMenuh

2 QWMPopMenum

四QWMHallTableViewControllerm 类修改

五UIView分类抽取
1 UIViewFrameh

2 UIViewFramem

六pch编辑
1 杞文明彩票pch

2 在Xcode5以后干掉了如想用需要手动配置

彩票05——购彩大厅2_自定义蒙版、popMenu、UIView分类抽取

一、图示



二、自定义蒙版

2.1 分析

蒙版一般添加在keyWidown上面

pop菜单加载keyWidown上面,如果添加到蒙版上面,会随着父控件的透明而透明

解决不透明的方法,不要修改alpha,修改背景颜色就可以了

cover.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.7f];


我们的蒙版需要显示和隐藏两个方法,显示的时候添加到keyWindow上面,隐藏的时候从keyWindow上面移除。

2.2 QWMCover.h

//
//  QWMCover.h
//  03_UIView79_彩票
//
//  Created by 杞文明 on 17/8/23.
//  Copyright © 2017年 杞文明. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface QWMCover : UIView
//显示
+(void)show;
//隐藏
+(void)hide;
@end


2.3 QWMCover.m

//
//  QWMCover.m
//  03_UIView79_彩票
//
//  Created by 杞文明 on 17/8/23.
//  Copyright © 2017年 杞文明. All rights reserved.
//

#import "QWMCover.h"

#define QWMKeyWindow [UIApplication sharedApplication].keyWindow

@implementation QWMCover

+(void)show{
//1.创建蒙版
QWMCover *cover = [[QWMCover alloc]init];

//2.把蒙版添加到窗口上
[QWMKeyWindow addSubview:cover];

//3.设置尺寸
cover.frame = [UIScreen mainScreen].bounds;
//设置背景
cover.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.7];
}

+(void)hide{
//隐藏蒙版
//从window中删除它
for (UIView *view in QWMKeyWindow.subviews) {
if ([view isKindOfClass:[QWMCover class]]) {
[view removeFromSuperview];
break;
}
}
}

@end


三、自定义popMenu

3.1 分析

pop菜单加载keyWidown上面,如果添加到蒙版上面,会随着父控件的透明而透明。除此之外如果添加到蒙版上面依赖会很强,所以我们添加到keyWindow上面

popMenu是静态,所以可以使用xib描述



//从xib创建popMenu
QWMPopMenu *popMenu = [[NSBundle mainBundle]loadNibNamed:@"QWMPopMenu" owner:nil options:nil][0];


popMenu需要有显示的方法,这个方法就是创建一个popMenu添加到keyWindow中。

popMenu需要有隐藏的方法,这个方法就是从keyWindow中移除popMenu,并且有消失的动画,动画结束以后,可以传入一个代码块。

popMenu需要有点击关闭的方法,这个方法中我们把点击传给代理

3.2 QWMPopMenu.h

//
//  QWMPopMenu.h
//  03_UIView79_彩票
//
//  Created by 杞文明 on 17/8/23.
//  Copyright © 2017年 杞文明. All rights reserved.
//

#import <UIKit/UIKit.h>
@class QWMPopMenu;

@protocol QWMPopMenuDelegate <NSObject>

-(void)popMenuDidCloseBtn:(QWMPopMenu*)popMenu;
@end

@interface QWMPopMenu : UIView
@property(nonatomic,weak) id<QWMPopMenuDelegate> delegate;

+(instancetype)showInCenter:(CGPoint)center;

-(void)hideInCenter:(CGPoint)center complete:(void(^)())complete;
@end


3.2 QWMPopMenu.m

//
// QWMPopMenu.m
// 03_UIView79_彩票
//
// Created by 杞文明 on 17/8/23.
// Copyright © 2017年 杞文明. All rights reserved.
//

#import "QWMPopMenu.h"

@implementation QWMPopMenu

+(instancetype)showInCenter:(CGPoint)center{
//从xib创建popMenu QWMPopMenu *popMenu = [[NSBundle mainBundle]loadNibNamed:@"QWMPopMenu" owner:nil options:nil][0];
popMenu.center = center;
//添加到窗口中
[[UIApplication sharedApplication].keyWindow addSubview:popMenu];
return popMenu;
}

-(void)hideInCenter:(CGPoint)center complete:(void (^)())complete{
[UIView animateWithDuration:0.2 animations:^{
self.center = CGPointMake(44, 44);
self.transform = CGAffineTransformMakeScale(0.01, 0.01);
} completion:^(BOOL finished) {
//1、移除自己
[self removeFromSuperview];
//2。移除蒙版
// block当做参数传递, 如果值为空,直接调用崩溃
if(complete){
complete();
}
}];
}

- (IBAction)close:(id)sender {
//通知外界点击了关闭
if ([self.delegate respondsToSelector:@selector(popMenuDidCloseBtn:)]) {
[self.delegate popMenuDidCloseBtn:self];
}
}

@end


四、QWMHallTableViewController.m 类修改

这个类里面,我们主要干两个事情,点击导航条左边显示蒙版和popMenu菜单。点击popMenu关闭按钮,隐藏popMenu和蒙版

//
//  QWMHallTableViewController.m
//  03_UIView79_彩票
//
//  Created by 杞文明 on 17/7/24.
//  Copyright © 2017年 杞文明. All rights reserved.
//

#import "QWMHallTableViewController.h"
#import "UIImage+QWM.h"
#import "QWMCover.h"
#import "QWMPopMenu.h"

@interface QWMHallTableViewController () <QWMPopMenuDelegate>

@end

@implementation QWMHallTableViewController

- (void)viewDidLoad {
[super viewDidLoad];
// 在iOS7 之后导航条上图片,默认被渲染
//1.添加导航条
//    UIImage *image = [UIImage imageNamed:@"CS50_activity_image"];
//    image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[UIImage imageWithRenderOriginalName:@"CS50_activity_image"] style:UIBarButtonItemStylePlain target:self action:@selector(leftBarButtonClick)];
}

-(void)leftBarButtonClick{
NSLog(@"%s line = %d",__FUNCTION__,__LINE__);
//显示蒙版
[QWMCover show];

//添加popMenu
QWMPopMenu *popMenu = [QWMPopMenu showInCenter:self.view.center];
popMenu.delegate = self;
}

-(void)popMenuDidCloseBtn:(QWMPopMenu *)popMenu{
//隐藏蒙版
[popMenu hideInCenter:CGPointMake(44, 44) complete:^{
[QWMCover hide];
}];
}

@end


五、UIView分类抽取

这个分类我们要是就是添加 x,y,width,height 的获取和设置

5.1 UIView+Frame.h

//
//  UIView+Frame.h
//  03_UIView79_彩票
//
//  Created by 杞文明 on 17/8/23.
//  Copyright © 2017年 杞文明. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface UIView (Frame)

// 在分类中 @property 只会生成get, set方法,并不会生成下划线的成员属性

@property(nonatomic,assign) CGFloat width;

@property(nonatomic,assign) CGFloat height;

@property(nonatomic,assign) CGFloat x;

@property(nonatomic,assign) CGFloat y;

@end


5.2 UIView+Frame.m

//
//  UIView+Frame.m
//  03_UIView79_彩票
//
//  Created by 杞文明 on 17/8/23.
//  Copyright © 2017年 杞文明. All rights reserved.
//

#import "UIView+Frame.h"

@implementation UIView (Frame)

-(CGFloat)width{
return self.frame.size.width;
}

-(void)setWidth:(CGFloat)width{
CGRect rect = self.frame;
rect.size.width= width;
self.frame = rect;
}

-(CGFloat)height{
return self.frame.size.height;
}

-(void)setHeight:(CGFloat)height{
CGRect rect = self.frame;
rect.size.height= height;
self.frame = rect;
}

-(CGFloat)x{
return self.frame.origin.x;
}

-(void)setX:(CGFloat)x{
CGRect rect = self.frame;
rect.origin.x = x;
self.frame = rect;
}

-(CGFloat)y{
return self.frame.origin.y;
}

-(void)setY:(CGFloat)y{
CGRect rect = self.frame;
rect.origin.y = y;
self.frame = rect;
}

@end


六、pch编辑

创建一个 杞文明彩票.pch

6.1 杞文明彩票.pch

//
//  杞文明彩票.pch
//  03_UIView79_彩票
//
//  Created by 杞文明 on 17/8/24.
//  Copyright © 2017年 杞文明. All rights reserved.
//
// poch 为什么不能用
// 在Xcode5以后干掉了,如想用,需要手动配置
#ifndef ______pch
#define ______pch

#ifdef __OBJC__ // 只有oc文件才导入
#import "UIView+Frame.h"
#import "UIImage+QWM.h"

#endif

#endif /* ______pch */


6.2 在Xcode5以后干掉了,如想用,需要手动配置



如图,按照 1-6的步骤操作,5中修改为true,6为.pch的位置
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: