iOS学习笔记-087.彩票02——自定义tabBar

彩票02——自定义tabBar

一、问题分析

前面的示例中，我们发现系统的tabBar 中的子控件的高度超过了 tabBar的高度。中间有空隙，一句话：满足不了我们的需求。

解决方式：

方式1：移除系统的tabBar，添加自己的tabBar
1. TabBar用UIView代替(因为系统的TabBar不好用)
2. 子控键用UIButton代替
3. 切换子控制器 selectedIndex

方式2：移除系统tabBar子控件

---

二、自定义tabBar

2.1 简单分析

1. 子控件的个数、选中的图片、默认的图片等是由外界决定的，那么他们应该提供一个方法来设置相关的东西。

2. 我们得到了个数了以后，应该是使用代码来子控件，这个子控件使用 UIButton。这个button是可以相互切换的，因此我们应该添加点击事件。点击的选中，上一次选中的置为默认状态，那么我们需要一个变量来记住上一次选中的。

3. 我们添加的子控件，需要铺满我们的tabBar ,需要我们自己计算每个控件的位置。我们可以知道子控件的高度是tabBar的高度，子控件的宽度是 tabBar/我们添加的个数。这个控件的x值等于：序号*子控件的宽度（序号从0开始）。

4. 当我们点击了 子控件。表示我们选中了这个选项，我们需要通知外界，我选择改变了，那么我们需要添加一个协议。用来通知外界当前选中的item。

==问题==：我们发现我们的子控件，居然有高亮状态，我们来个简单粗暴的，直接自定义子控件，屏蔽掉高亮方法。

2.2 QWMTabBarButton.m

////  QWMTabBarButton.m//  03_UIView79_彩票////  Created by 杞文明 on 17/7/25.//  Copyright © 2017年 杞文明. All rights reserved.//#import "QWMTabBarButton.h"@implementation QWMTabBarButton-(void)setHighlighted:(BOOL)highlighted{}@end

2.2 QWMTabBar.h

////  QWMTabBar.h//  03_UIView79_彩票////  Created by 杞文明 on 17/7/24.//  Copyright © 2017年 杞文明. All rights reserved.//#import <UIKit/UIKit.h>@class QWMTabBar;@protocol QWMTabBarDelegate <NSObject>-(void)tabBar:(QWMTabBar *)tabBar index:(NSInteger)index;@end@interface QWMTabBar : UIView/** 模型数组 */@property (nonatomic, strong) NSArray *items;@property (nonatomic,weak)id<QWMTabBarDelegate> delegate;@end

2.3 QWMTabBar.m

////  QWMTabBar.m//  03_UIView79_彩票////  Created by 杞文明 on 17/7/24.//  Copyright © 2017年 杞文明. All rights reserved.//#import "QWMTabBar.h"#import "QWMTabBarButton.h"@interface QWMTabBar()/** 记录选中的按钮 */@property (nonatomic, weak) UIButton *selButton;@end@implementation QWMTabBar-(void)setItems:(NSArray *)items{    _items = items;    for (int i=0; i<items.count; i++) {        //为了去除点击时候产生的高亮状态，我们自定义button        UIButton *button = [[QWMTabBarButton alloc]init];        [self addSubview:button];        UITabBarItem *item = items[i];        [button setBackgroundImage:item.image forState:UIControlStateNormal];        [button setBackgroundImage:item.selectedImage forState:UIControlStateSelected];        [button addTarget:self action:@selector(buttonOnClick:) forControlEvents:UIControlEventTouchDown];    }}// 当按钮点击的时候调用- (void)buttonOnClick:(UIButton *)button{    //如果现在选中的就是上一次的，那么不处理    if (_selButton==button) {        return;    }    //1.取消上次的选中    _selButton.selected = NO;    //2.记录当前选中的按钮    _selButton = button;    //3.选中当期点击的按钮    _selButton.selected = YES;    //4.通知外界切换自控制器    if([self.delegate respondsToSelector:@selector(tabBar:index:)]){        [self.delegate tabBar:self index:button.tag];    }}-(void)layoutSubviews{    if(_items.count<=0)        return;     [super layoutSubviews];    CGFloat buttonX = 0;    CGFloat buttonY = 0;    CGFloat buttonW = self.bounds.size.width / _items.count;    CGFloat buttonH = self.bounds.size.height;    int i = 0;    for (UIButton *button in self.subviews) {        button.tag = i;        buttonX = buttonW * i;        button.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);        if (0==i) {            [self buttonOnClick:button];        }        i++;    }}@end

三、图示