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 的属性隐藏起来，打到很好的封装效果。

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