山寨“饿了么”应用中添加菜品数量按钮效果

山寨“饿了么”应用中添加菜品数量按钮效果

本人视频教程系类   iOS中CALayer的使用

最终效果：

山寨源头：

源码：（此源码解决了重用问题，可以放心的放在cell中使用）

AddAndDeleteButton.h 与 AddAndDeleteButton.m

//
//  AddAndDeleteButton.h
//  LabelControll
//
//  Created by YouXianMing on 14/12/11.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

typedef enum : NSUInteger {
    CNY, // 人民币
    GBP, // 英镑
    JPY, // 日元
    USD, // 美元
} EnumMoneyType;

@protocol AddAndDeleteButtonDelegate <NSObject>
@optional
- (void)currentCount:(NSNumber *)count;
@end

@interface AddAndDeleteButton : UIView

@property (nonatomic, weak)    id<AddAndDeleteButtonDelegate> delegate;

/**
 *  数目（数目为0就会隐藏）
 */
@property (nonatomic, strong) NSNumber *count;

/**
 *  单价（商品单价）
 */
@property (nonatomic, strong) NSNumber *price;

/**
 *  设置数目
 *
 *  @param count   数目
 *  @param animted 时候执行动画
 */
- (void)setCount:(NSNumber *)count animated:(BOOL)animted;

/**
 *  起始值
 *
 *  @param count 值
 */
- (void)startValue:(NSNumber *)count;

@end

//
//  AddAndDeleteButton.m
//  LabelControll
//
//  Created by YouXianMing on 14/12/11.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "AddAndDeleteButton.h"

typedef enum : NSUInteger {
    UIBUTTON_ADD = 10,
    UIBUTTON_DELETE,
} EnumAddAndDeleteButton;

// 控件总体的宽度
static CGFloat width          = 150;
// 控件总体的高度
static CGFloat height         = 28;
// 添加按钮的宽度
static CGFloat addButtonWidth = 60;
// 控件之间的间隙
static CGFloat gap             = 7;


static CGFloat label_10_99       = 5;
static CGFloat label_100_999     = 10;


// 隐藏位置的frame值(后面要用)
static CGRect  hidenRect;  // 0

static CGRect  labelRect;  // 1 - 9
static CGRect  deleteRect; // 1 - 9

static CGRect  labelRect_10_99;  // 10 - 99
static CGRect  deleteRect_10_99; // 10 - 99

static CGRect  labelRect_100_999;  // 100 - 999
static CGRect  deleteRect_100_999; // 100 - 999


@interface AddAndDeleteButton ()

@property (nonatomic, strong) UIView    *backedView;

@property (nonatomic, strong) UIButton  *addButton;    // 添加的按钮

@property (nonatomic, strong) UILabel   *countLabel;   // 计数的标签

@property (nonatomic, strong) UIButton  *deleteButton; // 删除的按钮

@end

@implementation AddAndDeleteButton

+ (void)initialize {
    if (self == [AddAndDeleteButton class]) {
        // 0时候的frame值
        hidenRect  = CGRectMake(width - height, 0, height, height);
        
        // 1到9的frame值
        labelRect  = CGRectMake(width - addButtonWidth - gap - height, 0, height, height);
        deleteRect = CGRectMake(width - addButtonWidth - (gap + height)*2, 0, height, height);
        
        // 10到99的frame值
        labelRect_10_99 = CGRectMake(width - addButtonWidth - gap - (height + label_10_99), 0,
                                     height + label_10_99, height);
        deleteRect_10_99 = CGRectMake(width - addButtonWidth - (gap + height) - (gap + height + label_10_99), 0,
                                      height, height);
        
        // 100到999的frame值
        labelRect_100_999 = CGRectMake(width - addButtonWidth - gap - (height + label_100_999), 0,
                                     height + label_100_999, height);
        deleteRect_100_999 = CGRectMake(width - addButtonWidth - (gap + height) - (gap + height + label_100_999), 0,
                                      height, height);
    }
}

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        // 添加背景图层
        _backedView                   = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, height)];
        [self addSubview:_backedView];
        
        // 计数的标签
        _countLabel = [[UILabel alloc] initWithFrame:CGRectMake(width - addButtonWidth - gap - height, 0, height, height)];
        
        _countLabel.backgroundColor     = [UIColor whiteColor];
        _countLabel.layer.backgroundColor = [UIColor whiteColor].CGColor;
        _countLabel.layer.borderWidth   = 1.f;
        _countLabel.layer.cornerRadius  = 4.f;
        _countLabel.layer.masksToBounds = YES;
        _countLabel.layer.borderColor   = [UIColor colorWithRed:0.898 green:0.898 blue:0.902 alpha:1].CGColor;
        _countLabel.text                = @"0";
        _countLabel.textAlignment       = NSTextAlignmentCenter;
        _countLabel.textColor           = [UIColor colorWithRed:0.945 green:0.102 blue:0.325 alpha:1];
        [self addSubview:_countLabel];
        
        // 删除按钮
        _deleteButton = [[UIButton alloc] initWithFrame:CGRectMake(width - addButtonWidth - (gap + height)*2, 0, height, height)];
        _deleteButton.backgroundColor     = [UIColor colorWithRed:0.792 green:0.796 blue:0.800 alpha:1];
        _deleteButton.tag                 = UIBUTTON_DELETE;
        [_deleteButton addTarget:self
                          action:@selector(buttonsEvent:)
                forControlEvents:UIControlEventTouchUpInside];
        _deleteButton.layer.cornerRadius  = 4.f;
        _deleteButton.layer.masksToBounds = YES;
        [self addSubview:_deleteButton];
        
        // 添加按钮
        _addButton = [[UIButton alloc] initWithFrame:CGRectMake(width - addButtonWidth, 0, addButtonWidth, height)];
        [_addButton setTitle:@"$10.00" forState:UIControlStateNormal];
        [_addButton addTarget:self
                       action:@selector(buttonsEvent:)
             forControlEvents:UIControlEventTouchUpInside];
        _addButton.tag = UIBUTTON_ADD;
        [_addButton setTitleColor:[UIColor colorWithRed:0.957 green:0.984 blue:0.949 alpha:1]
                         forState:UIControlStateNormal];
        
        _addButton.titleLabel.font    = [UIFont systemFontOfSize:16.f];
        _addButton.layer.cornerRadius = 4.f;
        _addButton.backgroundColor    = [UIColor colorWithRed:0.475 green:0.796 blue:0.329 alpha:1];
        [self addSubview:_addButton];
    }
    return self;
}

- (void)buttonsEvent:(UIButton *)button {
    if (button.tag == UIBUTTON_ADD) {
        [self setCount:@(self.count.intValue + 1) animated:YES];
    } else if (button.tag == UIBUTTON_DELETE) {
        [self setCount:@(self.count.intValue - 1) animated:YES];
    }
    
    
    if (_delegate && [_delegate respondsToSelector:@selector(currentCount:)]) {
        [_delegate currentCount:self.count];
    }
}

- (void)startValue:(NSNumber *)count {
    if (count.integerValue == 0) {
        self.count = count;
        
        _countLabel.frame = hidenRect;
        _countLabel.alpha = 0.f;
        _countLabel.text  = @"0";
        _deleteButton.frame = hidenRect;
        _deleteButton.alpha = 0.f;
        
        return;
    }
    
    if (count.integerValue >= 1 && count.integerValue <= 9) {
        self.count = count;
        
        _countLabel.frame = labelRect;
        _countLabel.alpha = 1.f;
        _countLabel.text  = count.stringValue;
        _deleteButton.frame = deleteRect;
        _deleteButton.alpha = 1.f;
        
        return;
    }
    
    if (count.integerValue >= 10 && count.integerValue <= 99) {
        self.count = count;
        
        _countLabel.frame = labelRect_10_99;
        _countLabel.alpha = 1.f;
        _countLabel.text  = count.stringValue;
        _deleteButton.frame = deleteRect_10_99;
        _deleteButton.alpha = 1.f;
        
        return;
    }
    
    if (count.integerValue >= 100 && count.integerValue <= 999) {
        self.count = count;
        
        _countLabel.frame = labelRect_100_999;
        _countLabel.alpha = 1.f;
        _countLabel.text  = count.stringValue;
        _deleteButton.frame = deleteRect_100_999;
        _deleteButton.alpha = 1.f;
        
        return;
    }
}


- (void)setCount:(NSNumber *)count animated:(BOOL)animted {
    if (count.intValue == 1000) {
        return;
    }
    
    _count = count;
    
    // 设置数为0而且标签上的值为1时（从1减到0的情况)   1 --> 0
    if (count.intValue == 0 && _countLabel.text.intValue == 1) {
        if (animted) {
            [UIView animateWithDuration:0.35f animations:^{
                _countLabel.frame = hidenRect;
                _countLabel.alpha = 0.f;
                _countLabel.text  = @"0";
                _deleteButton.frame = hidenRect;
                _deleteButton.alpha = 0.f;
            }];
        } else {
            _countLabel.frame = hidenRect;
            _countLabel.alpha = 0.f;
            _countLabel.text  = @"0";
            _deleteButton.frame = hidenRect;
            _deleteButton.alpha = 0.f;
        }
        
        return;
    }
    
    // 设置数目为1而且标签上的值为0时（从0加到1的情况） 0 --> 1
    if (count.intValue == 1 && _countLabel.text.intValue == 0) {
        if (animted) {
            [UIView animateWithDuration:0.35f animations:^{
                _countLabel.frame   = labelRect;
                _countLabel.alpha   = 1.f;
                _countLabel.text    = @"1";
                _deleteButton.frame = deleteRect;
                _deleteButton.alpha = 1.f;
            }];
        } else {
            _countLabel.frame   = labelRect;
            _countLabel.alpha   = 1.f;
            _countLabel.text    = @"1";
            _deleteButton.frame = deleteRect;
            _deleteButton.alpha = 1.f;
        }
        
        return;
    }
    
    // 设置数目从9到10时候的动画   9 --> 10
    if (count.intValue == 10 && _countLabel.text.intValue == 9) {
        if (animted) {
            [UIView animateWithDuration:0.35f animations:^{
                _countLabel.frame   = labelRect_10_99;
                _countLabel.alpha   = 1.f;
                _countLabel.text    = @"10";
                _deleteButton.frame = deleteRect_10_99;
                _deleteButton.alpha = 1.f;
            }];
        } else {
            _countLabel.frame   = labelRect_10_99;
            _countLabel.alpha   = 1.f;
            _countLabel.text    = @"10";
            _deleteButton.frame = deleteRect_10_99;
            _deleteButton.alpha = 1.f;
        }
        
        return;
    }
    
    // 设置数目从9到10时候的动画  10 --> 9
    if (count.intValue == 9 && _countLabel.text.intValue == 10) {
        if (animted) {
            [UIView animateWithDuration:0.35f animations:^{
                _countLabel.frame   = labelRect;
                _countLabel.alpha   = 1.f;
                _countLabel.text    = @"9";
                _deleteButton.frame = deleteRect;
                _deleteButton.alpha = 1.f;
            }];
        } else {
            _countLabel.frame   = labelRect;
            _countLabel.alpha   = 1.f;
            _countLabel.text    = @"9";
            _deleteButton.frame = deleteRect;
            _deleteButton.alpha = 1.f;
        }
        
        return;
    }
    
    
    // 99 --> 100
    if (count.intValue == 100 && _countLabel.text.intValue == 99) {
        if (animted) {
            [UIView animateWithDuration:0.35f animations:^{
                _countLabel.frame   = labelRect_100_999;
                _countLabel.alpha   = 1.f;
                _countLabel.text    = @"100";
                _deleteButton.frame = deleteRect_100_999;
                _deleteButton.alpha = 1.f;
            }];
        } else {
            _countLabel.frame   = labelRect_100_999;
            _countLabel.alpha   = 1.f;
            _countLabel.text    = @"100";
            _deleteButton.frame = deleteRect_100_999;
            _deleteButton.alpha = 1.f;
        }
        
        return;
    }
    
    // 100 --> 99
    if (count.intValue == 99 && _countLabel.text.intValue == 100) {
        if (animted) {
            [UIView animateWithDuration:0.35f animations:^{
                _countLabel.frame   = labelRect_10_99;
                _countLabel.alpha   = 1.f;
                _countLabel.text    = @"99";
                _deleteButton.frame = deleteRect_10_99;
                _deleteButton.alpha = 1.f;
            }];
        } else {
            _countLabel.frame   = labelRect_10_99;
            _countLabel.alpha   = 1.f;
            _countLabel.text    = @"99";
            _deleteButton.frame = deleteRect_10_99;
            _deleteButton.alpha = 1.f;
        }
        
        return;
    }
    
    
    // 11 - 98
    if (count.intValue >= 10 && count.intValue <= 99) {
        _countLabel.frame   = labelRect_10_99;
        _countLabel.text    = count.stringValue;
        _deleteButton.frame = deleteRect_10_99;
        
        return;
    }
    
    // 2 --> 8
    if (count.intValue >= 1 && count.intValue <= 9) {
        _countLabel.frame   = labelRect;
        _countLabel.text    = count.stringValue;
        _deleteButton.frame = deleteRect;
        
        return;
    }
    
    if (count.intValue >= 100 && count.intValue <= 999) {
        _countLabel.frame   = labelRect_100_999;
        _countLabel.text    = count.stringValue;
        _deleteButton.frame = deleteRect_100_999;
        
        return;
    }
}

@end

使用源码：

    AddAndDeleteButton *button = [[AddAndDeleteButton alloc] initWithFrame:CGRectMake(100, 0, 150, 28)];
    [button startValue:@(0)];
    button.transform           = CGAffineTransformScale(button.transform, 1.5, 1.5);
    button.center              = self.view.center;
    [self.view addSubview:button];

控制器源码：

//
//  ViewController.m
//  LabelControll
//
//  Created by YouXianMing on 14/12/11.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "ViewController.h"
#import "AddAndDeleteButton.h"
#import "YXCell.h"

static NSString *test = @"YouXianMing";

@interface ViewController ()<UITableViewDataSource, UITableViewDelegate, YXCellDelegate>

@property (nonatomic, strong) UITableView    *tableView;
@property (nonatomic, strong) NSMutableArray *dataArray;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    _dataArray = [[NSMutableArray alloc] init];
    for (int i = 0; i < 20; i++) {
        [_dataArray addObject:@(i)];
    }

    
    _tableView            = [[UITableView alloc] initWithFrame:self.view.bounds
                                              style:UITableViewStylePlain];
    _tableView.delegate   = self;
    _tableView.dataSource = self;
    [self.view addSubview:_tableView];
    
    [_tableView registerClass:[YXCell class] forCellReuseIdentifier:test];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    YXCell *cell = [tableView dequeueReusableCellWithIdentifier:test];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    cell.delegate = self;
    
    [cell.button startValue:_dataArray[indexPath.row]];

    return cell;
}

- (void)currentCount:(NSNumber *)count cell:(YXCell *)cell {
    NSIndexPath *path = [_tableView indexPathForCell:cell];
    [_dataArray replaceObjectAtIndex:path.row withObject:count];
}

@end

//
//  YXCell.h
//  LabelControll
//
//  Created by YouXianMing on 14/12/11.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "AddAndDeleteButton.h"

@class YXCell;

@protocol YXCellDelegate <NSObject>
@optional
- (void)currentCount:(NSNumber *)count cell:(YXCell *)cell;
@end

@interface YXCell : UITableViewCell

@property (nonatomic, weak)    id<YXCellDelegate>  delegate;

@property (nonatomic, strong)  AddAndDeleteButton *button;

@end

//
//  YXCell.m
//  LabelControll
//
//  Created by YouXianMing on 14/12/11.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "YXCell.h"

@interface YXCell ()<AddAndDeleteButtonDelegate>

@end

@implementation YXCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        _button = [[AddAndDeleteButton alloc] initWithFrame:CGRectMake(100, 0, 150, 28)];
        _button.delegate = self;
        [_button startValue:@(0)];
        [self addSubview:_button];
    }
    
    return self;
}

- (void)currentCount:(NSNumber *)count {
    if (_delegate && [_delegate respondsToSelector:@selector(currentCount:cell:)]) {
        [_delegate currentCount:count cell:self];
    }
}

@end