前言：
适用场景：商城类的 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
如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。