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<number; i++) { UIButton*button=[[UIButton alloc]initWithFrame:SPFrame(0, 0, 40, 40)]; button.center=point; button.layer.cornerRadius=20; button.layer.masksToBounds=YES; button.tag=i+1; [button setBackgroundImage:[UIImage imageNamed:array[i]] forState:UIControlStateNormal]; [self addSubview:button]; [button addTarget:self action:@selector(sppopViewButtonEvent:) forControlEvents:UIControlEventTouchUpInside]; [self.cells addObject:button]; } } return self; }

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

 -(void)sppopViewButtonEvent:(UIButton*)sender{
    self.sppopBlcok(sender.tag);
    for (int i=0; i<self.cells.count; i++) { UIButton*button=self.cells[i]; [self cellIsPop:NO withCellTag:i cell:button]; } }

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<self.cells.count; i++) { UIButton*button=self.cells[i]; [self cellIsPop:YES withCellTag:i cell:button]; } }

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

 -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    for (int i=0; i<self.cells.count; i++) { UIButton*button=self.cells[i]; [self cellIsPop:NO withCellTag:i cell:button]; } }

分享到： QQ空间新浪微博腾讯微博微信更多

« 搜狗输入法使用技巧 | Android studio Gradle包重复问题»

iOS开发之弹出式收藏键

日历

存档

最新评论

链接

搜索