前言：

適用場景：商城類的 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 的屬性隱藏起來，打到很好的封裝效果。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持本站！