首先自己创建数个控制器和对应的storyboard,在每个控制器对应的storyboard中拖入
image.png
包含了一个导航栏控制器和一个viewController,点击viewController图中1位置,在2位置处输入当前控制器的名称用来指定控制器,注意要勾选Is Initial,不然屏幕是黑的
image.png
image.png
要注意的是,给导航栏控制器添加一个TabBar,每一个子控制器都要这样处理
image.png
处理完之后,找到自己的根控制器,我这里是用Main.storyboard作为根控制器,将原来自带的Scene删除,搜索UITabbarController,拖到storyboard中
image.png
image.png
删除自带的两个控制器,找到storyboard Reference,有几个根控制器就拖几个,我这里是四个,但是加上中间按钮一共是五个,中间一个的作用其实是用来占位,以便为后面的按钮腾出位置
image.png
拖入的效果是这样,在右上角输入对应的storyboard的名称
image.png
关键的步骤来了,按住control键,鼠标左键点击图中1位置,按住不放一直拖到图中2位置
image.png
松开后出现如下视图,点击view controller
image.png
出现下面结果说明拖线成功,我们将所有的都拖好,这时候已经实现了我们的tabbar,但是还没添加tab的图片和文字,看不出效果
image.png
image.png
找到各自的storyboard设置图片,选中图片,标题
image.png
运行一下项目,最好给子控制器设置一下背景颜色,明显一点
image.png
这时候就出现了我们想要的效果,中间空的一部分是之前说的占位,留着添加按钮用,现在我们准备添加按钮,继承UITabBar,在这里面新建按钮
image.png
.h文件中没有要写的东西,我们在.m中做文章,代码如下
#import "Tabbar.h"
@interface Tabbar()
/**发布按钮*/
@property (nonatomic, weak) UIButton *publishButton;
@end
@implementation Tabbar
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
UIButton *publishButton = [UIButton buttonWithType:UIButtonTypeCustom];
// 设置图片
[publishButton setImage:[UIImage imageNamed:@"tabbar_compose_icon_add"] forState:UIControlStateNormal];
// 设置高亮图片
[publishButton setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted];
// 设置背景图片
[publishButton setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];
// 按钮添加到控制器view中
[self addSubview:publishButton];
// 将publishButton 添加为属性
self.publishButton = publishButton;
}
return self;
}
-(void)layoutSubviews {
[super layoutSubviews];
// 设置发布的按钮位置
self.publishButton.frame = CGRectMake(0, 0, self.publishButton.currentBackgroundImage.size.width, self.publishButton.currentBackgroundImage.size.height);
// 将自定义按钮放到中间
self.publishButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);
// 让发布按钮处于tabbar的最上层,以免被覆盖无法响应点击事件
[self bringSubviewToFront:_publishButton];
}
@end
其中bringSubviewToFront这个函数要使用,不然按钮会在tabbar的底部,响应不到我们的点击事件,代码封装好了之后,在根控制器中引入这个文件,写下如下代码
- (void)viewDidLoad {
[super viewDidLoad];
[self setValue:[[Tabbar alloc] init] forKey:@"tabBar"];
}
运行项目可以看到如下效果,到这里基本上完成了我们的需求
image.png
最后提供一下demo地址:https://github.com/miaoyuxuan/tabBar
总结:
只是一个初级的小demo,我个人也是为了做一个记录,让自己有一个复盘的机会.用storyboard实现起来速度比较快,效率高,节约了很多时间成本,除了设置中间按钮写了一些代码,其他的都是拖线,设置属性实现,不过用纯代码的方式也可以实现,首选应该还是以上的方法,如果有写的不对的地方请及时告知
网友评论