iOS 底部按钮 工具栏 Tabbar 及 Tabbar 的自定义（中间突出）

其他 2018-10-15 13:33:17 阅读次数: 0

大多数应用使用系统自带的Tabbar就能够满足需求

通常情况都是在AppDelegate.m里创建一个UITabBarController将其它的控制器用UINavigationController包装一层，再添加到UITabBarController的viewControllers里。再将UITabBarController设置为self.window的rootViewController。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    UITabBarController * tabBarController = [[UITabBarController alloc] init];
    NSArray * array = @[@"OneViewController",@"TwoViewController",@"ThreeViewController",@"FourViewController"];
    NSArray * titleArray = @[@"乾",@"兑",@"离",@"震"];
    NSArray * nomalImageNameArray = @[@"home_32_black",@"wode_32_black",@"home_32_black",@"wode_32_black"];
    NSArray * selectedImageNameArray = @[@"home_32_red",@"wode_32_red",@"home_32_red",@"wode_32_red"];
    NSMutableArray * viewControllers = @[].mutableCopy;
    for (int i = 0; i < array.count; i ++) {
        id viewController = [[NSClassFromString(array[i]) alloc] init];
        [self setItemWithViewController:viewController
                                  title:titleArray[i]
                            normalColor:[UIColor blackColor]
                          selectedColor:[UIColor redColor]
                            normalImage:[UIImage imageNamed:nomalImageNameArray[i]]
                          selectedImage:[UIImage imageNamed:selectedImageNameArray[i]]];
        UINavigationController * navigationController = [[UINavigationController alloc] initWithRootViewController: viewController];
        navigationController.navigationBar.barTintColor = [UIColor whiteColor];
        [viewControllers addObject:navigationController];
    }
    tabBarController.viewControllers = viewControllers;
    tabBarController.tabBar.barTintColor = [UIColor whiteColor];
    self.window.rootViewController = tabBarController;
    [self.window makeKeyAndVisible];
    return YES;
}

- (void)setItemWithViewController:(UIViewController *)viewController title:(NSString *)title normalColor:(UIColor *)normalColor selectedColor:(UIColor *)selectedColor normalImage:(UIImage *)normalImage selectedImage:(UIImage *)selectedImage{
    viewController.tabBarItem.title = title;
    [viewController.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:normalColor} forState:UIControlStateNormal];
    [viewController.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:selectedColor} forState:UIControlStateSelected];
    viewController.tabBarItem.image = [normalImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    viewController.tabBarItem.selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];//禁止渲染
}

设置tabbar的主要部分提出到了下面的方法里

设置标题：

viewController.tabBarItem.title = title;

设置未选中时标题颜色： 

 [viewController.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:normalColor} forState:UIControlStateNormal];

设置设置选中时标题颜色：

 [viewController.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:selectedColor} forState:UIControlStateSelected];

设置未选中时图片：

 viewController.tabBarItem.image = [normalImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

设置选中时的图片：

viewController.tabBarItem.selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];//禁止渲染

其中的禁止图片渲染一般会用到，否则的话图片会被渲染成系统默认的颜色，而不是你的图片颜色。

这里面选用的图片需要大小合适，如果过大就会超出范围而不是只显示tabBarItem大小。

自定义的Tabbar就可以更方便的实现更多的功能，如设置背景图片，控制每个按钮大小，设置按钮凸出，给按钮添加动画等等。

首先继承自UIView创建一个FTTabbar类

FTTabbar.h中设置了三个属性：

@property(nonatomic, strong)NSArray * items;
@property(nonatomic, assign)NSInteger selectedIndex;
@property(nonatomic, copy)void(^onClickChangeSelectedIndex)(NSInteger selectedIndex);

其中items用来传入标题，图片，字体大小，颜色等信息。

selectedIndex用来传入当前启动时显示的界面下标（从0开始）。

onClickChangeSelectedIndex   block 也可以用代理来写，用作点击按钮的回调，通知TabbarController切换界面。

FTTabbar.m中也是三个主要内容，先贴上全部代码

#import "FTTabBar.h"
#import "DEButton.h"
@interface FTTabBar()
@property(nonatomic, strong)UIImageView * backImageView;
@property(nonatomic, strong)DEButton * currentButton;
@end
typedef NS_ENUM(NSInteger,TabBarBtnTag) {
    FirstTabBarBtnTag = 100,
};
@implementation FTTabBar

- (id)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        [self setUp];
    }
    return self;
}

- (void)setUp{
    [self addBackImageView];
}

- (void)addBackImageView{
    self.backImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, self.frame.size.height)];
    self.backImageView.userInteractionEnabled = YES;
    self.backImageView.backgroundColor = [UIColor yellowColor];
    [self addSubview:self.backImageView];
}

- (void)setItems:(NSArray *)items{
    _items = items;
    [self setButtons];
}

- (void)setButtons{
    CGFloat width = self.frame.size.width;
    CGFloat btnW = width/_items.count;
    for (int i = 0; i < _items.count; i ++) {
        DEButton * button = [[DEButton alloc] initWithFrame:CGRectMake(btnW * i, 0, btnW, self.frame.size.height)
                                            arrangementType:ArrangementTypeTextDown
                                                  imageSize:CGSizeMake(30, 30)];
        button.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.f green:arc4random()%255/255.f blue:arc4random()%255/255.f alpha:1];
        NSDictionary * dict = _items[i];
        button.titleLabel.textAlignment = NSTextAlignmentCenter;
        button.titleLabel.font = [UIFont systemFontOfSize:12];
        [button setImage:[UIImage imageNamed:dict[@"imageNormal"]] forState:UIControlStateNormal];
        [button setImage:[UIImage imageNamed:dict[@"imageSelected"]] forState:UIControlStateSelected];
        [button setTitleColor:dict[@"colorNormal"] forState:UIControlStateNormal];
        [button setTitleColor:dict[@"colorSelected"] forState:UIControlStateSelected];
        [button setTitle:dict[@"title"] forState:UIControlStateNormal];
        [button addTarget:self action:@selector(onClickButton:) forControlEvents:UIControlEventTouchUpInside];
        button.tag = FirstTabBarBtnTag + i;
        [self.backImageView addSubview:button];
        if (i == self.selectedIndex) {
            button.selected = YES;
            self.currentButton = button;
        }
    }
}

- (void)onClickButton:(DEButton *)sender{
    if (self.onClickChangeSelectedIndex) {
        self.onClickChangeSelectedIndex(sender.tag - FirstTabBarBtnTag);
    }
    
    self.currentButton.selected = NO;
    sender.selected = YES;
    self.currentButton = sender;
}


@end

backImageView用来设置自定义tabbar的背景图片，也可以不使用

currentButton表示当前选中的按钮，此处按钮为自定义按钮前面有一篇按钮图片和文字的排列说的就是这个按钮

接下来

第一步就是在initWithFrame的方法里创建背景ImageView图片和颜色随意设置

- (void)addBackImageView{
    self.backImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, self.frame.size.height)];
    self.backImageView.userInteractionEnabled = YES;
    self.backImageView.backgroundColor = [UIColor yellowColor];
    [self addSubview:self.backImageView];
}

第二步是在items的setter中根据传入的数据来创建tabbar的按钮

- (void)setButtons{
    CGFloat width = self.frame.size.width;
    CGFloat btnW = width/_items.count;
    for (int i = 0; i < _items.count; i ++) {
        DEButton * button = [[DEButton alloc] initWithFrame:CGRectMake(btnW * i, 0, btnW, self.frame.size.height)
                                            arrangementType:ArrangementTypeTextDown
                                                  imageSize:CGSizeMake(30, 30)];
        button.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.f green:arc4random()%255/255.f blue:arc4random()%255/255.f alpha:1];
        NSDictionary * dict = _items[i];
        button.titleLabel.textAlignment = NSTextAlignmentCenter;
        button.titleLabel.font = [UIFont systemFontOfSize:12];
        [button setImage:[UIImage imageNamed:dict[@"imageNormal"]] forState:UIControlStateNormal];
        [button setImage:[UIImage imageNamed:dict[@"imageSelected"]] forState:UIControlStateSelected];
        [button setTitleColor:dict[@"colorNormal"] forState:UIControlStateNormal];
        [button setTitleColor:dict[@"colorSelected"] forState:UIControlStateSelected];
        [button setTitle:dict[@"title"] forState:UIControlStateNormal];
        [button addTarget:self action:@selector(onClickButton:) forControlEvents:UIControlEventTouchUpInside];
        button.tag = FirstTabBarBtnTag + i;
        [self.backImageView addSubview:button];
        if (i == self.selectedIndex) {
            button.selected = YES;
            self.currentButton = button;
        }
    }
}

最后在按钮的点击方法进行回调将点击信息传递给TabbarController

- (void)onClickButton:(DEButton *)sender{
    if (self.onClickChangeSelectedIndex) {
        self.onClickChangeSelectedIndex(sender.tag - FirstTabBarBtnTag);
    }
    
    self.currentButton.selected = NO;
    sender.selected = YES;
    self.currentButton = sender;
}

使用方法，在这里是创建了一个自定义个MyTabbarController继承自TabbarController

MyTabbarController.m的全部代码

#import "MyTabbarController.h"
#import "FTTabBar.h"

@interface MyTabbarController ()
@property(nonatomic, strong)NSMutableArray * items;
@end

@implementation MyTabbarController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self addViewControllers];
    [self addTabbar];
}

- (void)addViewControllers{
    NSMutableArray * arrayM = @[].mutableCopy;
    self.items = @[].mutableCopy;
    NSArray * titleArray = @[@"首页",@"第二页",@"第三页",@"我的"];
    NSArray * imageArray = @[@"home_32_black",@"wode_32_black",@"home_32_black",@"wode_32_black"];
    NSArray * selectedArray = @[@"home_32_red",@"wode_32_red",@"home_32_red",@"wode_32_red"];
    NSArray * viewControllerNameArray = @[@"UIViewController",@"UIViewController",@"UIViewController",@"UIViewController"];
    for (int i = 0; i < viewControllerNameArray.count; i ++) {
        UIViewController * viewController = [[NSClassFromString(viewControllerNameArray[i]) alloc] init];
        UINavigationController * nav = [[UINavigationController alloc] initWithRootViewController:viewController];
        viewController.view.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.f green:arc4random()%255/255.f blue:arc4random()%255/255.f alpha:1];
        [arrayM addObject:nav];
        NSMutableDictionary * dictM = @{}.mutableCopy;
        dictM[@"imageNormal"] = imageArray[i];
        dictM[@"imageSelected"] = selectedArray[i];
        dictM[@"colorNormal"] = [UIColor darkGrayColor];
        dictM[@"colorSelected"] = [UIColor redColor];
        dictM[@"title"] = titleArray[i];
        [self.items addObject:dictM];
    }
    [self setViewControllers:arrayM animated:YES];
}

- (void)addTabbar{
    FTTabBar * tabbar = [[FTTabBar alloc] initWithFrame:CGRectMake(0, 0, self.tabBar.frame.size.width, self.tabBar.frame.size.height)];
    [self.tabBar addSubview:tabbar];
    tabbar.items = self.items;
    __weak MyTabbarController * weakSelf = self;
    tabbar.onClickChangeSelectedIndex = ^(NSInteger selectedIndex) {
        weakSelf.selectedIndex = selectedIndex;
    };
}


@end

还是两个步骤：

1.添加子控制器到TabBarController也就是addViewControllers方法

2.添加自定义tabbar到系统的tabbar上也就是addTabbar方法

Demo地址

猜你喜欢

转载自blog.csdn.net/weixin_39339407/article/details/81506676
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022