首页 > 代码库 > 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