隨著移動互聯網的發展,手機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
完成
