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

本文主要介绍了iOS实现自定义购物车及角标显示购物数量（添加商品时角标抖动 Vie）的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

前言：

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

IiBzcmM9

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

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