1.获取图片素材

方法有很多,我采用的是一款开源框架iOS-Images-Extractor, 直接下载安装,把映客的.ipa文件拖进去,点击star按钮完成点击Output Dir按钮就可以到输出获取所有图片素材

Paste_Image.png

2.基本骨架的搭建

基本都是采用UITabBarController + UINavigationController 架构,不过从获取的新版映客app图片资源里并没有看到 tabBar的背景图片和 tabBar中间那个摄像按钮的 hightlighted 状态下图片,从这里可以推断出映客采用的是系统的效果来实现的,比较简单,下面只说说细节部分

2.1 修改系统tabBar的前景色

系统tabBar默认前景色是亮灰色的,这里需要将它设置为白色.
在tabBarController的 viewDidLoad 的方法里设置如下代码:

[[UITabBar appearance] setBarTintColor:[UIColor whiteColor]];
[[UITabBar appearance] setTranslucent:NO];

2.2 设置tabBar中间摄像机按钮

通过拿到中间按钮的控制器,来拿到其tabBarItem 属性,设置tabBarItem 的 enable 值为 NO,再在 tabBar上面添加一个普通按钮

2.3 通过以上方法设置出来的tabBarbuton 的图片不是居中的,设置tabBar的 imageInsets 属性,我是自定义tabBar的所以重写 layoutSubViews 方法,在里面作设置
这里有处细节需要特别注意: imageInsets 的 top 和 bottom , left 和 right 绝对值必须相同,否则 tabBarItem 的图片重复点击会被拉伸变形,如图

tabBarItem被重复点击.png

- (void)layoutSubviews {
    [super layoutSubviews];
    
    // 设置中间按钮
    CGFloat centerX = QYScreenWidth * 0.5;
    CGFloat centerY = 10;
    self.centerBtn.center = CGPointMake(centerX, centerY);
    [self.centerBtn addTarget:self action:@selector(centerBtnClick) forControlEvents:UIControlEventTouchUpInside];
    
    // 设置item 内边距
    CGFloat top = 4;
    CGFloat left = 0;
    CGFloat bottom = -top; // bottom 和 top 绝对值必须相等,否则会出现重复点击该tabBarButton图片被拉伸的bug
    CGFloat right = -left;
    UIEdgeInsets edgeInsets = UIEdgeInsetsMake(top, left, bottom, right);
    for (UITabBarItem *item in self.items) {
        NSLog(@"=====%@",item);
        item.imageInsets = edgeInsets;
    }
    
}

这样基本骨架搭建完成了看下效果吧

Paste_Image.png