iOS实现自定义购物车角标显示购物数量（添加商品时角标抖动 Vie）

162 阅读 0 评论 107 点赞

我是靠谱客的博主年轻仙人掌，这篇文章主要介绍iOS实现自定义购物车角标显示购物数量（添加商品时角标抖动 Vie），现在分享给大家，希望可以做个参考。

前言：

适用场景：商城类的 App 。将自定义的购物车 view 设置为 navigationItem 的导航栏按钮。效果图如下：

图1、右上角的购物车即是我们定义的view

实现原理：

1、利用 navigationItem 可以将 UIView 设置为导航栏的按钮；

2、将一个 UIButton 和一个 UILabel 添加到一个 UIView 上。然后将这个 UIView 设置为 navigationItem 的右侧按钮；3、UILabel 控件的动画效果。

具体实现代码如下：

1、ShopCarView.h 文件

复制代码

1
2
3
4
5
6
7
8
9
10
#import
@protocol ShopCarButtonDelegate <</span>NSObject>
// 代理的方法，在此方法内，完成按钮的点击事件。
- (void)shopCarButtonClickAction;
@end
@interfaceShopCarView : UIView
@property (nonatomic, assign)id<</span>ShopCarButtonDelegate> delegate;
// 为购物车设置角标内数值
- (void)setShopCarCount:(NSString *)count;
@end

2、ShopCarView.m 文件

复制代码

#import "ShopCarView.h"
@interfaceShopCarView()
@property (nonatomic, strong)UIButton *carButton;
@property (nonatomic, strong)UILabel *countLabel;
@end
@implementation ShopCarView
- (instancetype)initWithFrame:(CGRect)frame{
 CGRect myFrame = CGRectMake(0, 0, 40, 40);
 self = [superinitWithFrame:myFrame];
 if (self) {
 [selfaddSubview:self.carButton];
 }
 returnself;
}
- (UIButton *)carButton{
 if (!_carButton) {
 _carButton = [UIButtonbuttonWithType:UIButtonTypeCustom];
 _carButton.frame = CGRectMake(0, 8, 32, 32);
 [_carButtonsetImage:[UIImageimageNamed:@"购物1"] forState:UIControlStateNormal];
 [_carButtonaddTarget:selfaction:@selector(shopCarButtonAction) forControlEvents:UIControlEventTouchUpInside];
 }
 return_carButton;
}
- (UILabel *)countLabel{
 if (!_countLabel) {
 _countLabel = [[UILabelalloc] initWithFrame:CGRectMake(24, 5, 16, 16)];
 _countLabel.backgroundColor = [UIColorredColor];
 _countLabel.textAlignment = NSTextAlignmentCenter;
 _countLabel.textColor = [UIColorwhiteColor];
 _countLabel.layer.cornerRadius = 8;
 _countLabel.font = [UIFontsystemFontOfSize:12];
 _countLabel.layer.masksToBounds = YES;
 [selfaddSubview:_countLabel];
 }
 return_countLabel;
}
// 为购物车设置角标内数值
- (void)setShopCarCount:(NSString *)count{
 if ([count integerValue] == 0) {
 if (_countLabel) {
  [_countLabelremoveFromSuperview];
  _countLabel = nil;
 }
 return;
 }
 if ([count integerValue] > 9) {
 self.countLabel.text = @"9+";
 }else{
 self.countLabel.text = count;
 }
 [selfshakeView:_countLabel];
}
// 实现的代理方法
- (void)shopCarButtonAction{
 [self.delegateshopCarButtonClickAction];
}
// 实现抖动效果
-(void)shakeView:(UIView*)viewToShake
{
 CGFloat t =2.0;
 CGAffineTransform translateRight =CGAffineTransformTranslate(CGAffineTransformIdentity, t,0.0);
 CGAffineTransform translateLeft =CGAffineTransformTranslate(CGAffineTransformIdentity,-t,0.0);
 viewToShake.transform = translateLeft;
[UIViewanimateWithDuration:0.07delay:0.0options:UIViewAnimationOptionAutoreverse|UIViewAnimationOptionRepeatanimations:^{
 [UIViewsetAnimationRepeatCount:2.0];
 viewToShake.transform = translateRight;
 } completion:^(BOOL finished){
 if(finished){
[UIViewanimateWithDuration:0.05delay:0.0options:UIViewAnimationOptionBeginFromCurrentStateanimations:^{
  viewToShake.transform =CGAffineTransformIdentity;
  } completion:NULL];
 }
 }];
}
@end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
#import "ShopCarView.h"
@interfaceShopCarView()
@property (nonatomic, strong)UIButton *carButton;
@property (nonatomic, strong)UILabel *countLabel;
@end
@implementation ShopCarView
- (instancetype)initWithFrame:(CGRect)frame{
 CGRect myFrame = CGRectMake(0, 0, 40, 40);
 self = [superinitWithFrame:myFrame];
 if (self) {
 [selfaddSubview:self.carButton];
 }
 returnself;
}
- (UIButton *)carButton{
 if (!_carButton) {
 _carButton = [UIButtonbuttonWithType:UIButtonTypeCustom];
 _carButton.frame = CGRectMake(0, 8, 32, 32);
 [_carButtonsetImage:[UIImageimageNamed:@"购物1"] forState:UIControlStateNormal];
 [_carButtonaddTarget:selfaction:@selector(shopCarButtonAction) forControlEvents:UIControlEventTouchUpInside];
 }
 return_carButton;
}
- (UILabel *)countLabel{
 if (!_countLabel) {
 _countLabel = [[UILabelalloc] initWithFrame:CGRectMake(24, 5, 16, 16)];
 _countLabel.backgroundColor = [UIColorredColor];
 _countLabel.textAlignment = NSTextAlignmentCenter;
 _countLabel.textColor = [UIColorwhiteColor];
 _countLabel.layer.cornerRadius = 8;
 _countLabel.font = [UIFontsystemFontOfSize:12];
 _countLabel.layer.masksToBounds = YES;
 [selfaddSubview:_countLabel];
 }
 return_countLabel;
}
// 为购物车设置角标内数值
- (void)setShopCarCount:(NSString *)count{
 if ([count integerValue] == 0) {
 if (_countLabel) {
  [_countLabelremoveFromSuperview];
  _countLabel = nil;
 }
 return;
 }
 if ([count integerValue] > 9) {
 self.countLabel.text = @"9+";
 }else{
 self.countLabel.text = count;
 }
 [selfshakeView:_countLabel];
}
// 实现的代理方法
- (void)shopCarButtonAction{
 [self.delegateshopCarButtonClickAction];
}
// 实现抖动效果
-(void)shakeView:(UIView*)viewToShake
{
 CGFloat t =2.0;
 CGAffineTransform translateRight =CGAffineTransformTranslate(CGAffineTransformIdentity, t,0.0);
 CGAffineTransform translateLeft =CGAffineTransformTranslate(CGAffineTransformIdentity,-t,0.0);
 viewToShake.transform = translateLeft;
[UIViewanimateWithDuration:0.07delay:0.0options:UIViewAnimationOptionAutoreverse|UIViewAnimationOptionRepeatanimations:^{
 [UIViewsetAnimationRepeatCount:2.0];
 viewToShake.transform = translateRight;
 } completion:^(BOOL finished){
 if(finished){
[UIViewanimateWithDuration:0.05delay:0.0options:UIViewAnimationOptionBeginFromCurrentStateanimations:^{
  viewToShake.transform =CGAffineTransformIdentity;
  } completion:NULL];
 }
 }];
}
@end