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

三、图示