自定义UITabBar实现传统的框架(一)

这个文章介绍的是一个普遍使用的传统框架,底层是一个UITabBarController,然后上面是导航控制器UINavigationController。如下图:


自定义UITabBar实现传统的框架(一)_第1张图片
image.png

具体方法如下:

  • 1,创建自定义控制器QBYTabBarController继承UITabBarController,然后解决UITabBarItem的字体问题,因为只需要执行一次,所以在load方法中实现。

objc
//只会调用一次
+(void)load{
// 获取哪个类的UITabBarItem
UITabBarItem *tabItem = [UITabBarItem appearanceWhenContainedIn:self, nil];
// 设置按钮选中标题的颜色:富文本:描述一个文字颜色,字体,阴影,空心,图文混排
// 创建一个描述文本属性的字典
NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
attrs[NSForegroundColorAttributeName] = [UIColor blackColor];
[tabItem setTitleTextAttributes:attrs forState:UIControlStateSelected];

// *设置字体尺寸:只有设置正常状态下,才会有效果
NSMutableDictionary *attrsNor = [NSMutableDictionary dictionary];
attrsNor[NSFontAttributeName] = [UIFont systemFontOfSize:13];
[tabItem setTitleTextAttributes:attrsNor forState:UIControlStateNormal];

}

- 2,接下来就是在viewDidLoad方法中做以下几件事情:

```objc```
#pragma mark -生命周期的方法
-(void)viewDidLoad{
    [super viewDidLoad];
    // 1 添加子控制器(5个子控制器) -> 自定义控制器 -> 划分项目文件结构
    [self setUpAllChildViewController];
    // 2 设置tabBar上按钮内容 -> 由对应的子控制器的tabBarItem属性
    [self setUpAllTitleButton];
    // 3.自定义tabBar
    [self setUpTabBar];

}
  • 3,添加所有的子控制器:

objc
-(void)setUpAllChildViewController{
// 精华
QBYEssenceViewController *essenceVC = [[QBYEssenceViewController alloc]init];
UINavigationController *nav = [[QBYNavigationController alloc]initWithRootViewController:essenceVC];
[self addChildViewController:nav];

// 新帖
QBYNewViewController *newVc = [[QBYNewViewController alloc] init];
UINavigationController *nav1 = [[QBYNavigationController alloc] initWithRootViewController:newVc];
[self addChildViewController:nav1];

// 关注
QBYFriendThreadViewController *ftVc = [[QBYFriendThreadViewController alloc] init];
UINavigationController *nav3 = [[QBYNavigationController alloc] initWithRootViewController:ftVc];
[self addChildViewController:nav3];

// 我
 QBYMeViewController *meVc = [[QBYMeViewController alloc] init];
 UINavigationController *nav4 = [[QBYNavigationController alloc] initWithRootViewController:meVc];
 [self addChildViewController:nav4];

}

- 4,添加对应子控制器上的tabBarItem内容:
```objc```
#pragma mark -添加TabBar上的按钮
-(void)setUpAllTitleButton{
    
    // 0:nav
    UINavigationController *nav = self.childViewControllers[0];
    nav.tabBarItem.title = @"精华";
    nav.tabBarItem.image = [UIImage imageNamed:@"tabBar_essence_icon"];
    // 快速生成一个没有渲染图片
    nav.tabBarItem.selectedImage = [UIImage imageOriginalWithName:@"tabBar_essence_click_icon"];
    
    // 1:新帖
    UINavigationController *nav1 = self.childViewControllers[1];
    nav1.tabBarItem.title = @"新帖";
    nav1.tabBarItem.image = [UIImage imageNamed:@"tabBar_new_icon"];
    nav1.tabBarItem.selectedImage = [UIImage imageOriginalWithName:@"tabBar_new_click_icon"];
    
    // 3.关注
    UINavigationController *nav3 = self.childViewControllers[2];
    nav3.tabBarItem.title = @"关注";
    nav3.tabBarItem.image = [UIImage imageNamed:@"tabBar_friendTrends_icon"];
    nav3.tabBarItem.selectedImage = [UIImage imageOriginalWithName:@"tabBar_friendTrends_click_icon"];
    
    // 4.我
    UINavigationController *nav4 = self.childViewControllers[3];
    nav4.tabBarItem.title = @"我";
    nav4.tabBarItem.image = [UIImage imageNamed:@"tabBar_me_icon"];
    nav4.tabBarItem.selectedImage = [UIImage imageOriginalWithName:@"tabBar_me_click_icon"];
}

注意:这里存在一个问题,选中按钮的图片被渲染 -> iOS7之后默认tabBar上按钮图片都会被渲染 1.修改图片 2.通过代码 √
我的做法是新建一个UIImage分类实现:

objc

  • (UIImage *)imageOriginalWithName:(NSString *)imageName{

    UIImage *image = [UIImage imageNamed:imageName];

    return [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

}

- 5,利用kvc替换掉原来的tabBar:
```objc```
-(void)setUpTabBar{
    QBYTabBar * tabBar = [[QBYTabBar alloc]init];
    [self setValue:tabBar forKey:@"tabBar"];
}
  • 6,接下来我们就来实现下自定义QBYTabBar继承UITabBar,首先懒加载一个中间加好按钮,然后用layoutSubviews方法布局,一定要加super的方法:

objc
@interface QBYTabBar()
@property (nonatomic,weak) UIButton *plusButton;
@end
@implementation QBYTabBar

-(UIButton *)plusButton{

if (_plusButton == nil) {
    UIButton * btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [btn setImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateSelected];
    [btn sizeToFit];
    [self addSubview:btn];
    _plusButton = btn;
}
return _plusButton;

}

-(void)layoutSubviews{
[super layoutSubviews];

NSInteger count = self.items.count;

CGFloat btnW = self.qby_width / (count + 1);
CGFloat btnH = self.qby_height;
CGFloat x = 0;
int i = 0;

// 私有类:打印出来有个类,但是敲出来没有,说明这个类是系统私有类
// 遍历子控件 调整布局
for (UIView * tabBarButton in self.subviews) {
    if ([tabBarButton isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
        if (i == 2) {
            i++;
        }
        
        x = btnW * i;
        
        tabBarButton.frame = CGRectMake(x, 0, btnW, btnH);
        i++;
    }
}
self.plusButton.center = CGPointMake(self.qby_width * 0.5, self.qby_height * 0.5);

}

下一篇文章我会分析下自定义UINavigationController

你可能感兴趣的:(自定义UITabBar实现传统的框架(一))