一种悬浮按钮效果的实现

版本记录

版本号	时间
V1.0	2017.05.19

前言

  最近的项目中要实现点击一个主按钮，会分出多个按钮，并旋转，可以点击实现不同的功能，我就实现了下，下面就给大家说一下我的实现方法。

详情

一、要实现的效果

在说明怎么实现之前，先要看一下要实现的效果。看下面的gif图。

效果

---

二、效果实现

先看一下代码组织结构。

代码结构

下面就看一下代码实现。

1. JJMenuVC.h

#import 

@interface JJMenuVC : UIViewController

@end

2. JJMenuVC.m

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

@interface JJMenuVC () 

@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. 创建菜单按钮
    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. 中间按钮旋转
    menu.rotateAddButton = YES;
    
    //5. 弹出范围
    menu.menuWholeAngle = -M_PI_2/3*2.5;
    
    //6. 设置按钮位置
    [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. 设置代理
    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 */

点击这三个小按钮，会调用代理方法，结果如下所示：

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] 我是第三个按钮

后记

  这个效果虽然看着简单，但是如果真从动画底层写起，确实有点墨迹和麻烦，用这个AwesomeMenu可以很快很轻松的完成这个效果。

家乡