iOS通过按钮图片创建自定义TabBar

一、实现分析

1、创建自定义TabBar 

2、在自定义TabBar 添加按钮监听 

3、在自定义TabBar 创建通知代理

4、创建自定义TabBar上面的TabBarButton

5、调用范例 (实现代理方法完成调用)

自定义特性:

1、取消了按钮的高亮状态

2、实现图片就可以创建TabBarButton不需要文字(文字跟图片其实是一张图片)

3、默认选中第一个控制器

4、可以获取点击按钮从第几个到第几个

二、实现步骤

1、首先创建TabBar继承自UIView (.h文件)

#import <UIKit/UIKit.h>
@class MoTabBar;

@protocol MoTabBarDelegate <NSObject>

@optional
- (void)tabBar:(MoTabBar *)tabBar didSelectButtonFrom:(int)from to:(int)to;

@end

@interface MoTabBar : UIView
@property (nonatomic, weak) id<MoTabBarDelegate> delegate;

/**
 *  用来添加一个内部的按钮
 *
 *  @param name    按钮图片
 *  @param selName 按钮选中时的图片
 */
- (void)addTabButtonWithName:(NSString *)name selName:(NSString *)selName;
@end
2、实现TabBar里面的方法 (.m文件)

#import "MoTabBar.h"
#import "MoTabBarButton.h"

@interface MoTabBar()
/**
 *  记录当前选中的按钮
 */
@property (nonatomic, weak) MoTabBarButton *selectedButton;
@end

@implementation MoTabBar

- (void)addTabButtonWithName:(NSString *)name selName:(NSString *)selName
{
    // 创建按钮
    MoTabBarButton *button = [MoTabBarButton buttonWithType:UIButtonTypeCustom];
    
    // 设置图片
    [button setBackgroundImage:[UIImage imageNamed:name] forState:UIControlStateNormal];
    [button setBackgroundImage:[UIImage imageNamed:selName] forState:UIControlStateSelected];
    
    // 添加
    [self addSubview:button];
    
// UIControlEventTouchDown : 手指一按下去就会触发这个事件
    // 监听
    [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDown];
    
    // 默认选中第0个按钮
    if (self.subviews.count == 1) {
        [self buttonClick:button];
    }
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    NSInteger count = self.subviews.count;
    for (int i = 0; i<count; i++) {
        MoTabBarButton *button = self.subviews[i];
        button.tag = i;
        
        // 设置frame
        CGFloat buttonY = 0;
        CGFloat buttonW = self.frame.size.width / count;
        CGFloat buttonH = self.frame.size.height;
        CGFloat buttonX = i * buttonW;
        button.frame = CGRectMake(buttonX, buttonY, buttonW, buttonH);
    }
}

/**
 *  监听按钮点击
 */
- (void)buttonClick:(MoTabBarButton *)button
{
    // 0.通知代理
    if ([self.delegate respondsToSelector:@selector(tabBar:didSelectButtonFrom:to:)]) {
        [self.delegate tabBar:self didSelectButtonFrom:self.selectedButton.tag to:button.tag];
    }
    
    // 1.让当前选中的按钮取消选中
    self.selectedButton.selected = NO;
    
    // 2.让新点击的按钮选中
    button.selected = YES;
    
    // 3.新点击的按钮就成为了"当前选中的按钮"
    self.selectedButton = button;
}
@end

3、创建和实现自定义TabBarButton (.h和.m) 继承自UIButton




#import <UIKit/UIKit.h>

@interface MoTabBarButton : UIButton

@end


/*下面是.m文件*/
#import "MoTabBarButton.h"

@implementation MoTabBarButton

/**
 *  只要覆盖了这个方法,按钮就不存在高亮状态
 */
- (void)setHighlighted:(BOOL)highlighted
{
    //    [super setHighlighted:highlighted];
}
@end

4、在TabBarController添加自定义TabBar 

注:一定要实现代理方法、并设置 self.selectedIndex = 你的控制器; (int类型 第几个控制器) 

self.viewControllers.count为子控制器个数 可以自定义 



#import "MoTabBarController.h"
#import "MoTabBar.h"
#import "MoTabBarButton.h"

@interface MoTabBarController () <MoTabBarDelegate>
@end

@implementation MoTabBarController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 1.添加自己的tabbar
    MoTabBar *moTabBar = [[MoTabBar alloc] init];
    moTabBar.delegate = self;
    moTabBar.frame = self.tabBar.bounds;
    [self.tabBar addSubview:moTabBar];
    
    // 2.添加对应个数的按钮
    for (int i = 0; i < self.viewControllers.count; i++) {
        NSString *name = [NSString stringWithFormat:@"TabBar%d", i + 1];
        NSString *selName = [NSString stringWithFormat:@"TabBar%dSel", i + 1];
        [moTabBar addTabButtonWithName:name selName:selName];
    }
}

/**
 normal : 普通状态
 highlighted : 高亮(用户长按的时候达到这个状态)
 disable : enabled = NO
 selected :  selected = YES
 */

#pragma mark - MJTabBar的代理方法
-(void)tabBar:(MoTabBar *)tabBar didSelectButtonFrom:(int)from to:(int)to;
{
    // 选中最新的控制器
    self.selectedIndex = to;
}
@end







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值