新浪微博项目---首页技术点四.蒙板及下拉菜单的实现

效果图:蒙板效果及下拉菜单的实现

 

 

思路:使用一个透明蒙板的目的就是让用户在点击下拉菜单栏的时候,不至于因为点击不当而影响用户的体验.

具体实现代码:

DrpodownMenu.h文件

 

#import <UIKit/UIKit.h>


@class DrpodownMenu;

//设置代理,想要实现上下按钮的切换
@protocol DrpodownMenuDelegate <NSObject>

@optional
-(void)dropdownMenuDidDismiss:(DrpodownMenu *)menu;
-(void)dropdownMenuDidShow:(DrpodownMenu *)menu;

@end


@interface DrpodownMenu : UIView


@property(nonatomic,weak)id<DrpodownMenuDelegate>delagate;

+ (instancetype)menu;

/**
 *  显示
 */
- (void)showFrom:(UIView *)from;
/**
 *  销毁
 */
- (void)dismiss;

/**
 *  内容
 */
@property (nonatomic, strong) UIView *content;
/**
 *  内容控制器
 */
@property (nonatomic, strong) UIViewController *contentController;


@end

--------------------------------------------------------------------------------------------------------------------

 

 

 

 DrpodownMenu.m文件

 

#import "DrpodownMenu.h"
#import "UIView+Extension.h"

@interface DrpodownMenu ()

/**
 *  将来用来显示具体内容的容器
 */
@property (nonatomic, weak) UIImageView *containerView;

@end



@implementation DrpodownMenu

//下拉菜单的底色板
- (UIImageView *)containerView
{
    if (!_containerView) {
        // 添加一个灰色图片控件
        UIImageView *containerView = [[UIImageView alloc] init];
        containerView.image = [UIImage imageNamed:@"popover_background"];
        containerView.userInteractionEnabled = YES; // 开启交互
        [self addSubview:containerView];
        self.containerView = containerView;
    }
    return _containerView;
}


- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 清除颜色
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}

//下拉菜单
+ (instancetype)menu
{
    return [[self alloc] init];
}

//下拉菜单的frame的设置
- (void)setContent:(UIView *)content
{
    _content = content;
    
    // 调整内容的位置
    content.x = 10;
    content.y = 15;
    
    // 调整内容的宽度
    //    content.width = self.containerView.width - 2 * content.x;
    
    // 设置灰色的高度
    self.containerView.height = CGRectGetMaxY(content.frame) + 11;
    // 设置灰色的宽度
    self.containerView.width = CGRectGetMaxX(content.frame) + 8;
    
    // 添加内容到灰色图片中
    [self.containerView addSubview:content];
}

- (void)setContentController:(UIViewController *)contentController
{
    _contentController = contentController;
    
    self.content = contentController.view;
}

/**
 *  蒙板的显示
 */
- (void)showFrom:(UIView *)from
{
    // 1.获得最上面的窗口
    UIWindow *window = [[UIApplication sharedApplication].windows lastObject];
    
    // 2.添加自己到窗口上
    [window addSubview:self];
    
    // 3.设置尺寸
    self.frame = window.bounds;
    
    // 4.调整灰色图片的位置
    // 默认情况下，frame是以父控件左上角为坐标原点
    // 转换坐标系
    CGRect newFrame = [from convertRect:from.bounds toView:window];
    //    CGRect newFrame = [from.superview convertRect:from.frame toView:window];
    self.containerView.x = CGRectGetMinX(newFrame);
    self.containerView.y = CGRectGetMaxY(newFrame);
    
    
    //通知外界 自己显示了
    if ([self.delagate respondsToSelector:@selector(dropdownMenuDidShow:)]) {
        [self.delagate dropdownMenuDidShow:self];
    }
    
    
}

/**
 *  销毁
 */
- (void)dismiss
{
    [self removeFromSuperview];
    
    //通知外界,自己被销毁
    if ([self.delagate respondsToSelector:@selector(dropdownMenuDidDismiss:)]) {
        [self.delagate dropdownMenuDidDismiss:self];
    }
    
    
    
    
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self dismiss];
}


@end