iOS之ToolBar定制

ToorBar的定制

在诸如社区类的app里面，很多都涉及到用户发布消息，如现今最流行的新浪微博，每条信息底部都会有个工具条，正如下图所示，有转发、评论和点赞三个按钮的工具条。

结构

1.作为一个独立存在的toolBar，必须要有个View作为载体，这里选择用UIImageView；
2.toolBar有三个可以点击的按钮，所以就要创建三个button。

下面直接上代码了！

YJYStatusToolBar.h文件

#import <UIKit/UIKit.h>

@class YJYStatusToolBar;
@class YJYStatus;
typedef enum{
    YJYStatusToolBarButtonTypeRetweet,        //转发            
    YJYStatusToolBarButtonTypeComment,     //评论
    YJYStatusToolBarButtonTypeAttribude       //点赞
}YJYStatusToolBarButtonType;

//设置代理方法，标记点击了哪个按钮
@protocol  YJYStatusToolBarDelegate<NSObject>
-(void)statusToorBarButonClicked:(YJYStatusToolBarButtonType )type status:(YJYStatus *)status;
@end

@interface YJYStatusToolBar : UIImageView
@property (nonatomic, strong)YJYStatus *status;        //传入的数据模型
@property (nonatomic, weak)id<YJYStatusToolBarDelegate>delegate;

@end

YJYStatusToolBar.m文件

在.m文件里的私有属性有两个可变数组，和三个按钮，数组通过懒加载创建

-(NSMutableArray *)btns{
    if (!_btns) {
        _btns = [NSMutableArray array];
    }
    return _btns;
}

-(NSMutableArray *)dividesV{
    if (!_dividesV) {
        _dividesV = [NSMutableArray array];
    }
    return _dividesV;
}

重写initWithFrame方法：UIImageView交互必须要打开（self.userInteractionEnabled = YES）

-(instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setupAllChildView];
        self.userInteractionEnabled = YES;
        self.image = [UIImage strechableImage:@"timeline_card_bottom_background"]; 
    }
    return self;
}

在init方法里调用setupAllChildView方法

-(void)setupAllChildView
{
    UIButton *retweet = [self setupOneButtonWithImage:[UIImage imageNamed:@"timeline_icon_retweet"] title:@"转发" type:YJYStatusToolBarButtonTypeRetweet];
    _retweet = retweet;

    UIButton *comment = [self setupOneButtonWithImage:[UIImage imageNamed:@"timeline_icon_comment"] title:@"评论" type:YJYStatusToolBarButtonTypeComment];
    _comment = comment;

    UIButton *unlink = [self setupOneButtonWithImage:[UIImage imageNamed:@"timeline_icon_unlike"] title:@"赞" type:YJYStatusToolBarButtonTypeAttribude];
    _unlink = unlink;

    for (int i = 0; i < 2; i++) {
        UIImageView *divideV = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"timeline_card_bottom_line"]];
        [self addSubview:divideV];
        [self.dividesV addObject:divideV];
    }
}

再抽调方法setupOneButtonWithImage: title: type:

-(UIButton *)setupOneButtonWithImage:(UIImage *)image title:(NSString *)title type:(YJYStatusToolBarButtonType)type
{
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setTitle:title forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button setImage:image forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:12];
    button.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, 0);
    button.tag = type;
    [button addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];

    [self addSubview:button];
    [self.btns addObject:button]; //每创建一个button就加入到数字里

    return button;
}

由于在一个View的控件上添加了三个button而没有设置frame值，所以要layoutSubView一下

-(void)layoutSubviews{
    [super layoutSubviews];

    NSUInteger count = self.btns.count;  //通过self.btn.count得出toolBar里button的数量，方便设置frame
    CGFloat w = YJYScreenWidth / count;
    CGFloat h = self.height;
    CGFloat x = 0;
    CGFloat y = 0;

    for (int i = 0; i < count; i++) {                                //设置button的frame
        UIButton *btn = self.btns[i];
        x = w * i;
        btn.frame = CGRectMake(x, y, w, h);
    }
    int i = 1;
    for (UIImageView *divide in self.dividesV) {          //设置间隔线的坐标
        UIButton *btn = self.btns[i];
        divide.x = btn.x;
        i++;
    }
}

实现代理方法：参数有type和status，即是按钮类型和这个消息的数据

-(void)btnClicked:(UIButton *)btn{
    if ([_delegate respondsToSelector:@selector(statusToorBarButonClicked:status:)]) {
        [_delegate statusToorBarButonClicked:(YJYStatusToolBarButtonType)btn.tag status:self.status];
    }
}

因为toolBar上有转发数，评论数和点赞数，涉及到数据模型YJYStatusModel，所以实现一下setter的方法

-(void)setStatus:(YJYStatus *)status
{
    _status = status;

    [self setBtn:_retweet title:status.reposts_count];
    [self setBtn:_comment title:status.comments_count];
    [self setBtn:_unlink title:status.attitudes_count];

}
-(void)setBtn:(UIButton *)btn title:(int)count
{    
    NSString *title = nil;
    if (count) {
        if (count >= 10000) {
            CGFloat floatCount = count / 10000.0;
            title = [NSString stringWithFormat:@"%.1fW", floatCount];
            title = [title stringByReplacingOccurrencesOfString:@".0" withString:@""];
        }else{
            title = [NSString stringWithFormat:@"%i", count];
       }
        [btn setTitle:title forState:UIControlStateNormal];
    }
}

用到的工具类

UIImage+Image.m主要方法：图片渲染和图片拉伸的两个方法

+(instancetype)imageWithOriginName:(NSString *)imageName{
    UIImage *image = [UIImage imageNamed:imageName];
    return [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}
+(instancetype)strechableImage:(NSString *)imageName{
    UIImage *image = [UIImage imageNamed:imageName];
    return [image stretchableImageWithLeftCapWidth:image.size.width / 2 topCapHeight:image.size.height / 2];
}

UIView+Frame.m 坐标的拓展方法：x.y.with.height.size五个坐标属性的getter和setter方法

- (CGFloat)width
{
    return self.frame.size.width;
}
- (void)setWidth:(CGFloat)width
{
    CGRect frame = self.frame;
    frame.size.width = width;
    self.frame = frame;
}
- (CGFloat)height
{
    return self.frame.size.height;
}
- (void)setHeight:(CGFloat)height
{
    CGRect frame = self.frame;
    frame.size.height = height;
    self.frame = frame;
}
- (CGFloat)x
{
    return self.frame.origin.x;
}
- (void)setX:(CGFloat)x
{
    CGRect frame = self.frame;
    frame.origin.x = x;
    self.frame = frame;
}
- (CGFloat)y
{
    return self.frame.origin.y;
}
- (void)setY:(CGFloat)y
{
    CGRect frame = self.frame;
    frame.origin.y = y;
    self.frame = frame;
}
- (CGSize)size
{
    return self.frame.size;
}
- (void)setSize:(CGSize)size
{
    CGRect frame = self.frame;
    frame.size = size;
    self.frame = frame;
}