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

2020-07-26 02:51:40

字体：大中小

来源：转载

供稿：网友

前言：

适用场景：商城类的 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 DropDown下拉按钮效果代码分享

下一篇：iOS 页面滑动与标题切换颜色渐变的联动效果实例