iOS 花型菜单选择工具 FKFlowerMenu

小姐姐镇楼.jpeg

这个也是来自于项目中的一个需求,点击一个按钮,可以像开花一样散开多个菜单选项栏,点击不同的菜单选项栏会响应不同的点击事件,需要配上散开/收起的动画效果。为了满足这个需求,封装了一个 FKFlowerMenu 花型菜单选择工具。

下载地址:github下载

FKFlowerMenuDemo运行结果.jpeg

支持功能

  • 自定义控制菜单选择项的数目
  • 自定义控制菜单选项栏的展开角度,散开距离
  • 菜单的主按钮是否支持动画
  • 菜单的展开方向支持四个方向

使用

FKFlowerMenuDemo是该工具的一个使用范例,如果需要将该工具使用到自己的工程中,只用把demo中到FKFloweMenu文件夹中的文件引入工程就可以了。
FKFloweMenu中包含FKFlowerMenuItemFKFloweMenu文件。
FKFlowerMenuItem文件是花型菜单工具展开之后的选择按钮项,选择按钮项支持自定义图片,大小,响应事件。
FKFloweMenu文件夹中FKFlowerMenuBtn文件就是花型菜单工具控制展开/收起的中心按钮,它属于UIButton类型,使用者只需要创建一个Button并继承于它,就可以轻松的使用这个花型菜单工具了。

设置FKFlowerMenuBtn各项属性

Button创建成功并继承FKFlowerMenuBtn,确定了中心按钮的位置,我们就完成了使用的第一步。
下面我们需要来设置中心按钮的各项属性。

/**散开的最大距离*/
@property (nonatomic , assign) CGFloat maxLength;
/**散开的最大角度*/
@property (nonatomic , assign) CGFloat maxRadian;
/**散开的方向*/
@property (nonatomic , assign) DirectionWay derectionWay;
/**是否需要旋转的动画效果*/
@property (nonatomic , assign) BOOL needAnimation;

maxLength用来控制展开的选项按钮距离中心按钮圆心的距离。
maxRadian用来控制花型菜单展开后,最外面的两个选项按钮所呈的最大角度。
needAnimation中心按钮是否需要旋转动画,目前旋转动画的动作并没有自定义,支持点击后顺时针45度旋转(展开动画)/逆时针45度旋转(收起动画)。如果不需要的朋友可以直接忽略这个属性,或者设置为NO

derectionWay用来控制菜单按钮的展开方向,目前支持4个方向,使用者在确认中心按钮的位置后,可根据需要设置方向。由4个枚举变量来控制。

typedef NS_ENUM (NSInteger, DirectionWay) {
    OnTheTopLeft = 0,      //左上方向
    OnTheTopRight,         //右上方向
    OnTheBottomLeft,       //左下方向
    OnTheBottomRight,      //右上方向
};

添加菜单选项按钮

设置完中心按钮的各种属性之后,我们需要创建菜单选择按钮

- (id)initWithImage:(UIImage *)image withBounds:(CGFloat)bounds selectedBlock:(SelectedBlock)selectedBlock;

通过上面这个方法设置选择按钮的显示图片,大小,以及点击的响应事件。

将创建好的选择按钮添加至数组,以数组的形式和中心按钮作关联。

/**设置散发出来的子item*/
- (void)addSubItems:(NSArray<FKFlowerMenuItem*>*)itemArr;

这是FKFlowerMenuBtn用来添加FKFlowerMenuItem的方法,添加成功的选择按钮会和中心按钮显示在一个视图层级上。

到这一步,中心按钮选择按钮的关联和设置就已经完成了,运行起我们的工程,就可以开心的使用花型菜单了。……^ _ ^

完整的设置过程

- (void)configureBtn {
    
    FKFlowerMenuItem *item0 = [[FKFlowerMenuItem alloc] initWithImage:[UIImage imageNamed:@"add_mytask_askr.png"] withBounds:30 selectedBlock:^{
        NSLog(@"第1个");
    }];
    
    FKFlowerMenuItem *item1 = [[FKFlowerMenuItem alloc] initWithImage:[UIImage imageNamed:@"Task_Addphoto_Btn.png"] withBounds:30 selectedBlock:^{
        NSLog(@"第2个");
    }];
    
    FKFlowerMenuItem *item2 = [[FKFlowerMenuItem alloc] initWithImage:[UIImage imageNamed:@"add_mytask_askr.png"] withBounds:30 selectedBlock:^{
        NSLog(@"第3个");
    }];
    
    self.leftFlowersBtn.maxLength = 75;
    self.leftFlowersBtn.maxRadian = M_PI_4 * 3 ;
    self.leftFlowersBtn.derectionWay = OnTheBottomRight;
    [self.leftFlowersBtn addSubItems:@[item0,item1,item2]];
}

本文主要讲解了FKFlowerMenu的使用方法,具体可以参考 github下载 地址中的Demo,也欢迎各位朋友留言指正,指点。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容