山寨“餓了么”應用中添加菜品數量按鈕效果

本人視頻教程系類 ??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; // 0static CGRect labelRect; // 1 - 9 static CGRect deleteRect; // 1 - 9static CGRect labelRect_10_99; // 10 - 99 static CGRect deleteRect_10_99; // 10 - 99static 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:selfaction:@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:selfaction:@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 --> 0if (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 --> 1if (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 --> 10if (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 --> 9if (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 --> 100if (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 --> 99if (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 - 98if (count.intValue >= 10 && count.intValue <= 99) {_countLabel.frame = labelRect_10_99;_countLabel.text = count.stringValue;_deleteButton.frame = deleteRect_10_99;return;}// 2 --> 8if (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.boundsstyle: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

總結

以上是生活随笔為你收集整理的山寨“饿了么”应用中添加菜品数量按钮效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。