前言：

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

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

实现原理：

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

2、将一个 uibutton 和 一个 uilabel 添加到一个 uiview 上。然后将这个 uiview 设置为 navigationitem 的右侧按钮；3、uilabel 控件的动画效果。

具体实现代码如下：​

​1、shopcarview.h 文件

? 1 2 3 4 5 6 7 8 9 10 #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 文件

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 ​#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 的属性隐藏起来，打到很好的封装效果。

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

原文链接：http://blog.sina.com.cn/s/blog_13d30a6170102wa46.html