iOS 下拉菜单

作者: LYSNote | 来源:发表于2016-10-24 23:15 被阅读1170次

随着移动互联网的发展,手机App的功能是越来越复杂,给用户提供的选择也越来越多,那么怎么样才能更好的给用户提供高效,完美的体验呢?

有时候下拉菜单不得不是你最好的选择

简易下拉菜单.png

#import "ViewController.h"
#import "DownMenu.h"

这里导入自定义视图DownMenu.h,以设置代理的形式回调视图状态事件

@interface ViewController ()<DownMenuDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    DownMenu *menu = [[DownMenu alloc] initWithFrame:CGRectMake(50, 100, 120, 30)];
    [self.view addSubview:menu];
    menu.delegate = self;
    [menu setMainMenuTitle:@"请选择" chlidTitleAry:@[@"选项一",@"选项二",@"选项三",@"选项四"]];
}
- (void)downMenu:(DownMenu *)menu selectChildMenu:(NSInteger)index{
    NSLog(@"%ld",index);
}
- (void)downMenuWillShow{
    NSLog(@"将要出现");
}
- (void)downMenuDidShow{
    NSLog(@"已经出现");
}
- (void)downMenuWillHidden{
    NSLog(@"将要消失");
}
- (void)downMenuDidHidden{
    NSLog(@"已经消失");
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

这里介绍了自定义DownMenu视图的具体代码实现过程

#import <UIKit/UIKit.h>
@class DownMenu;
@protocol DownMenuDelegate <NSObject>
// 各个选项被点击的时候出发
- (void)downMenu:(DownMenu *)menu selectChildMenu:(NSInteger)index;
@optional
// 菜单将要出现
- (void)downMenuWillShow;
// 菜单已经出现
- (void)downMenuDidShow;
// 菜单将要消失
- (void)downMenuWillHidden;
// 菜单已经消失
- (void)downMenuDidHidden;
@end
@interface DownMenu : UIView
@property (nonatomic,assign)id<DownMenuDelegate> delegate;
// 设置菜单标题
- (void)setMainMenuTitle:(NSString *)title chlidTitleAry:(NSArray *)childTitleAry;
@end

#import "DownMenu.h"
#define KBounds self.bounds
#define KFrame self.frame
#define KSetFrameHeght(A,B) CGRectMake(A.frame.origin.x,A.frame.origin.y,A.frame.size.width,B)
#define KRowHeight 30
@interface DownMenu ()
@property (nonatomic,strong)UIButton *mainBtn;  // 主按钮
@property (nonatomic,assign)BOOL isShow;        // 标记视图显示状态
@property (nonatomic,strong)UIView *bgroundView;// 设置背景视图
@property (nonatomic,assign)CGRect tempFrame;   // 记录按钮初始值
@property (nonatomic, nonnull,strong)CAShapeLayer *sanjiaoLayer;
@end
@implementation DownMenu
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setup]; // 设置子视图
        self.tempFrame = frame;
        self.isShow = NO;
    }
    return self;
}
- (CAShapeLayer *)sanjiaoLayer{
    if (!_sanjiaoLayer) {
        self.sanjiaoLayer = [self createLayer];
    }
    return _sanjiaoLayer;
}
// 设置背景视图
- (UIView *)bgroundView{
    if (!_bgroundView) {
        self.bgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(KBounds), CGRectGetWidth(KBounds), 0)];
    }
    return _bgroundView;
}
// 设置主按钮
- (UIButton *)mainBtn{
    if (!_mainBtn) {
        self.mainBtn = [UIButton buttonWithType:(UIButtonTypeCustom)];
        [_mainBtn setTitleColor:[UIColor blackColor] forState:(UIControlStateNormal)];
        [_mainBtn addTarget:self action:@selector(mainBtnAction:) forControlEvents:(UIControlEventTouchUpInside)];
        _mainBtn.backgroundColor = [UIColor lightGrayColor];
        _mainBtn.frame = KBounds;
        [_mainBtn.layer addSublayer:self.sanjiaoLayer];
    }
    return _mainBtn;
}
// 设置主按钮点击事件
- (void)mainBtnAction:(UIButton *)sender{
    if (_isShow) {    // 如果显示,就隐藏
        [self hiddenMenu];
    }else {          // 如果隐藏,就显示
        [self openMenu];
    }
}
// 设置子视图
- (void)setup{
    [self addSubview:self.mainBtn];
    [self addSubview:self.bgroundView];
    self.layer.masksToBounds = YES;
    self.bgroundView.layer.masksToBounds = YES;
    self.backgroundColor = [UIColor redColor];
}
// 设置菜单标题
- (void)setMainMenuTitle:(NSString *)title chlidTitleAry:(NSArray *)childTitleAry{
    [self.mainBtn setTitle:title forState:(UIControlStateNormal)];
    [childTitleAry enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        UIButton *btn = [self createChildBtnTitle:obj rect:CGRectMake(0, idx * KRowHeight, CGRectGetWidth(KFrame), KRowHeight)];
        [btn addTarget:self action:@selector(btnAction:) forControlEvents:(UIControlEventTouchUpInside)];
        btn.tag = 2000 + idx;
        [_bgroundView addSubview:btn];
    }];
}
// 设置子按钮点击事件
- (void)btnAction:(UIButton *)sender{
    if (!self.delegate) {NSLog(@"没有设置代理"); return;}
    if ([self.delegate respondsToSelector:@selector(downMenu: selectChildMenu:)]) {
        [self.delegate downMenu:self selectChildMenu:sender.tag - 2000];
    }
}
// 菜单将要出现
- (void)downMenuWillShow{
    NSLog(@"222222");
    if (!self.delegate) {NSLog(@"没有设置代理"); return;}
    if ([self.delegate respondsToSelector:@selector(downMenuWillShow)]) {
        [self.delegate downMenuWillShow];
    }
}
// 菜单已经出现
- (void)downMenuDidShow{
    if (!self.delegate) {NSLog(@"没有设置代理"); return;}
    if ([self.delegate respondsToSelector:@selector(downMenuDidShow)]) {
        [self.delegate downMenuDidShow];
    }
}
// 菜单将要消失
- (void)downMenuWillHidden{
    if (!self.delegate) {NSLog(@"没有设置代理"); return;}
    if ([self.delegate respondsToSelector:@selector(downMenuWillHidden)]) {
        [self.delegate downMenuWillHidden];
    }
}
// 菜单已经消失
- (void)downMenuDidHidden{
    if (!self.delegate) {NSLog(@"没有设置代理"); return;}
    if ([self.delegate respondsToSelector:@selector(downMenuDidHidden)]) {
        [self.delegate downMenuDidHidden];
    }
}
// 展开菜单
- (void)openMenu{
    [self downMenuWillShow];
    [UIView animateWithDuration:0.3 delay:0 options:(UIViewAnimationOptionCurveEaseInOut) animations:^{
        self.frame = KSetFrameHeght(self, self.tempFrame.size.height + KRowHeight * (self.subviews[1].subviews.count));
        self.bgroundView.frame = KSetFrameHeght(self.bgroundView, KRowHeight * (self.subviews[1].subviews.count));
        self.sanjiaoLayer.transform = CATransform3DRotate(CATransform3DIdentity, M_PI, 1, 0, 0);
        self.isShow = YES;
    } completion:^(BOOL finished) {
        [self downMenuDidShow];
    }];
}
// 收回菜单
- (void)hiddenMenu{
    [self downMenuWillHidden];
    [UIView animateWithDuration:0.3 delay:0 options:(UIViewAnimationOptionCurveEaseInOut) animations:^{
        self.frame = KSetFrameHeght(self, self.tempFrame.size.height);
        self.bgroundView.frame = KSetFrameHeght(self.bgroundView, 0);
        self.sanjiaoLayer.transform = CATransform3DIdentity;
        self.isShow = NO;
    } completion:^(BOOL finished) {
        [self downMenuDidHidden];
    }];
}
// 创建一个btn
- (UIButton *)createChildBtnTitle:(NSString *)title rect:(CGRect)frame{
    UIButton *btn = [UIButton buttonWithType:(UIButtonTypeCustom)];
    [btn setTitle:title forState:(UIControlStateNormal)];
    [btn setTitleColor:[UIColor blackColor] forState:(UIControlStateNormal)];
    btn.frame = frame;
    return btn;
}
// 创建小三角
- (CAShapeLayer *)createLayer{
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.position = CGPointMake(self.mainBtn.frame.size.width - 16, CGRectGetMidY(self.mainBtn.frame));
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 0)];
    [path addLineToPoint:CGPointMake(10, 0)];
    [path addLineToPoint:CGPointMake(5, cos(30 * M_PI_2 / 180) * 5)];
    [path addLineToPoint:CGPointMake(0, 0)];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor blackColor].CGColor;
    return layer;
}
@end

完成

相关文章

  • iOS 下拉菜单

    最近在做代码重构,发现之前写的下拉菜单不够灵活,所以决定再写一个可以灵活定制的下拉菜单。 先上代码 Demo 本...

  • iOS 下拉菜单

    // // MyDropdownMenu.h // M // // Created by zsl on 2017/...

  • iOS 下拉菜单

    随着移动互联网的发展,手机App的功能是越来越复杂,给用户提供的选择也越来越多,那么怎么样才能更好的给用户提供高效...

  • Android从0到完整项目(6)下拉列表与分段选择

    简单的下拉列表(仿美团)和 分段选择 分段选择 下拉菜单 IOS Segemnt Segemnt 的简单使用方法...

  • iOS仿微信App添加带箭头的view(链接)

    iOS仿微信App添加带箭头的view 类似微信下拉菜单,可以控制箭头的不同位置

  • 精品的博客

    tips1: 非常好的Pop实现思路 iOS 微信右上角下拉菜单效果之CMPopTipView,各种角度各种位置 ...

  • iOS 下拉菜单封装

    效果如下:

  • iOS 多级下拉菜单

    前言 App 常用控件 -- 多级下拉菜单, 如团购类, 房屋类, 对数据进行筛选. 有一级, 二级, 三级,...

  • 第十九谈:下拉菜单

    本节课我们来开始学习 Bootstrap 的提供的下拉菜单组件。 一.下拉菜单 下拉菜单组件依赖于 Popper....

  • iOS条件选择下拉菜单

    多条件筛选下拉菜单,在很多应用中都有使用。例如:京东、美团等。我们先看一下运行效果: 接下来我会针对里面主要代码进...

网友评论

    本文标题:iOS 下拉菜单

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