首页 > 代码库 > iOS开发项目篇—47Toolbar工具条
iOS开发项目篇—47Toolbar工具条
iOS开发项目篇—47Toolbar工具条
一、基本设置
说明:完成微博cell中toolbar的基本设置(转发数、评论数、赞)
实现代码:
YYStatusToolbar.m文件
1 // 2 // YYStatusToolbar.m 3 // 4 5 #import "YYStatusToolbar.h" 6 7 @interface YYStatusToolbar () 8 /**用来保存两条竖线*/ 9 @property(nonatomic,strong)NSMutableArray *dividers; 10 /**用来保存三个按钮*/ 11 @property(nonatomic,strong)NSMutableArray *btns; 12 13 @end 14 @implementation YYStatusToolbar 15 16 17 #pragma mark-懒加载 18 -(NSMutableArray *)dividers 19 { 20 if (_dividers==nil) { 21 _dividers=[NSMutableArray array]; 22 } 23 return _dividers; 24 } 25 26 -(NSMutableArray *)btns 27 { 28 if (_btns==nil) { 29 _btns=[NSMutableArray array]; 30 } 31 return _btns; 32 } 33 34 //初始 35 - (id)initWithFrame:(CGRect)frame 36 { 37 self = [super initWithFrame:frame]; 38 if (self) { 39 //设置为可交互的 40 self.userInteractionEnabled = YES; 41 42 self.image=[UIImage resizedImage:@"timeline_card_bottom_background"]; 43 //添加按钮 44 [self setupBtnWithIcon:@"timeline_icon_comment" title:@"评论"]; 45 [self setupBtnWithIcon:@"timeline_icon_retweet" title:@"转发"]; 46 [self setupBtnWithIcon:@"timeline_icon_unlike" title:@"赞"]; 47 48 //添加竖线 49 [self setupDividers]; 50 [self setupDividers]; 51 } 52 return self; 53 } 54 55 /**创建并添加按钮*/ 56 -(void)setupBtnWithIcon:(NSString *)icon title:(NSString *)title 57 { 58 UIButton *btn=[[UIButton alloc]init]; 59 //设置按钮的图片 60 [btn setImage:[UIImage imageWithName:icon] forState:UIControlStateNormal]; 61 //设置按钮的标题 62 [btn setTitle:title forState:UIControlStateNormal]; 63 //设置标题的字体颜色 64 [btn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateNormal]; 65 //设置标题的字体大小 66 btn.titleLabel.font=[UIFont systemFontOfSize:14]; 67 //设置辩题文字和图标之间的间距为15 68 btn.titleEdgeInsets=UIEdgeInsetsMake(0, 15, 0, 0); 69 //设置高亮时的背景 70 [btn setBackgroundImage:[UIImage imageWithName:@"common_card_bottom_background_highlighted"] forState:UIControlStateHighlighted]; 71 btn.adjustsImageWhenHighlighted=NO; 72 //把按钮添加到toolbar上 73 [self addSubview:btn]; 74 [self.btns addObject:btn]; 75 } 76 77 /**添加竖线*/ 78 -(void)setupDividers 79 { 80 UIImageView *dividers=[[UIImageView alloc]init]; 81 dividers.image=[UIImage imageWithName:@"timeline_card_bottom_line"]; 82 dividers.contentMode=UIViewContentModeCenter; 83 [self addSubview:dividers]; 84 [self.dividers addObject:dividers]; 85 } 86 87 /**设置frame*/ 88 -(void)layoutSubviews 89 { 90 [super layoutSubviews]; 91 int btnCount=self.btns.count; 92 CGFloat btnW=self.width/btnCount; 93 CGFloat btnH=self.height; 94 for (int i=0; i<btnCount; i++) { 95 UIButton *btn=self.btns[i]; 96 btn.width=btnW; 97 btn.height=btnH; 98 btn.y=0; 99 btn.x=i*btnW;100 }101 102 int dividersCount=self.dividers.count;103 for (int i=0; i<dividersCount; i++) {104 UIImageView *divider=self.dividers[i];105 divider.width=2;106 divider.height=btnH;107 divider.centerX=(1+i)*btnW;108 divider.centerY=btnH*0.5;109 }110 111 }112 @end
注意:懒加载必须是strong,weak为什么不行?(作用域一过,就被销毁了)
实现效果:
二、完善
1.说明
已经完成的toolbar的效果为:
目标效果为:
说明:当有数字的时候,显示数字,没有数字的时候显示提示文字。
2.实现
toolbar需要获取到三个数值(转发,评论,赞)。
一种做法是,在toolbar中添加三个属性,分别为对应的转发,评论,赞。但是这种做法过于冗余,且还需要确定是具体的哪条微博。
第二种做法中,直接把微博模型传递给toolbar,在模型中已经包含了必要的信息。
微博模型如下:
1 #import "YYUserModel.h" 2 3 @interface YYStatusModel : NSObject 4 /** string 微博创建时间*/ 5 @property(nonatomic,copy)NSString *created_at; 6 7 /** string 字符串型的微博ID*/ 8 @property(nonatomic,copy)NSString *idstr; 9 10 /** string 微博信息内容*/11 @property(nonatomic,copy)NSString *text;12 13 /** string 微博来源*/14 @property(nonatomic,copy)NSString *source;15 16 /** object 微博作者的用户信息字段 详细*/17 @property(nonatomic,strong)YYUserModel *user;18 19 /** object 被转发的原微博信息字段,当该微博为转发微博时返回 详细*/20 @property(nonatomic,strong)YYStatusModel *retweeted_status;21 22 /** int 转发数*/23 @property(nonatomic,assign)int reposts_count;24 25 /** int 评论数*/26 @property(nonatomic,assign)int comments_count;27 28 /** int 表态数*/29 @property(nonatomic,assign)int attitudes_count;30 31 /** object 微博配图地址。多图时返回多图链接。无配图返回“[]” 数组里面都是HMPhoto模型*/32 @property(nonatomic,copy)NSArray *pic_urls;
给toolbar添加一个模型属性
1 //2 // YYStatusToolbar.h3 //4 5 #import <UIKit/UIKit.h>6 @class YYStatusModel;7 @interface YYStatusToolbar : UIImageView8 @property(nonatomic,strong)YYStatusModel *status;9 @end
在YYStatusCell.m文件中,为toolbar设置模型数据
1 -(void)setStatusFrame:(YYStatusFrame *)statusFrame 2 { 3 _statusFrame=statusFrame; 4 //1.微博具体内容的frame数据 5 self.detailView.detailFrame=statusFrame.StatusDetailFrame; 6 7 //2.底部工具条的frame数据 8 self.toolbar.frame=statusFrame.toolbarFrame; 9 //设置toolbar的数据模型10 self.toolbar.status=statusFrame.status;11 }12 @end
在 YYStatusToolbar.m文件中,重写set方法
1 // 2 // YYStatusToolbar.m 3 // 4 5 #import "YYStatusToolbar.h" 6 #import "YYStatusModel.h" 7 8 @interface YYStatusToolbar () 9 /**用来保存两条竖线*/ 10 @property(nonatomic,strong)NSMutableArray *dividers; 11 /**用来保存三个按钮*/ 12 @property(nonatomic,strong)NSMutableArray *btns; 13 14 @end 15 @implementation YYStatusToolbar 16 17 18 #pragma mark-懒加载 19 -(NSMutableArray *)dividers 20 { 21 if (_dividers==nil) { 22 _dividers=[NSMutableArray array]; 23 } 24 return _dividers; 25 } 26 27 -(NSMutableArray *)btns 28 { 29 if (_btns==nil) { 30 _btns=[NSMutableArray array]; 31 } 32 return _btns; 33 } 34 35 //初始 36 - (id)initWithFrame:(CGRect)frame 37 { 38 self = [super initWithFrame:frame]; 39 if (self) { 40 //设置为可交互的 41 self.userInteractionEnabled = YES; 42 43 self.image=[UIImage resizedImage:@"timeline_card_bottom_background"]; 44 //添加按钮 45 [self setupBtnWithIcon:@"timeline_icon_comment" title:@"评论"]; 46 [self setupBtnWithIcon:@"timeline_icon_retweet" title:@"转发"]; 47 [self setupBtnWithIcon:@"timeline_icon_unlike" title:@"赞"]; 48 49 //添加竖线 50 [self setupDividers]; 51 [self setupDividers]; 52 } 53 return self; 54 } 55 56 /**创建并添加按钮*/ 57 -(void)setupBtnWithIcon:(NSString *)icon title:(NSString *)title 58 { 59 UIButton *btn=[[UIButton alloc]init]; 60 //设置按钮的图片 61 [btn setImage:[UIImage imageWithName:icon] forState:UIControlStateNormal]; 62 //设置按钮的标题 63 [btn setTitle:title forState:UIControlStateNormal]; 64 //设置标题的字体颜色 65 [btn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateNormal]; 66 //设置标题的字体大小 67 btn.titleLabel.font=[UIFont systemFontOfSize:14]; 68 //设置辩题文字和图标之间的间距为10 69 btn.titleEdgeInsets=UIEdgeInsetsMake(0, 15, 0, 0); 70 //设置高亮时的背景 71 [btn setBackgroundImage:[UIImage imageWithName:@"common_card_bottom_background_highlighted"] forState:UIControlStateHighlighted]; 72 btn.adjustsImageWhenHighlighted=NO; 73 //把按钮添加到toolbar上 74 [self addSubview:btn]; 75 [self.btns addObject:btn]; 76 } 77 78 /**添加竖线*/ 79 -(void)setupDividers 80 { 81 UIImageView *dividers=[[UIImageView alloc]init]; 82 dividers.image=[UIImage imageWithName:@"timeline_card_bottom_line"]; 83 dividers.contentMode=UIViewContentModeCenter; 84 [self addSubview:dividers]; 85 [self.dividers addObject:dividers]; 86 } 87 88 /**设置frame*/ 89 -(void)layoutSubviews 90 { 91 [super layoutSubviews]; 92 int btnCount=self.btns.count; 93 CGFloat btnW=self.width/btnCount; 94 CGFloat btnH=self.height; 95 for (int i=0; i<btnCount; i++) { 96 UIButton *btn=self.btns[i]; 97 btn.width=btnW; 98 btn.height=btnH; 99 btn.y=0;100 btn.x=i*btnW;101 }102 103 int dividersCount=self.dividers.count;104 for (int i=0; i<dividersCount; i++) {105 UIImageView *divider=self.dividers[i];106 divider.width=2;107 divider.height=btnH;108 divider.centerX=(1+i)*btnW;109 divider.centerY=btnH*0.5;110 }111 112 }113 114 -(void)setStatus:(YYStatusModel *)status115 {116 _status=status;117 118 //拿到按钮119 UIButton *commentBtn=self.btns[0];120 NSString *commenttitle=status.comments_count?[NSString stringWithFormat:@"%d",status.comments_count]:@"评论";121 [commentBtn setTitle:commenttitle forState:UIControlStateNormal];122 123 UIButton *repostBtn=self.btns[1];124 NSString *reposttitle=status.reposts_count?[NSString stringWithFormat:@"%d",status.reposts_count]:@"转发";125 [repostBtn setTitle:reposttitle forState:UIControlStateNormal];126 127 UIButton *attitudesBtn=self.btns[2];128 NSString *attitudestitle=status.attitudes_count?[NSString stringWithFormat:@"%d",status.attitudes_count]:@"赞";129 [attitudesBtn setTitle:attitudestitle forState:UIControlStateNormal];130 }131 @end
实现效果:
上述代码的不足,通过写死数字来取出相应的按钮,健壮性不好。如果调换了按钮之间的顺序,那么就错乱了。
三、调整
实现顺序无关性
1 // 2 // YYStatusToolbar.m 3 // 4 5 #import "YYStatusToolbar.h" 6 #import "YYStatusModel.h" 7 8 @interface YYStatusToolbar () 9 /**用来保存两条竖线*/ 10 @property(nonatomic,strong)NSMutableArray *dividers; 11 /**用来保存三个按钮*/ 12 @property(nonatomic,strong)NSMutableArray *btns; 13 @property(nonatomic,strong)UIButton *commentBtn; 14 @property(nonatomic,strong)UIButton *repostBtn; 15 @property(nonatomic,strong)UIButton *attitudesBtn; 16 17 @end 18 @implementation YYStatusToolbar 19 20 21 #pragma mark-懒加载 22 -(NSMutableArray *)dividers 23 { 24 if (_dividers==nil) { 25 _dividers=[NSMutableArray array]; 26 } 27 return _dividers; 28 } 29 30 -(NSMutableArray *)btns 31 { 32 if (_btns==nil) { 33 _btns=[NSMutableArray array]; 34 } 35 return _btns; 36 } 37 38 //初始 39 - (id)initWithFrame:(CGRect)frame 40 { 41 self = [super initWithFrame:frame]; 42 if (self) { 43 //设置为可交互的 44 self.userInteractionEnabled = YES; 45 46 self.image=[UIImage resizedImage:@"timeline_card_bottom_background"]; 47 //添加按钮 48 self.commentBtn = [self setupBtnWithIcon:@"timeline_icon_comment" title:@"评论"]; 49 self.repostBtn = [self setupBtnWithIcon:@"timeline_icon_retweet" title:@"转发"]; 50 self.attitudesBtn = [self setupBtnWithIcon:@"timeline_icon_unlike" title:@"赞"]; 51 52 //添加竖线 53 [self setupDividers]; 54 [self setupDividers]; 55 } 56 return self; 57 } 58 59 /**创建并添加按钮*/ 60 -(UIButton *)setupBtnWithIcon:(NSString *)icon title:(NSString *)title 61 { 62 UIButton *btn=[[UIButton alloc]init]; 63 //设置按钮的图片 64 [btn setImage:[UIImage imageWithName:icon] forState:UIControlStateNormal]; 65 //设置按钮的标题 66 [btn setTitle:title forState:UIControlStateNormal]; 67 //设置标题的字体颜色 68 [btn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateNormal]; 69 //设置标题的字体大小 70 btn.titleLabel.font=[UIFont systemFontOfSize:14]; 71 //设置辩题文字和图标之间的间距为10 72 btn.titleEdgeInsets=UIEdgeInsetsMake(0, 15, 0, 0); 73 //设置高亮时的背景 74 [btn setBackgroundImage:[UIImage imageWithName:@"common_card_bottom_background_highlighted"] forState:UIControlStateHighlighted]; 75 btn.adjustsImageWhenHighlighted=NO; 76 //把按钮添加到toolbar上 77 [self addSubview:btn]; 78 [self.btns addObject:btn]; 79 return btn; 80 } 81 82 /**添加竖线*/ 83 -(void)setupDividers 84 { 85 UIImageView *dividers=[[UIImageView alloc]init]; 86 dividers.image=[UIImage imageWithName:@"timeline_card_bottom_line"]; 87 dividers.contentMode=UIViewContentModeCenter; 88 [self addSubview:dividers]; 89 [self.dividers addObject:dividers]; 90 } 91 92 /**设置frame*/ 93 -(void)layoutSubviews 94 { 95 [super layoutSubviews]; 96 int btnCount=self.btns.count; 97 CGFloat btnW=self.width/btnCount; 98 CGFloat btnH=self.height; 99 for (int i=0; i<btnCount; i++) {100 UIButton *btn=self.btns[i];101 btn.width=btnW;102 btn.height=btnH;103 btn.y=0;104 btn.x=i*btnW;105 }106 107 int dividersCount=self.dividers.count;108 for (int i=0; i<dividersCount; i++) {109 UIImageView *divider=self.dividers[i];110 divider.width=2;111 divider.height=btnH;112 divider.centerX=(1+i)*btnW;113 divider.centerY=btnH*0.5;114 }115 116 }117 118 -(void)setStatus:(YYStatusModel *)status119 {120 _status=status;121 122 //拿到按钮123 // UIButton *commentBtn=self.btns[0];124 // NSString *commenttitle=status.comments_count?[NSString stringWithFormat:@"%d",status.comments_count]:@"评论";125 // [commentBtn setTitle:commenttitle forState:UIControlStateNormal];126 // 127 // UIButton *repostBtn=self.btns[1];128 // NSString *reposttitle=status.reposts_count?[NSString stringWithFormat:@"%d",status.reposts_count]:@"转发";129 // [repostBtn setTitle:reposttitle forState:UIControlStateNormal];130 // 131 // UIButton *attitudesBtn=self.btns[2];132 // NSString *attitudestitle=status.attitudes_count?[NSString stringWithFormat:@"%d",status.attitudes_count]:@"赞";133 // [attitudesBtn setTitle:attitudestitle forState:UIControlStateNormal];134 135 NSString *commenttitle=status.comments_count?[NSString stringWithFormat:@"%d",status.comments_count]:@"评论";136 [self.commentBtn setTitle:commenttitle forState:UIControlStateNormal];137 138 NSString *reposttitle=status.reposts_count?[NSString stringWithFormat:@"%d",status.reposts_count]:@"转发";139 [self.repostBtn setTitle:reposttitle forState:UIControlStateNormal];140 141 NSString *attitudestitle=status.attitudes_count?[NSString stringWithFormat:@"%d",status.attitudes_count]:@"赞";142 [self.attitudesBtn setTitle:attitudestitle forState:UIControlStateNormal];143 }144 @end
四、大数据的显示
1.数字的处理
(1)小于1万:具体数字,如9800,就显示9800
(2)大于等于1万:XX.X万,如78956,就显示7.9万
(3)整万:800565,显示为80万
2.把左边字符串中出现的.0,用空来代替
commenttitle=[commenttitle stringByReplacingOccurrencesOfString:@".0" withString:@""];
说明:%.1f,为保留一个小数的浮点数。会自动进行四舍五入。
1 -(void)setStatus:(YYStatusModel *)status 2 { 3 _status=status; 4 5 //拿到按钮 6 /* 7 (1)小于1万:具体数字,如9800,就显示9800 8 9 (2)大于等于1万:XX.X万,如78956,就显示7.9万10 11 (3)整万:800565,显示为80万12 */13 14 status.comments_count=46040421;15 NSString *commenttitle=@"评论";16 if (status.comments_count>=10000) {//[10000,无限大]17 commenttitle=[NSString stringWithFormat:@"%.1f万",status.comments_count/10000.0];18 commenttitle=[commenttitle stringByReplacingOccurrencesOfString:@".0" withString:@""];19 }else if(status.comments_count>0)20 {21 commenttitle=[NSString stringWithFormat:@"%d",status.comments_count];22 }23 24 [self.commentBtn setTitle:commenttitle forState:UIControlStateNormal];25 26 NSString *reposttitle=status.reposts_count?[NSString stringWithFormat:@"%d",status.reposts_count]:@"转发";27 [self.repostBtn setTitle:reposttitle forState:UIControlStateNormal];28 29 NSString *attitudestitle=status.attitudes_count?[NSString stringWithFormat:@"%d",status.attitudes_count]:@"赞";30 [self.attitudesBtn setTitle:attitudestitle forState:UIControlStateNormal];31 }
显示效果:
每个按钮都要进行这样的设置,所以在这里出去出一个公共的方法来。
1 // 2 // YYStatusToolbar.m 3 // 4 5 #import "YYStatusToolbar.h" 6 #import "YYStatusModel.h" 7 8 @interface YYStatusToolbar () 9 /**用来保存两条竖线*/ 10 @property(nonatomic,strong)NSMutableArray *dividers; 11 /**用来保存三个按钮*/ 12 @property(nonatomic,strong)NSMutableArray *btns; 13 @property(nonatomic,strong)UIButton *commentBtn; 14 @property(nonatomic,strong)UIButton *repostBtn; 15 @property(nonatomic,strong)UIButton *attitudesBtn; 16 17 @end 18 @implementation YYStatusToolbar 19 20 21 #pragma mark-懒加载 22 -(NSMutableArray *)dividers 23 { 24 if (_dividers==nil) { 25 _dividers=[NSMutableArray array]; 26 } 27 return _dividers; 28 } 29 30 -(NSMutableArray *)btns 31 { 32 if (_btns==nil) { 33 _btns=[NSMutableArray array]; 34 } 35 return _btns; 36 } 37 38 //初始 39 - (id)initWithFrame:(CGRect)frame 40 { 41 self = [super initWithFrame:frame]; 42 if (self) { 43 //设置为可交互的 44 self.userInteractionEnabled = YES; 45 46 self.image=[UIImage resizedImage:@"timeline_card_bottom_background"]; 47 //添加按钮 48 self.commentBtn = [self setupBtnWithIcon:@"timeline_icon_comment" title:@"评论"]; 49 self.repostBtn = [self setupBtnWithIcon:@"timeline_icon_retweet" title:@"转发"]; 50 self.attitudesBtn = [self setupBtnWithIcon:@"timeline_icon_unlike" title:@"赞"]; 51 52 //添加竖线 53 [self setupDividers]; 54 [self setupDividers]; 55 } 56 return self; 57 } 58 59 /**创建并添加按钮*/ 60 -(UIButton *)setupBtnWithIcon:(NSString *)icon title:(NSString *)title 61 { 62 UIButton *btn=[[UIButton alloc]init]; 63 //设置按钮的图片 64 [btn setImage:[UIImage imageWithName:icon] forState:UIControlStateNormal]; 65 //设置按钮的标题 66 [btn setTitle:title forState:UIControlStateNormal]; 67 //设置标题的字体颜色 68 [btn setTitleColor:[UIColor lightGrayColor] forState:UIControlStateNormal]; 69 //设置标题的字体大小 70 btn.titleLabel.font=[UIFont systemFontOfSize:14]; 71 //设置辩题文字和图标之间的间距为10 72 btn.titleEdgeInsets=UIEdgeInsetsMake(0, 15, 0, 0); 73 //设置高亮时的背景 74 [btn setBackgroundImage:[UIImage imageWithName:@"common_card_bottom_background_highlighted"] forState:UIControlStateHighlighted]; 75 btn.adjustsImageWhenHighlighted=NO; 76 //把按钮添加到toolbar上 77 [self addSubview:btn]; 78 [self.btns addObject:btn]; 79 return btn; 80 } 81 82 /**添加竖线*/ 83 -(void)setupDividers 84 { 85 UIImageView *dividers=[[UIImageView alloc]init]; 86 dividers.image=[UIImage imageWithName:@"timeline_card_bottom_line"]; 87 dividers.contentMode=UIViewContentModeCenter; 88 [self addSubview:dividers]; 89 [self.dividers addObject:dividers]; 90 } 91 92 /**设置frame*/ 93 -(void)layoutSubviews 94 { 95 [super layoutSubviews]; 96 int btnCount=self.btns.count; 97 CGFloat btnW=self.width/btnCount; 98 CGFloat btnH=self.height; 99 for (int i=0; i<btnCount; i++) {100 UIButton *btn=self.btns[i];101 btn.width=btnW;102 btn.height=btnH;103 btn.y=0;104 btn.x=i*btnW;105 }106 107 int dividersCount=self.dividers.count;108 for (int i=0; i<dividersCount; i++) {109 UIImageView *divider=self.dividers[i];110 divider.width=2;111 divider.height=btnH;112 divider.centerX=(1+i)*btnW;113 divider.centerY=btnH*0.5;114 }115 116 }117 118 -(void)setStatus:(YYStatusModel *)status119 {120 _status=status;121 //拿到按钮122 /*123 (1)小于1万:具体数字,如9800,就显示9800124 (2)大于等于1万:XX.X万,如78956,就显示7.9万125 (3)整万:800565,显示为80万126 */127 128 [self setupBtnTitle:self.commentBtn count:status.comments_count defaultTitle:@"评论"];129 [self setupBtnTitle:self.repostBtn count:status.reposts_count defaultTitle:@"转发"];130 [self setupBtnTitle:self.attitudesBtn count:status.attitudes_count defaultTitle:@"赞"];131 }132 133 /**134 * 设置按钮的文字135 *136 * @param button 需要设置文字的按钮137 * @param count 按钮显示的数字138 * @param defaultTitle 数字为0时显示的默认文字139 */140 - (void)setupBtnTitle:(UIButton *)button count:(int)count defaultTitle:(NSString *)defaultTitle141 {142 if (count >= 10000) { // [10000, 无限大)143 defaultTitle = [NSString stringWithFormat:@"%.1f万", count / 10000.0];144 // 用空串替换掉所有的.0145 defaultTitle = [defaultTitle stringByReplacingOccurrencesOfString:@".0" withString:@""];146 } else if (count > 0) { // (0, 10000)147 defaultTitle = [NSString stringWithFormat:@"%d", count];148 }149 [button setTitle:defaultTitle forState:UIControlStateNormal];150 }151 @end