這個(gè)也是來自于項(xiàng)目中的一個(gè)需求，點(diǎn)擊一個(gè)按鈕色瘩，可以像開花一樣散開多個(gè)菜單選項(xiàng)欄伪窖，點(diǎn)擊不同的菜單選項(xiàng)欄會(huì)響應(yīng)不同的點(diǎn)擊事件，需要配上散開/收起的動(dòng)畫效果居兆。為了滿足這個(gè)需求覆山，封裝了一個(gè)
FKFlowerMenu花型菜單選擇工具。
下載地址：github下載
支持功能
- 自定義控制菜單選擇項(xiàng)的數(shù)目
- 自定義控制菜單選項(xiàng)欄的展開角度泥栖，散開距離
- 菜單的主按鈕是否支持動(dòng)畫
- 菜單的展開方向支持四個(gè)方向
使用
FKFlowerMenuDemo是該工具的一個(gè)使用范例簇宽，如果需要將該工具使用到自己的工程中，只用把demo中到FKFloweMenu文件夾中的文件引入工程就可以了吧享。
FKFloweMenu中包含FKFlowerMenuItem和FKFloweMenu文件魏割。
FKFlowerMenuItem文件是花型菜單工具展開之后的選擇按鈕項(xiàng)，選擇按鈕項(xiàng)支持自定義圖片钢颂，大小钞它，響應(yīng)事件。
FKFloweMenu文件夾中FKFlowerMenuBtn文件就是花型菜單工具控制展開/收起的中心按鈕殊鞭，它屬于UIButton類型遭垛，使用者只需要?jiǎng)?chuàng)建一個(gè)Button并繼承于它，就可以輕松的使用這個(gè)花型菜單工具了钱豁。
設(shè)置FKFlowerMenuBtn各項(xiàng)屬性
Button創(chuàng)建成功并繼承FKFlowerMenuBtn耻卡，確定了中心按鈕的位置疯汁，我們就完成了使用的第一步牲尺。
下面我們需要來設(shè)置中心按鈕的各項(xiàng)屬性。
/**散開的最大距離*/
@property (nonatomic , assign) CGFloat maxLength;
/**散開的最大角度*/
@property (nonatomic , assign) CGFloat maxRadian;
/**散開的方向*/
@property (nonatomic , assign) DirectionWay derectionWay;
/**是否需要旋轉(zhuǎn)的動(dòng)畫效果*/
@property (nonatomic , assign) BOOL needAnimation;
maxLength用來控制展開的選項(xiàng)按鈕距離中心按鈕圓心的距離。
maxRadian用來控制花型菜單展開后谤碳，最外面的兩個(gè)選項(xiàng)按鈕所呈的最大角度溃卡。
needAnimation中心按鈕是否需要旋轉(zhuǎn)動(dòng)畫，目前旋轉(zhuǎn)動(dòng)畫的動(dòng)作并沒有自定義蜒简，支持點(diǎn)擊后順時(shí)針45度旋轉(zhuǎn)（展開動(dòng)畫）/逆時(shí)針45度旋轉(zhuǎn)（收起動(dòng)畫）瘸羡。如果不需要的朋友可以直接忽略這個(gè)屬性，或者設(shè)置為NO搓茬。
derectionWay用來控制菜單按鈕的展開方向犹赖，目前支持4個(gè)方向，使用者在確認(rèn)中心按鈕的位置后卷仑，可根據(jù)需要設(shè)置方向峻村。由4個(gè)枚舉變量來控制。
typedef NS_ENUM (NSInteger, DirectionWay) {
OnTheTopLeft = 0, //左上方向
OnTheTopRight, //右上方向
OnTheBottomLeft, //左下方向
OnTheBottomRight, //右上方向
};
添加菜單選項(xiàng)按鈕
設(shè)置完中心按鈕的各種屬性之后锡凝，我們需要?jiǎng)?chuàng)建菜單選擇按鈕粘昨。
- (id)initWithImage:(UIImage *)image withBounds:(CGFloat)bounds selectedBlock:(SelectedBlock)selectedBlock;
通過上面這個(gè)方法設(shè)置選擇按鈕的顯示圖片，大小窜锯，以及點(diǎn)擊的響應(yīng)事件张肾。
將創(chuàng)建好的選擇按鈕添加至數(shù)組，以數(shù)組的形式和中心按鈕作關(guān)聯(lián)锚扎。
/**設(shè)置散發(fā)出來的子item*/
- (void)addSubItems:(NSArray<FKFlowerMenuItem*>*)itemArr;
這是FKFlowerMenuBtn用來添加FKFlowerMenuItem的方法吞瞪，添加成功的選擇按鈕會(huì)和中心按鈕顯示在一個(gè)視圖層級(jí)上。
到這一步驾孔，中心按鈕和選擇按鈕的關(guān)聯(lián)和設(shè)置就已經(jīng)完成了尸饺，運(yùn)行起我們的工程，就可以開心的使用花型菜單了助币±颂……^?_?^
完整的設(shè)置過程
- (void)configureBtn {
FKFlowerMenuItem *item0 = [[FKFlowerMenuItem alloc] initWithImage:[UIImage imageNamed:@"add_mytask_askr.png"] withBounds:30 selectedBlock:^{
NSLog(@"第1個(gè)");
}];
FKFlowerMenuItem *item1 = [[FKFlowerMenuItem alloc] initWithImage:[UIImage imageNamed:@"Task_Addphoto_Btn.png"] withBounds:30 selectedBlock:^{
NSLog(@"第2個(gè)");
}];
FKFlowerMenuItem *item2 = [[FKFlowerMenuItem alloc] initWithImage:[UIImage imageNamed:@"add_mytask_askr.png"] withBounds:30 selectedBlock:^{
NSLog(@"第3個(gè)");
}];
self.leftFlowersBtn.maxLength = 75;
self.leftFlowersBtn.maxRadian = M_PI_4 * 3 ;
self.leftFlowersBtn.derectionWay = OnTheBottomRight;
[self.leftFlowersBtn addSubItems:@[item0,item1,item2]];
}
本文主要講解了FKFlowerMenu的使用方法，具體可以參考 github下載 地址中的Demo眉菱，也歡迎各位朋友留言指正迹栓，指點(diǎn)。
