iOS 下拉菜單

隨著移動互聯網的發展,手機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 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,252評論 4贊 61
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,523評論 25贊 708
  • -1- 這是一個真實的故事，這個故事曾經感動了無數人。 故事發生在17年前的12月31日，也就是除夕夜，在日本札幌...
    上吊的豆腐閱讀 420評論 0贊 1
  • ① 我一人 守一城 等一人 ② 我一人 留一心 愛一人 ③ 我一人 孤一生 ...
    一人的城閱讀 119評論 0贊 0
  • 大概是六七年前吧，突然對服飾搭配情有獨衷，那時候我常常癡迷的瀏覽淘寶京東上的服飾，看那些店鋪里的服飾風格，看琳...
    紫薔薇花閱讀 1,355評論 1贊 6