ios开发收藏按钮_iOS开发之弹出式收藏键

iOS开发之弹出式收藏键

2019-1-18 王建伟 iOS开发

项目中可能遇到这样的需求，用户有4个收藏夹，在音乐播放界面，用户点击收藏按键的时候需要弹出4个收藏夹供用户选择，这时候就需要设计一种弹出式的收藏按键了，比如以下这种方式，点击收藏按键后，会从收藏按键下方弹出4个圆形按键以供用户选择

首先我们需要设定一个block块来收集用户点击圆形按键的行为：typedef void(^SPPopViewBlock)(NSInteger tag),这其中的参数tag，标识的是用户点击的那个圆形按键

接下来我们需要定义所需要用到的属性和方法

/*

＊点击事件block快＊

*/

@property(nonatomic,copy)SPPopViewBlock sppopBlcok;

/*

＊按键数组＊

*/

@property(nonatomic,strong)NSMutableArray*cells;

/*

＊按键中心点＊

*/

@property(nonatomic,assign)CGPoint originalCenter;

/*

＊初始化＊

*/

-(instancetype)initWithTotalNumber:(NSInteger)number center:(CGPoint)point cellClock:(SPPopViewBlock)block;

/*

＊弹出cell＊

*/

-(void)popCell;

初始化方法，初始化当中我们需要定义收藏夹数量，收藏按键中心点位置，一句将用户按键行为的block块

-(instancetype)initWithTotalNumber:(NSInteger)number center:(CGPoint )point cellClock:(SPPopViewBlock)block{

if(self=[super init]){

self.frame=SPFrame(0, 0, SPScreen_W, SPScreen_H);

self.sppopBlcok = block;

self.originalCenter=point;

self.backgroundColor=[UIColor colorWithWhite:0 alpha:0]; NSArray*array=@[@"find_collection_study",@"find_collection_story",@"find_collection_music",@"find_collection_english"];

self.cells=[NSMutableArray array];

for (int i=0; i

定义完成后，我们需要来编辑4个圆形按键的行为了

-(void)sppopViewButtonEvent:(UIButton*)sender{

self.sppopBlcok(sender.tag);

for (int i=0; i

4个圆形按键从出现到消失需要写一个简单的动画效果来过渡一下

-(void)cellIsPop:(BOOL)isPop withCellTag:(NSInteger)tag cell:(UIButton*)button{

if(isPop){

[UIView animateWithDuration:0.5 animations:^{

CGFloat y=button.center.y-sin(M_PI/4+tag*M_PI/2)*50;

CGFloat x=button.center.x-cos(M_PI/4+tag*M_PI/2)*50;

button.center=SPPoint(x, y);

}];

}

else{

[UIView animateWithDuration:0.5 animations:^{

button.center=self.originalCenter;

} completion:^(BOOL finished) {

[self removeFromSuperview];

}];

}

}

点击收藏按键弹出4个圆形按键方法

-(void)popCell{

for (int i=0; i

点击界面其他位置，将4个圆形按键收缩起来的方法

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

for (int i=0; i