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

前言：

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

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

实现原理：

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

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

具体实现代码如下：

1、ShopCarView.h 文件

#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

代码很简单，逻辑也比较清晰。使用代理方法，将自定义的 View 的属性隐藏起来，打到很好的封装效果。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# ios # 购物车角标 # 角标 # iOS添加购物车动画效果示例 # IOS购物车界面实现效果示例 # iOS实现电商购物车界面示例 # iOS搭建简易购物车页面 # 购物车 # 设置为 # 自定义 # 很好 # 在此 # 很简单 # 打到 # 即是 # 角标内 # delegate # id # count # NSString # setShopCarCount # shopCarButtonClickAction # void # NSObject # interfaceShopCarView # assign # nonatomic

返回目录在线咨询

上一篇：建站之星微营销平台能为商家提供哪些独特的营销策略？
下一篇：使用Pandas重塑DataFrame：将多列数据聚合为列表并进行透视

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求