iOS实现自定义购物车角标显示购物数量（添加商品时角标抖动Vie）-营山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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

前言：

创新互联是一家网站设计公司，集创意、互联网应用、软件技术为一体的创意网站建设服务商，主营产品：响应式网站设计、成都品牌网站建设、营销型网站。我们专注企业品牌在网站中的整体树立，网络互动的体验，以及在手机等移动端的优质呈现。网站制作、做网站、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案，我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏析悦目的作品，网站的价值服务。

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

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

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

实现原理：

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

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

具体实现代码如下：

1、ShopCarView.h 文件

#import
@protocol ShopCarButtonDelegate <NSObject>
// 代理的方法，在此方法内，完成按钮的点击事件。
- (void)shopCarButtonClickAction;
@end
@interfaceShopCarView : UIView
@property (nonatomic, assign)id<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实现自定义购物车角标显示购物数量（添加商品时角标抖动Vie）
文章链接：http://scyingshan.cn/article/jshedh.html

新闻中心

其他资讯