版本記錄

前言

??最近的項(xiàng)目中要實(shí)現(xiàn)點(diǎn)擊一個主按鈕斗这，會分出多個按鈕动猬，并旋轉(zhuǎn)，可以點(diǎn)擊實(shí)現(xiàn)不同的功能表箭，我就實(shí)現(xiàn)了下赁咙，下面就給大家說一下我的實(shí)現(xiàn)方法。

詳情

一免钻、要實(shí)現(xiàn)的效果

在說明怎么實(shí)現(xiàn)之前彼水，先要看一下要實(shí)現(xiàn)的效果〖颍看下面的gif圖凤覆。

效果

二、效果實(shí)現(xiàn)

先看一下代碼組織結(jié)構(gòu)拆魏。

代碼結(jié)構(gòu)

下面就看一下代碼實(shí)現(xiàn)盯桦。

1. JJMenuVC.h

#import <UIKit/UIKit.h>

@interface JJMenuVC : UIViewController

@end

2. JJMenuVC.m

#import "JJMenuVC.h"
#import "AwesomeMenu.h"

@interface JJMenuVC () <AwesomeMenuDelegate>

@property (nonatomic, strong) AwesomeMenu *menu;
@property (nonatomic, strong) UIView *backView;

@end

@implementation JJMenuVC

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor greenColor];
    
    //增加懸浮按鈕
    [self addFloatButton];
}

#pragma mark - Object Private Object

- (void)addFloatButton
{
    //1. 中間的startItem
    AwesomeMenuItem *startItem = [[AwesomeMenuItem alloc]
                                  initWithImage:[UIImage imageNamed:@"group_video_public"]
                                  highlightedImage:nil
                                  ContentImage:[UIImage imageNamed:@"group_video_public"]
                                  highlightedContentImage:nil];
    
    //2. 添加其他幾個按鈕
    AwesomeMenuItem *item0 = [[AwesomeMenuItem alloc]
                              initWithImage:[UIImage imageNamed:@"group_create_button"]
                              highlightedImage:nil
                              ContentImage:[UIImage imageNamed:@"group_create_button"]
                              highlightedContentImage:nil];
    
    AwesomeMenuItem *item1 = [[AwesomeMenuItem alloc]
                              initWithImage:[UIImage imageNamed:@"group_live"]
                              highlightedImage:nil
                              ContentImage:[UIImage imageNamed:@"group_live"]
                              highlightedContentImage:nil];
    
    AwesomeMenuItem *item2 = [[AwesomeMenuItem alloc]
                              initWithImage:[UIImage imageNamed:@"group_present_button"]
                              highlightedImage:nil
                              ContentImage:[UIImage imageNamed:@"group_present_button"]
                              highlightedContentImage:nil];
    
    NSArray *items = @[item0, item1, item2];
    
    //3. 創(chuàng)建菜單按鈕
    AwesomeMenu *menu = [[AwesomeMenu alloc] initWithFrame:CGRectZero startItem:startItem menuItems:items];
    UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width,  [UIScreen mainScreen].bounds.size.height)];
    [backView setBackgroundColor:[[UIColor blackColor] colorWithAlphaComponent:0.6]];
    backView.hidden = YES;
    self.backView = backView;
    [self.view addSubview:backView];
    [self.view addSubview:menu];
    
    //4. 中間按鈕旋轉(zhuǎn)
    menu.rotateAddButton = YES;
    
    //5. 彈出范圍
    menu.menuWholeAngle = -M_PI_2/3*2.5;
    
    //6. 設(shè)置按鈕位置
    [menu mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.mas_equalTo(self.view).mas_offset(-20.0);
        make.bottom.mas_equalTo(self.view).mas_offset(-20.0);
        make.size.mas_equalTo(CGSizeMake(80, 80));
    }];
    menu.startPoint = menu.center;
    
    [menu autoPinEdge:ALEdgeRight toEdge:ALEdgeRight ofView:self.view];
    [menu autoPinEdge:ALEdgeBottom toEdge:ALEdgeBottom ofView:self.view];
    
    //7. 設(shè)置代理
    menu.delegate = self;
    
    self.menu = menu;

}

#pragma mark -AwesomeMenuDelegate

- (void)awesomeMenu:(AwesomeMenu *)menu didSelectIndex:(NSInteger)idx
{
    switch (idx) {
        case 0:
            NSLog(@"我是第一個按鈕");
            
            break;
            
        case 1:
            NSLog(@"我是第二個按鈕");
            
            break;
            
        case 2:
            NSLog(@"我是第三個按鈕");
            
            break;
            
        default:
            break;
    }
    self.backView.hidden = YES;
}

- (void)awesomeMenuWillAnimateOpen:(AwesomeMenu *)menu
{
    self.backView.hidden = NO;
}

- (void)awesomeMenuDidFinishAnimationClose:(AwesomeMenu *)menu
{
    self.backView.hidden = YES;
}

@end

3. PrefixHeader.pch

#ifndef PrefixHeader_pch
#define PrefixHeader_pch

#import "Masonry.h"
#import "UIView+AutoLayout.h"

#endif /* PrefixHeader_pch */

點(diǎn)擊這三個小按鈕，會調(diào)用代理方法渤刃，結(jié)果如下所示：

2017-05-20 00:44:40.476 menu[2869:118500] 我是第一個按鈕
2017-05-20 00:44:43.294 menu[2869:118500] 我是第二個按鈕
2017-05-20 00:44:45.611 menu[2869:118500] 我是第三個按鈕

后記

??這個效果雖然看著簡單拥峦，但是如果真從動畫底層寫起，確實(shí)有點(diǎn)墨跡和麻煩卖子，用這個AwesomeMenu可以很快很輕松的完成這個效果事镣。

家鄉(xiāng)